.bp-page[b-nl6qfeq74h] { display: grid; gap: 16px; }
/* ── Topo ───────────────────────────────────────────────── */
.bp-hero[b-nl6qfeq74h] {
padding: 14px 24px;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, #101736, #1e1b4b 55%, #4c1d95);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.bp-hero .kicker[b-nl6qfeq74h] {
display: block;
margin-bottom: 4px;
font-size: .7rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .75;
}
.bp-hero h1[b-nl6qfeq74h] { margin: 4px 0 0; font-size: 2rem; font-weight: 950; }
.bp-hero p[b-nl6qfeq74h] { margin: 5px 0 0; font-size: 14px; opacity: .8; }
.bp-btnnovotopo[b-nl6qfeq74h] {
border: 0;
border-radius: 12px;
padding: 10px 18px;
font-weight: 800;
font-size: .9rem;
color: #1e1b4b;
background: #fff;
cursor: pointer;
white-space: nowrap;
}
.bp-btnnovotopo:hover[b-nl6qfeq74h] { background: #e0e7ff; }
/* ── Abas entre as duas páginas ─────────────────────────── */
.bp-abas[b-nl6qfeq74h] { display: flex; gap: 8px; border-bottom: 2px solid #e2e8f0; }
.bp-aba[b-nl6qfeq74h] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 20px;
border-radius: 12px 12px 0 0;
font-size: .9rem;
font-weight: 800;
color: #64748b;
text-decoration: none;
background: transparent;
margin-bottom: -2px;
border-bottom: 2px solid transparent;
}
.bp-aba:hover[b-nl6qfeq74h] { color: #4338ca; background: #f5f3ff; }
.bp-aba.on[b-nl6qfeq74h] { color: #4338ca; border-bottom-color: #4f46e5; background: #eef2ff; }
.bp-abacnt[b-nl6qfeq74h] {
padding: 1px 9px;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: .72rem;
font-weight: 800;
}
.bp-aba.on .bp-abacnt[b-nl6qfeq74h] { background: #4f46e5; color: #fff; }
/* ── Mensagens ──────────────────────────────────────────── */
.bp-msg[b-nl6qfeq74h] { padding: 10px 14px; border-radius: 11px; font-size: .85rem; font-weight: 700; }
.bp-msg.ok[b-nl6qfeq74h] { background: #dcfce7; color: #15803d; }
.bp-msg.err[b-nl6qfeq74h] { background: #fef2f2; color: #b91c1c; }
/* Cartão do post que ACABOU de ser gerado — o "pra onde ele foi?" resolvido */
.bp-recem[b-nl6qfeq74h] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 18px;
border-radius: 14px;
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border: 2px solid #34d399;
}
.bp-recem-txt[b-nl6qfeq74h] { display: grid; gap: 2px; color: #065f46; font-size: .9rem; }
.bp-recem-txt span[b-nl6qfeq74h] { font-weight: 800; font-size: 1rem; }
.bp-recem-acoes[b-nl6qfeq74h] { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-btnver[b-nl6qfeq74h], .bp-btnedit[b-nl6qfeq74h] {
padding: 9px 16px;
border-radius: 10px;
font-size: .82rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.bp-btnver[b-nl6qfeq74h] { background: #059669; color: #fff; }
.bp-btnver:hover[b-nl6qfeq74h] { background: #047857; }
.bp-btnedit[b-nl6qfeq74h] { background: #fff; color: #065f46; border: 1px solid #34d399; }
.bp-btnedit:hover[b-nl6qfeq74h] { background: #ecfdf5; }
.bp-btnfecharecem[b-nl6qfeq74h] {
padding: 9px 14px;
border: 0;
border-radius: 10px;
background: transparent;
color: #047857;
font-size: .8rem;
font-weight: 700;
cursor: pointer;
}
.bp-btnfecharecem:hover[b-nl6qfeq74h] { background: rgba(4, 120, 87, .1); }
/* ── Busca única das 3 colunas ──────────────────────────── */
.bp-buscabar[b-nl6qfeq74h] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
}
.bp-buscabar > i[b-nl6qfeq74h] { color: #94a3b8; }
.bp-buscainput[b-nl6qfeq74h] {
flex: 1;
min-width: 0;
border: 0;
outline: none;
font-size: .95rem;
color: #1e293b;
background: transparent;
}
.bp-buscainput[b-nl6qfeq74h]::placeholder { color: #94a3b8; }
.bp-buscalimpar[b-nl6qfeq74h] {
border: 0;
background: #f1f5f9;
color: #64748b;
border-radius: 999px;
padding: 4px 12px;
font-size: .74rem;
font-weight: 700;
cursor: pointer;
}
.bp-buscalimpar:hover[b-nl6qfeq74h] { background: #fee2e2; color: #b91c1c; }
.bp-btnpautas[b-nl6qfeq74h] {
padding: 8px 14px;
border: 1px solid #c7d2fe;
border-radius: 10px;
background: #eef2ff;
color: #4338ca;
font-size: .78rem;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
}
.bp-btnpautas:hover[b-nl6qfeq74h] { background: #4f46e5; color: #fff; }
.bp-btnpautas:disabled[b-nl6qfeq74h] { opacity: .5; cursor: not-allowed; }
/* ── O quadro de 3 colunas ──────────────────────────────── */
.bp-quadro[b-nl6qfeq74h] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
align-items: start;
}
@media (max-width: 1100px) { .bp-quadro[b-nl6qfeq74h] { grid-template-columns: 1fr; } }
.bp-col[b-nl6qfeq74h] {
padding: 14px;
border: 1px solid #e2e8f0;
border-top: 4px solid #cbd5e1;
border-radius: 16px;
background: #f8fafc;
}
.bp-col-amb[b-nl6qfeq74h] { border-top-color: #f59e0b; }
.bp-col-azul[b-nl6qfeq74h] { border-top-color: #3b82f6; }
.bp-col-verde[b-nl6qfeq74h] { border-top-color: #16a34a; }
.bp-colhead[b-nl6qfeq74h] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-colhead h2[b-nl6qfeq74h] { margin: 0; font-size: 1rem; font-weight: 900; color: #0f172a; }
.bp-colcnt[b-nl6qfeq74h] {
padding: 2px 11px;
border-radius: 999px;
background: #e2e8f0;
color: #475569;
font-size: .78rem;
font-weight: 900;
}
.bp-col-amb .bp-colcnt[b-nl6qfeq74h] { background: #fef3c7; color: #92400e; }
.bp-col-azul .bp-colcnt[b-nl6qfeq74h] { background: #dbeafe; color: #1e40af; }
.bp-col-verde .bp-colcnt[b-nl6qfeq74h] { background: #dcfce7; color: #166534; }
.bp-colexplica[b-nl6qfeq74h] { margin: 4px 0 12px; font-size: .74rem; color: #94a3b8; }
/* Rolagem DENTRO da coluna: a página não fica quilométrica com 187 itens */
.bp-cards[b-nl6qfeq74h] { display: grid; gap: 9px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.bp-cardpauta[b-nl6qfeq74h] {
padding: 11px 13px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
}
.bp-cardpauta:hover[b-nl6qfeq74h] { border-color: #c7d2fe; }
.bp-cardpauta.novo[b-nl6qfeq74h] { border-color: #dc2626; box-shadow: inset 4px 0 0 #dc2626; }
.bp-cardtitulo[b-nl6qfeq74h] { font-size: .86rem; font-weight: 800; color: #1e293b; line-height: 1.35; }
.bp-cardtema[b-nl6qfeq74h] { margin-top: 3px; font-size: .71rem; color: #94a3b8; font-weight: 700; }
.bp-cardvol[b-nl6qfeq74h] {
margin-top: 6px;
font-size: .71rem;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
}
.bp-volbar[b-nl6qfeq74h] {
display: block;
width: 52px;
height: 5px;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
}
.bp-volbar span[b-nl6qfeq74h] { display: block; height: 100%; background: #7c3aed; }
.bp-cardacoes[b-nl6qfeq74h] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bp-ac[b-nl6qfeq74h] {
padding: 6px 11px;
border: 1px solid #dbe4ef;
border-radius: 8px;
background: #fff;
color: #475569;
font-size: .74rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.bp-ac:hover[b-nl6qfeq74h] { background: #f1f5f9; color: #1e293b; }
.bp-ac.primaria[b-nl6qfeq74h] { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.bp-ac.primaria:hover[b-nl6qfeq74h] { background: #4338ca; }
.bp-ac.perigo[b-nl6qfeq74h] { color: #b91c1c; border-color: #fecaca; }
.bp-ac.perigo:hover[b-nl6qfeq74h] { background: #fee2e2; }
.bp-ac:disabled[b-nl6qfeq74h] { opacity: .45; cursor: not-allowed; }
.bp-vermais[b-nl6qfeq74h] {
width: 100%;
margin-top: 10px;
padding: 8px;
border: 1px dashed #c7d2fe;
border-radius: 10px;
background: #fff;
color: #4338ca;
font-size: .77rem;
font-weight: 800;
cursor: pointer;
}
.bp-vermais:hover[b-nl6qfeq74h] { background: #eef2ff; }
.bp-codbncc[b-nl6qfeq74h] {
display: inline-block;
margin-bottom: 5px;
background: #eef2ff;
color: #4338ca;
font-weight: 800;
font-size: .72rem;
padding: .2rem .5rem;
border-radius: 6px;
letter-spacing: .03em;
}
.bp-novo[b-nl6qfeq74h] {
display: inline-block;
margin-bottom: 5px;
margin-left: 5px;
padding: 1px 8px;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: .64rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
.bp-vazio[b-nl6qfeq74h] { margin: 0; color: #94a3b8; font-size: .84rem; }
/* ── Cartões / tabela genéricos ─────────────────────────── */
.bp-card[b-nl6qfeq74h] {
padding: 16px 18px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #fff;
}
.bp-card h2[b-nl6qfeq74h] { margin: 0 0 10px; font-size: .95rem; font-weight: 900; color: #0f172a; }
.bp-postshead[b-nl6qfeq74h] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.bp-postshead h2[b-nl6qfeq74h] { margin: 0; }
.bp-tablewrap[b-nl6qfeq74h] { overflow-x: auto; max-height: 420px; overflow-y: auto; }
.bp-table[b-nl6qfeq74h] { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bp-table th[b-nl6qfeq74h] {
text-align: left;
padding: 8px 10px;
color: #64748b;
font-size: .7rem;
font-weight: 900;
text-transform: uppercase;
border-bottom: 2px solid #f1f5f9;
white-space: nowrap;
}
.bp-table td[b-nl6qfeq74h] { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.bp-pill[b-nl6qfeq74h] {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: .68rem;
font-weight: 900;
text-transform: uppercase;
color: #fff;
background: #94a3b8;
}
.bp-pill.status-gerado[b-nl6qfeq74h] { background: #3b82f6; }
.bp-pill.status-aprovado[b-nl6qfeq74h] { background: #16a34a; }
.bp-link[b-nl6qfeq74h] {
padding: 5px 10px;
border-radius: 8px;
background: #eef2ff;
color: #4338ca;
font-size: .72rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
/* ── Editor (modal) ─────────────────────────────────────── */
.bp-modalback[b-nl6qfeq74h] {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15, 23, 42, .55);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 12px;
overflow-y: auto;
}
.bp-modalbox[b-nl6qfeq74h] {
background: #f8fafc;
border-radius: 18px;
width: min(1240px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 16px;
box-shadow: 0 24px 64px rgba(2, 6, 23, .45);
}
.bp-modalhead[b-nl6qfeq74h] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 6px 12px;
font-size: 1.05rem;
color: #1e293b;
}
.bp-modalfechar[b-nl6qfeq74h] {
border: 0;
border-radius: 10px;
width: 34px;
height: 34px;
font-size: 1rem;
font-weight: 800;
color: #475569;
background: #e2e8f0;
cursor: pointer;
}
.bp-modalfechar:hover[b-nl6qfeq74h] { background: #fecaca; color: #991b1b; }
.bp-statusbar[b-nl6qfeq74h] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; font-size: .9rem; border-radius: 10px; }
.bp-statusbar.rascunho[b-nl6qfeq74h] { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.bp-statusbar.pub[b-nl6qfeq74h] { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.bp-statusbar button[b-nl6qfeq74h] { background: #16a34a; color: #fff; border: none; padding: .45rem .9rem; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bp-statusbar button:hover[b-nl6qfeq74h] { background: #15803d; }
.bp-editor[b-nl6qfeq74h] { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .bp-editor[b-nl6qfeq74h] { grid-template-columns: 1fr; } }
.bp-editor-main[b-nl6qfeq74h] { display: grid; gap: 16px; }
.bp-editor-side[b-nl6qfeq74h] { display: grid; gap: 12px; align-content: start; }
.bp-row[b-nl6qfeq74h] { margin-bottom: 12px; }
.bp-label[b-nl6qfeq74h] { display: block; font-size: .78rem; font-weight: 700; color: #374151; margin-bottom: 5px; }
.bp-label span[b-nl6qfeq74h] { font-weight: 400; color: #94a3b8; font-size: .73rem; margin-left: 4px; }
.bp-input[b-nl6qfeq74h], .bp-textarea[b-nl6qfeq74h], .bp-select[b-nl6qfeq74h] {
width: 100%;
padding: 9px 11px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: .875rem;
color: #1e293b;
background: #fff;
box-sizing: border-box;
}
.bp-input:focus[b-nl6qfeq74h], .bp-textarea:focus[b-nl6qfeq74h], .bp-select:focus[b-nl6qfeq74h] {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.bp-textarea[b-nl6qfeq74h] { resize: vertical; }
.bp-charcount[b-nl6qfeq74h] { font-size: .7rem; color: #94a3b8; text-align: right; margin-top: 3px; }
.bp-slugrow[b-nl6qfeq74h] { display: flex; gap: 6px; }
.bp-slugrow .bp-input[b-nl6qfeq74h] { flex: 1; }
.bp-btnslug[b-nl6qfeq74h] {
padding: 8px 10px;
font-size: .72rem;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #f8fafc;
color: #374151;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.bp-btnslug:hover[b-nl6qfeq74h] { background: #e0e7ff; border-color: #4f46e5; color: #4f46e5; }
.bp-editorcard[b-nl6qfeq74h] { padding: 0; }
.bp-editortitle[b-nl6qfeq74h] {
padding: 16px 20px 4px;
font-size: .75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
}
.bp-editorhint[b-nl6qfeq74h] { margin: 0 0 10px; padding: 0 20px; font-size: .75rem; color: #94a3b8; }
.bp-toolbar[b-nl6qfeq74h] {
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 8px 10px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.bp-toolbar button[b-nl6qfeq74h] {
background: #fff;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 4px 9px;
font-size: .78rem;
color: #374151;
font-weight: 700;
cursor: pointer;
}
.bp-toolbar button:hover[b-nl6qfeq74h] { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.bp-sep[b-nl6qfeq74h] { width: 1px; height: 22px; background: #e2e8f0; margin: 0 4px; }
#bpEditorContent[b-nl6qfeq74h] {
min-height: 400px;
padding: 18px 20px;
font-size: .95rem;
line-height: 1.7;
color: #1e293b;
outline: none;
}
#bpEditorContent:focus[b-nl6qfeq74h] { box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .15); }
#bpEditorContent h2[b-nl6qfeq74h] { font-size: 1.25rem; font-weight: 800; margin: 20px 0 10px; }
#bpEditorContent h3[b-nl6qfeq74h] { font-size: 1.05rem; font-weight: 700; margin: 18px 0 8px; }
#bpEditorContent h4[b-nl6qfeq74h] { font-size: .95rem; font-weight: 700; margin: 14px 0 6px; }
#bpEditorContent ul[b-nl6qfeq74h], #bpEditorContent ol[b-nl6qfeq74h] { padding-left: 24px; margin: 10px 0; }
#bpEditorContent blockquote[b-nl6qfeq74h] {
border-left: 4px solid #4f46e5;
margin: 14px 0;
padding: 10px 16px;
background: #f5f3ff;
color: #4338ca;
border-radius: 0 6px 6px 0;
font-style: italic;
}
.bp-editorfooter[b-nl6qfeq74h] {
background: #f8fafc;
border-top: 1px solid #e2e8f0;
padding: 8px 12px;
display: flex;
gap: 10px;
font-size: .72rem;
color: #94a3b8;
}
.bp-btnsalvar[b-nl6qfeq74h] {
width: 100%;
padding: 10px 20px;
border: 0;
border-radius: 6px;
font-size: .88rem;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #4f46e5, #4338ca);
cursor: pointer;
}
.bp-btnsalvar:disabled[b-nl6qfeq74h] { opacity: .6; }
.bp-toggle[b-nl6qfeq74h] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
font-size: .85rem;
color: #374151;
cursor: pointer;
}
.bp-toggle:last-child[b-nl6qfeq74h] { border-bottom: none; }
.bp-toggle span[b-nl6qfeq74h] { display: flex; flex-direction: column; gap: 1px; }
.bp-toggle small[b-nl6qfeq74h] { color: #94a3b8; font-size: .7rem; }
.bp-toggle input[b-nl6qfeq74h] { width: 18px; height: 18px; }
.bp-imgpreview[b-nl6qfeq74h] {
width: 100%;
height: 130px;
border-radius: 6px;
overflow: hidden;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
border: 1px dashed #d1d5db;
}
.bp-imgpreview img[b-nl6qfeq74h] { width: 100%; height: 100%; object-fit: cover; }
.bp-noimg[b-nl6qfeq74h] { color: #94a3b8; font-size: .8rem; }
.bp-hint[b-nl6qfeq74h] { font-size: .72rem; color: #64748b; margin: 4px 0 0; }
.bp-tempolinha[b-nl6qfeq74h] { display: flex; gap: 8px; }
.bp-tempolinha .bp-input[b-nl6qfeq74h] { flex: 1; }
/* Árvore de recortes BNCC (compartilhada: Simulado multi + Consultar BNCC única) */
.ar-arvore[b-ok9qtejj1d] {
max-height: 420px;
overflow-y: auto;
border: 1px solid var(--gp-borda, #ddceb0);
border-radius: 10px;
padding: .5rem .65rem;
background: #fff;
font-size: .9rem;
}
.ar-linha[b-ok9qtejj1d] {
display: flex;
align-items: center;
gap: .35rem;
padding: .18rem .2rem;
border-radius: 6px;
}
.ar-linha:hover[b-ok9qtejj1d] { background: #fffdf8; }
.ar-exp[b-ok9qtejj1d] {
border: 0;
background: transparent;
padding: 0;
width: 1.2rem;
color: #78695a;
cursor: pointer;
flex-shrink: 0;
}
.ar-exp.ar-folha[b-ok9qtejj1d] { cursor: default; }
.ar-check[b-ok9qtejj1d] {
width: .95rem;
height: .95rem;
accent-color: #b23a2e;
cursor: pointer;
flex-shrink: 0;
}
.ar-icone[b-ok9qtejj1d] {
width: 1.15rem;
height: 1.15rem;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
}
.ar-nome[b-ok9qtejj1d] { cursor: pointer; }
.ar-nome.on[b-ok9qtejj1d] { color: #b23a2e; font-weight: 600; }
.ar-serie > .ar-linha .ar-nome[b-ok9qtejj1d] { font-weight: 600; }
.ar-filhos[b-ok9qtejj1d] {
margin-left: 1.1rem;
border-left: 1px dashed #ddceb0;
padding-left: .45rem;
}
.ar-vazio[b-ok9qtejj1d] {
color: #78695a;
padding: .25rem .4rem;
display: flex;
align-items: center;
gap: .4rem;
}
.bt-busca[b-q0yvxsoxab] {
min-width: 0;
height: 42px;
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
/* metade da tela, responsivo (04/07): sobra espaço pra escola/WhatsApp/sino */
width: min(50vw, 520px);
justify-self: start;
align-items: center;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fffdf8;
overflow: hidden;
}
.bt-busca i[b-q0yvxsoxab] {
color: #b23a2e;
justify-self: center;
}
.bt-busca input[b-q0yvxsoxab] {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #2b2420;
font-size: .9rem;
font-weight: 650;
}
.bt-busca input[b-q0yvxsoxab]::placeholder {
color: #78695a;
font-weight: 650;
}
.bt-busca button[b-q0yvxsoxab] {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 6px;
color: #fff;
background: linear-gradient(135deg, #46618f 0%, #b23a2e 100%);
}
.bt-busca button i[b-q0yvxsoxab] { color: #fff; font-size: .95rem; }
@media (max-width: 900px) {
.bt-busca[b-q0yvxsoxab] { width: 100%; }
}
/* aba flutuante na lateral direita */
.fb-aba[b-p22mk38ctx] {
position: fixed;
right: 0;
top: 55%;
z-index: 45;
display: flex;
align-items: center;
gap: 7px;
padding: 10px 9px 10px 12px;
border: 0;
border-radius: 12px 0 0 12px;
background: linear-gradient(135deg, #46618f, #b23a2e);
color: #fff;
font-size: .78rem;
font-weight: 800;
writing-mode: vertical-rl;
box-shadow: -6px 8px 22px rgba(178, 58, 46, .3);
}
.fb-aba i[b-p22mk38ctx] { writing-mode: horizontal-tb; }
.fb-badge[b-p22mk38ctx] {
position: absolute;
top: -7px;
left: -7px;
min-width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 999px;
background: #b23a2e;
color: #fff;
font-size: .66rem;
font-weight: 900;
writing-mode: horizontal-tb;
box-shadow: 0 0 0 2px #fff;
}
.fb-overlay[b-p22mk38ctx] {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: center;
padding: 16px;
background: rgba(43, 36, 32, .55);
backdrop-filter: blur(3px);
}
.fb-card[b-p22mk38ctx] {
width: min(520px, 100%);
max-height: 88vh;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
padding-bottom: 16px;
border-radius: 18px;
background: #fff;
box-shadow: 0 30px 80px rgba(43, 36, 32, .35);
}
.fb-head[b-p22mk38ctx] {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
color: #fff;
background: linear-gradient(135deg, #46618f, #b23a2e);
}
.fb-head > i[b-p22mk38ctx] { font-size: 1.3rem; }
.fb-head div[b-p22mk38ctx] { flex: 1; display: grid; }
.fb-head strong[b-p22mk38ctx] { font-size: 1rem; }
.fb-head span[b-p22mk38ctx] { font-size: .76rem; opacity: .85; }
.fb-head button[b-p22mk38ctx] {
width: 32px;
height: 32px;
border: 0;
border-radius: 9px;
background: rgba(255, 255, 255, .18);
color: #fff;
}
.fb-msg[b-p22mk38ctx] { margin: 0 18px; padding: 9px 13px; border-radius: 10px; font-size: .84rem; font-weight: 700; }
.fb-msg.ok[b-p22mk38ctx] { background: #e5ecdc; color: #3e4c31; }
.fb-msg.err[b-p22mk38ctx] { background: #f6e3de; color: #8f2c22; }
.fb-tipos[b-p22mk38ctx] { display: flex; gap: 8px; padding: 0 18px; }
.fb-tipos button[b-p22mk38ctx] {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 6px;
border: 2px solid #ddceb0;
border-radius: 11px;
background: #fff;
color: #5b5148;
font-size: .8rem;
font-weight: 800;
transition: border-color .14s ease, color .14s ease;
}
.fb-tipos button.on[b-p22mk38ctx] { border-color: #b23a2e; color: #8f2c22; background: #fffdf8; }
.fb-card textarea[b-p22mk38ctx] {
margin: 0 18px;
padding: 10px 12px;
border: 2px solid #ddceb0;
border-radius: 11px;
font: inherit;
resize: vertical;
}
.fb-enviar[b-p22mk38ctx] {
margin: 0 18px;
padding: 11px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #46618f, #b23a2e);
color: #fff;
font-weight: 800;
}
.fb-enviar:disabled[b-p22mk38ctx] { opacity: .5; }
.fb-hist[b-p22mk38ctx] { display: grid; gap: 10px; padding: 4px 18px 0; }
.fb-hist-titulo[b-p22mk38ctx] {
color: #78695a;
font-size: .72rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.fb-item[b-p22mk38ctx] {
display: grid;
gap: 6px;
padding: 10px 12px;
border: 1px solid #f4ecdd;
border-radius: 12px;
background: #fffdf8;
}
.fb-item.nova[b-p22mk38ctx] { border-color: #ddceb0; background: #fffdf8; }
.fb-item-cab[b-p22mk38ctx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-item-cab em[b-p22mk38ctx] {
padding: 2px 9px;
border-radius: 999px;
font-size: .68rem;
font-style: normal;
font-weight: 900;
color: #fff;
}
.fb-item-cab em.t1[b-p22mk38ctx] { background: #46618f; }
.fb-item-cab em.t2[b-p22mk38ctx] { background: #b6892a; }
.fb-item-cab em.t3[b-p22mk38ctx] { background: #b23a2e; }
.fb-item-cab small[b-p22mk38ctx] { color: #78695a; font-size: .7rem; font-weight: 700; }
.fb-item p[b-p22mk38ctx] { margin: 0; color: #5b5148; font-size: .82rem; line-height: 1.45; }
.fb-resposta[b-p22mk38ctx] {
display: grid;
gap: 3px;
padding: 8px 11px;
border-radius: 9px;
background: #f6ecd3;
}
.fb-resposta strong[b-p22mk38ctx] { color: #8f2c22; font-size: .74rem; }
.fb-resposta span[b-p22mk38ctx] { color: #5b5148; font-size: .8rem; line-height: 1.4; }
.fb-lida[b-p22mk38ctx] {
justify-self: start;
padding: 5px 12px;
border: 0;
border-radius: 8px;
background: #b23a2e;
color: #fff;
font-size: .72rem;
font-weight: 800;
}
@media print {
.fb-aba[b-p22mk38ctx] { display: none; }
}
.gb-card[b-p05dkj58f2] {
min-width: 0;
padding: 14px 16px;
border: 1px solid #ddceb0;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(43, 36, 32, .05);
}
.gb-card h2[b-p05dkj58f2] {
margin: 0 0 8px;
color: #2b2420;
font-size: .92rem;
font-weight: 900;
}
.gb-vazio[b-p05dkj58f2] { margin: 0; color: #78695a; font-size: .84rem; }
.gb-legenda[b-p05dkj58f2] {
display: flex;
gap: 14px;
margin-bottom: 6px;
font-size: .74rem;
font-weight: 800;
}
.gb-legenda span[b-p05dkj58f2] { display: inline-flex; align-items: center; gap: 6px; color: #5b5148; }
.gb-legenda span[b-p05dkj58f2]::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.gb-legenda .s1[b-p05dkj58f2]::before { background: #46618f; }
.gb-legenda .s2[b-p05dkj58f2]::before { background: #b23a2e; }
.gb-scroll[b-p05dkj58f2] { overflow-x: auto; }
.ics-btn[b-7c6yzz7hgy] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 40px;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fff;
color: #b23a2e;
font-size: 1.05rem;
text-decoration: none;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ics-btn:hover[b-7c6yzz7hgy] {
transform: translateY(-1px);
border-color: #ddceb0;
box-shadow: 0 10px 18px rgba(178, 58, 46, .12);
color: #b23a2e;
}
.ics-badge[b-7c6yzz7hgy] {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: #b23a2e;
color: #fff;
font-size: .68rem;
font-weight: 800;
line-height: 18px;
text-align: center;
}
/* Marca d'água de rastreio — ver o comentário no .razor.
Regras que não podem mudar sem quebrar o propósito:
- pointer-events:none  → nunca atrapalha clicar/preencher o que está embaixo
- position:absolute    → o pai precisa ter position:relative (a folha tem)
- print-color-adjust   → sem isto o navegador "economiza tinta" e apaga a marca
justamente na impressão, que é onde ela mais importa */
.mdagua[b-vt810f1cjy] {
position: absolute;
inset: 0;
z-index: 0;   /* atrás do conteúdo: marca não pode competir com a leitura */
overflow: hidden;
pointer-events: none;
user-select: none;
}
/* ── camada 1: a marca da casa, grande, atravessando a folha ── */
.mdagua-marca[b-vt810f1cjy] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-28deg);
white-space: nowrap;
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(64px, 13vw, 168px);
font-weight: 700;
letter-spacing: -.02em;
color: rgba(178, 58, 46, .07);
}
/* ── camada 2: o rastreio, ladrilhado ── */
.mdagua-ladrilho[b-vt810f1cjy] {
position: absolute;
inset: -20%;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 40px 52px;
transform: rotate(-24deg);
}
.mdagua-ladrilho span[b-vt810f1cjy] {
flex: none;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(43, 36, 32, .055);
}
/* Na impressão a marca precisa SOBREVIVER: o navegador tende a descartar fundo e
clarear cinza pra poupar tinta. O print-color-adjust:exact impede isso, e os
tons sobem um pouco porque no papel some mais que na tela. */
@media print {
/* NÃO usar position:fixed aqui. Medido em 07/08: no print o fixed passa a valer
pela ALTURA DA JANELA (694px numa folha de 1080px), então a marca cobria só o
começo do documento — e no PDF gerado pelo Chrome simplesmente não saía.
O absolute do bloco acima acompanha a altura real da folha, que cresce com o
conteúdo, e por isso atravessa todas as páginas. */
.mdagua[b-vt810f1cjy] {
position: absolute;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Tons MAIS FORTES que na tela: no papel o cinza clarinho some, e uma marca que
não se lê não rastreia ninguém. */
.mdagua-marca[b-vt810f1cjy] {
color: rgba(178, 58, 46, .16);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.mdagua-ladrilho span[b-vt810f1cjy] {
color: rgba(43, 36, 32, .22);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.mt-card[b-uu0y26pfrq] {
min-width: 0;
padding: 14px 16px;
border: 1px solid #ddceb0;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(43, 36, 32, .05);
}
.mt-card h2[b-uu0y26pfrq] {
margin: 0 0 10px;
color: #2b2420;
font-size: .92rem;
font-weight: 900;
}
.mt-vazio[b-uu0y26pfrq] { margin: 0; color: #78695a; font-size: .84rem; }
.mt-scroll[b-uu0y26pfrq] { max-height: 340px; overflow: auto; }
.mt-card table[b-uu0y26pfrq] { width: 100%; border-collapse: collapse; font-size: .76rem; }
.mt-card th[b-uu0y26pfrq] {
position: sticky;
top: 0;
padding: 6px 8px;
background: #fffdf8;
color: #5b5148;
font-weight: 900;
text-align: left;
white-space: nowrap;
}
.mt-card td[b-uu0y26pfrq] {
padding: 5px 8px;
border-top: 1px solid #f4ecdd;
color: #5b5148;
white-space: nowrap;
}
/* Modal único de criar turma — mesmo visual do que estava embutido na Criar prova */
.mct-fundo[b-06b76zyq97] {
position: fixed;
inset: 0;
background: rgba(43, 36, 32, .5);
/* Acima do modal de salvar da CriarProva (z 90/91): o criar turma abre A PARTIR
dele e tem que ficar na frente — mesmo z-index deixava o de salvar (depois no
DOM) pintando por cima (fundador 29/07). */
z-index: 95;
}
.mct-modal[b-06b76zyq97] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 96;
width: min(440px, calc(100vw - 32px));
max-height: 85vh;
overflow-y: auto;
padding: 24px 26px;
background: #fff;
border-radius: 16px;
box-shadow: 0 30px 70px rgba(43, 36, 32, .3);
display: grid;
gap: 12px;
}
.mct-modal h3[b-06b76zyq97] {
margin: 0;
font-size: 1.1rem;
font-weight: 800;
color: #2b2420;
}
.mct-modal h3 i[b-06b76zyq97] { color: #b23a2e; margin-right: 6px; }
.mct-modal > p[b-06b76zyq97] {
margin: 0;
color: #78695a;
font-size: .87rem;
}
.mct-campo[b-06b76zyq97] {
display: grid;
gap: 5px;
}
.mct-campo span[b-06b76zyq97] {
color: #5b5148;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.mct-campo input[b-06b76zyq97],
.mct-campo select[b-06b76zyq97] {
padding: 10px 12px;
border: 1px solid #ddceb0;
border-radius: 10px;
font-size: .9rem;
}
.mct-campo select:disabled[b-06b76zyq97] { background: #f4ecdd; color: #78695a; }
.mct-aviso[b-06b76zyq97] {
color: #7a5a1a;
font-size: .78rem;
}
.mct-erro[b-06b76zyq97] {
padding: 9px 12px;
border-radius: 9px;
background: #f6e3de;
color: #8f2c22;
font-size: .85rem;
}
.mct-acoes[b-06b76zyq97] {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 4px;
}
.mct-btn[b-06b76zyq97] {
padding: 10px 18px;
border-radius: 10px;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
border: 0;
}
.mct-btn.primary[b-06b76zyq97] {
background: #b23a2e;
color: #fff;
}
.mct-btn.primary:disabled[b-06b76zyq97] { opacity: .6; cursor: not-allowed; }
.mct-btn.ghost[b-06b76zyq97] {
background: #fff;
border: 1px solid #ddceb0;
color: #5b5148;
}
.mct-btn.ghost:hover[b-06b76zyq97] { background: #fffdf8; }
/* Raio-X da prova — painel gráfico compartilhado (professor olha e sabe) */
.rxp-vazio[b-r6ky25gmtg] { color: #78695a; padding: .8rem; display: flex; gap: .45rem; align-items: center; }
.rxp-painel[b-r6ky25gmtg] { display: flex; flex-direction: column; gap: .8rem; }
/* ===== hero: gauge + métricas ===== */
.rxp-hero[b-r6ky25gmtg] {
display: grid;
grid-template-columns: auto 1fr;
gap: .8rem;
align-items: center;
border: 1px solid #f3ded9;
border-radius: 14px;
background: linear-gradient(135deg, #fffdf8 0%, #fffdf8 100%);
padding: .7rem .8rem;
}
.rxp-gauge[b-r6ky25gmtg] { position: relative; width: 108px; height: 108px; }
.rxp-gauge svg[b-r6ky25gmtg] { width: 100%; height: 100%; transform: rotate(-90deg); }
.rxp-gauge circle[b-r6ky25gmtg] { fill: none; stroke-width: 11; stroke-linecap: round; }
.rxp-gauge .trilha[b-r6ky25gmtg] { stroke: #f4ecdd; }
.rxp-gauge .valor.otimo[b-r6ky25gmtg] { stroke: #5f7350; }
.rxp-gauge .valor.bom[b-r6ky25gmtg] { stroke: #b6892a; }
.rxp-gauge .valor.fraco[b-r6ky25gmtg] { stroke: #b23a2e; }
.rxp-gauge-num[b-r6ky25gmtg] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.rxp-gauge-num strong[b-r6ky25gmtg] { font-size: 1.7rem; line-height: 1; color: #2b2420; }
.rxp-gauge-num span[b-r6ky25gmtg] { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #78695a; }
.rxp-hero-metricas[b-r6ky25gmtg] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .45rem;
}
.rxp-metrica[b-r6ky25gmtg] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .05rem;
background: #fff;
border: 1px solid #f3ded9;
border-radius: 10px;
padding: .4rem .55rem;
}
.rxp-metrica i[b-r6ky25gmtg] { color: #b23a2e; font-size: .95rem; }
.rxp-metrica strong[b-r6ky25gmtg] { font-size: 1.15rem; color: #2b2420; line-height: 1.1; }
.rxp-metrica strong small[b-r6ky25gmtg] { font-size: .68rem; color: #78695a; margin-left: 2px; }
.rxp-metrica span[b-r6ky25gmtg] { font-size: .7rem; color: #78695a; }
.rxp-estrelas[b-r6ky25gmtg] { color: #7a5a1a !important; letter-spacing: .08em; }
/* ===== blocos ===== */
.rxp-bloco[b-r6ky25gmtg] {
border: 1px solid #f4ecdd;
border-radius: 12px;
padding: .55rem .7rem;
background: #fff;
}
.rxp-bloco h4[b-r6ky25gmtg] {
margin: 0 0 .45rem;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #78695a;
display: flex;
align-items: center;
gap: .35rem;
}
.rxp-bloco h4 i[b-r6ky25gmtg] { color: #b23a2e; }
.rxp-duplo[b-r6ky25gmtg] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
/* barra empilhada */
.rxp-stack[b-r6ky25gmtg] {
display: flex;
height: .8rem;
border-radius: 999px;
overflow: hidden;
background: #f4ecdd;
}
.rxp-stack span[b-r6ky25gmtg] { display: block; height: 100%; transition: width .3s ease; }
.rxp-stack .f[b-r6ky25gmtg] { background: #5f7350; }
.rxp-stack .m[b-r6ky25gmtg] { background: #b6892a; }
.rxp-stack .d[b-r6ky25gmtg] { background: #b23a2e; }
.rxp-stack.tipos .obj[b-r6ky25gmtg] { background: #b23a2e; }
.rxp-stack.tipos .dis[b-r6ky25gmtg] { background: #c9b896; }
.rxp-stack.papeis .an[b-r6ky25gmtg] { background: #46618f; }
.rxp-stack.papeis .in[b-r6ky25gmtg] { background: #a89c8c; }
.rxp-stack.papeis .de[b-r6ky25gmtg] { background: #b6892a; }
.rxp-legenda[b-r6ky25gmtg] {
display: flex;
flex-wrap: wrap;
gap: .3rem .8rem;
margin-top: .35rem;
font-size: .78rem;
color: #5b5148;
}
.rxp-dot[b-r6ky25gmtg] { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .25rem; }
.rxp-dot.obj[b-r6ky25gmtg] { background: #b23a2e; }
.rxp-dot.dis[b-r6ky25gmtg] { background: #c9b896; }
.rxp-dot.an[b-r6ky25gmtg] { background: #46618f; }
.rxp-dot.in[b-r6ky25gmtg] { background: #a89c8c; }
.rxp-dot.de[b-r6ky25gmtg] { background: #b6892a; }
/* barras horizontais (Bloom / TRI) */
.rxp-hbar[b-r6ky25gmtg] {
display: grid;
grid-template-columns: 7rem 1fr 2.6rem;
gap: .45rem;
align-items: center;
margin-bottom: .3rem;
font-size: .8rem;
}
.rxp-hbar-rotulo[b-r6ky25gmtg] { color: #5b5148; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxp-hbar-trilha[b-r6ky25gmtg] {
height: .65rem;
background: #f4ecdd;
border-radius: 999px;
overflow: hidden;
}
.rxp-hbar-trilha i[b-r6ky25gmtg] { display: block; height: 100%; background: #b23a2e; border-radius: 999px; transition: width .3s ease; }
.rxp-hbar-trilha.tri .fraco[b-r6ky25gmtg] { background: #b23a2e; }
.rxp-hbar-trilha.tri .medio[b-r6ky25gmtg] { background: #b6892a; }
.rxp-hbar-trilha.tri .forte[b-r6ky25gmtg] { background: #5f7350; }
.rxp-hbar-trilha.tri .chute[b-r6ky25gmtg] { background: #a89c8c; }
.rxp-hbar em[b-r6ky25gmtg] { font-style: normal; font-weight: 700; color: #2b2420; text-align: right; }
.rxp-tri-selo[b-r6ky25gmtg] {
margin-top: .35rem;
font-size: .78rem;
border-radius: 8px;
padding: .3rem .5rem;
}
.rxp-tri-selo.ok[b-r6ky25gmtg] { background: #e5ecdc; color: #5f7350; }
.rxp-tri-selo.warn[b-r6ky25gmtg] { background: #f6ecd3; color: #7a5a1a; }
/* chips */
.rxp-chips[b-r6ky25gmtg] { display: flex; flex-wrap: wrap; gap: .35rem; }
.rxp-chip[b-r6ky25gmtg] {
background: #f4ecdd;
color: #5b5148;
border-radius: 999px;
padding: .2rem .6rem;
font-size: .76rem;
font-weight: 600;
}
.rxp-chip.ok[b-r6ky25gmtg] { background: #e5ecdc; color: #5f7350; }
.rxp-chip.warn[b-r6ky25gmtg] { background: #f6ecd3; color: #7a5a1a; }
.rxp-leitura[b-r6ky25gmtg] { font-size: .82rem; color: #5b5148; margin-bottom: .25rem; }
/* ===== desempenho real dos alunos (db/214) ===== */
.rxp-stack.real .cal[b-r6ky25gmtg] { background: #5f7350; }
.rxp-stack.real .dado[b-r6ky25gmtg] { background: #46618f; }
.rxp-dot.cal[b-r6ky25gmtg] { background: #5f7350; }
.rxp-dot.dado[b-r6ky25gmtg] { background: #46618f; }
.rxp-dot.semdado[b-r6ky25gmtg] { background: #ddceb0; }
.rxp-hbar-trilha.real i[b-r6ky25gmtg] { background: linear-gradient(90deg, #46618f, #5f7350); }
.rxp-stack.real + .rxp-legenda + .rxp-hbar[b-r6ky25gmtg] { margin-top: .5rem; }
@media (max-width: 680px) {
.rxp-duplo[b-r6ky25gmtg] { grid-template-columns: 1fr; }
.rxp-hero[b-r6ky25gmtg] { grid-template-columns: 1fr; justify-items: center; }
}
/* Raio-X completo da questão — modal compartilhado */
.rxm-overlay[b-fyke66hwag] {
position: fixed;
inset: 0;
background: rgba(23, 25, 48, .55);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.rxm-modal[b-fyke66hwag] {
background: #fff;
border-radius: 14px;
width: min(760px, 96vw);
max-height: 88vh;
overflow-y: auto;
padding: 1.1rem 1.25rem;
box-shadow: 0 18px 48px rgba(23, 25, 48, .3);
}
.rxm-head[b-fyke66hwag] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: .7rem;
}
.rxm-head h2[b-fyke66hwag] { font-size: 1.15rem; margin: .1rem 0 0; }
.rxm-eyebrow[b-fyke66hwag] {
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #b23a2e;
font-weight: 700;
}
.rxm-fechar[b-fyke66hwag] { border: 0; background: transparent; color: #78695a; cursor: pointer; }
.rxm-vazio[b-fyke66hwag] { color: #78695a; padding: 1rem 0; }
.rxm-enunciado[b-fyke66hwag] { font-size: .95rem; margin-bottom: .5rem; white-space: pre-wrap; }
.rxm-imagem[b-fyke66hwag] {
display: block;
max-width: 100%;
max-height: 320px;
margin: .4rem auto .6rem;
border-radius: 8px;
object-fit: contain;
}
.rxm-badges[b-fyke66hwag] { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.rxm-tag[b-fyke66hwag] {
background: #f6ecd3;
color: #8f2c22;
border-radius: 999px;
padding: .15rem .6rem;
font-size: .76rem;
font-weight: 600;
}
.rxm-grid[b-fyke66hwag] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: .45rem;
margin-bottom: .7rem;
}
.rxm-item[b-fyke66hwag] {
border: 1px solid #ddceb0;
border-radius: 8px;
padding: .4rem .55rem;
display: flex;
flex-direction: column;
gap: .12rem;
}
.rxm-item span[b-fyke66hwag] { font-size: .72rem; color: #78695a; }
.rxm-item strong[b-fyke66hwag] { font-size: .86rem; color: #2b2420; }
.rxm-bloco[b-fyke66hwag] { margin-bottom: .65rem; }
.rxm-bloco > span[b-fyke66hwag] {
display: block;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #78695a;
margin-bottom: .25rem;
font-weight: 700;
}
.rxm-bloco p[b-fyke66hwag] { margin: 0; font-size: .88rem; }
.rxm-alt[b-fyke66hwag] {
border: 1px solid #ddceb0;
border-radius: 8px;
padding: .45rem .6rem;
margin-bottom: .3rem;
font-size: .87rem;
}
.rxm-alt.correta[b-fyke66hwag] { border-color: #5f7350; background: #e5ecdc; }
.rxm-alt.correta i[b-fyke66hwag] { color: #5f7350; margin-right: .3rem; }
.rxm-alt small[b-fyke66hwag] { display: block; color: #78695a; margin-top: .2rem; }
/* Reportar erro na questão */
.rxm-denuncia[b-fyke66hwag] { border-top: 1px dashed #ddceb0; padding-top: .6rem; margin-top: .5rem; }
.rxm-denuncia-btn[b-fyke66hwag] {
border: 1px solid #f6e3de;
background: #f6e3de;
color: #b23a2e;
border-radius: 8px;
padding: .3rem .7rem;
font-size: .82rem;
cursor: pointer;
}
.rxm-denuncia-btn:hover[b-fyke66hwag] { background: #f6e3de; }
.rxm-denuncia-cancela[b-fyke66hwag] { border: 0; background: transparent; color: #78695a; cursor: pointer; font-size: .82rem; }
.rxm-denuncia-form[b-fyke66hwag] { display: flex; flex-direction: column; gap: .4rem; }
.rxm-denuncia-form select[b-fyke66hwag], .rxm-denuncia-form textarea[b-fyke66hwag] {
border: 1px solid #ddceb0;
border-radius: 8px;
padding: .35rem .5rem;
font-size: .85rem;
}
.rxm-denuncia-acoes[b-fyke66hwag] { display: flex; gap: .5rem; align-items: center; }
.rxm-denuncia-ok[b-fyke66hwag] { color: #5f7350; font-size: .87rem; }
/* Status da denúncia do próprio professor */
.rxm-denuncia-status[b-fyke66hwag] {
border: 1px solid #ddceb0;
border-radius: 8px;
padding: .5rem .65rem;
font-size: .85rem;
display: flex;
flex-direction: column;
gap: .25rem;
background: #fffdf8;
}
.rxm-denuncia-status.corrigida[b-fyke66hwag] { border-color: #5f7350; background: #e5ecdc; }
.rxm-denuncia-status.corrigida i[b-fyke66hwag] { color: #5f7350; }
.rxm-denuncia-status.aberta i[b-fyke66hwag] { color: #7a5a1a; }
.rxm-denuncia-status small[b-fyke66hwag] { color: #78695a; }
.rxm-denuncia-status .rxm-denuncia-cancela[b-fyke66hwag] { align-self: flex-start; padding: 0; }
/* ===== faixa gráfica (04/07): olhar e saber ===== */
.rxm-viz[b-fyke66hwag] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
gap: .45rem;
margin-bottom: .7rem;
}
.rxm-viz-card[b-fyke66hwag] {
border: 1px solid #f3ded9;
border-radius: 10px;
background: #fffdf8;
padding: .45rem .35rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
text-align: center;
}
.rxm-viz-card strong[b-fyke66hwag] { font-size: 1.05rem; color: #2b2420; line-height: 1.1; }
.rxm-viz-card strong em[b-fyke66hwag] { font-style: normal; font-size: .7rem; color: #78695a; }
.rxm-viz-card small[b-fyke66hwag] { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #78695a; }
.rxm-viz-icone[b-fyke66hwag] { font-size: 1.15rem; color: #b23a2e; }
.rxm-viz-txt[b-fyke66hwag] { font-size: .85rem !important; }
.rxm-star[b-fyke66hwag] { color: #7a5a1a; font-size: .8rem; letter-spacing: .06em; }
.rxm-nivel[b-fyke66hwag] { display: flex; gap: .2rem; }
.rxm-nivel i[b-fyke66hwag] {
width: .9rem;
height: .45rem;
border-radius: 999px;
background: #f4ecdd;
}
.rxm-nivel i.on.f[b-fyke66hwag] { background: #5f7350; }
.rxm-nivel i.on.m[b-fyke66hwag] { background: #b6892a; }
.rxm-nivel i.on.d[b-fyke66hwag] { background: #b23a2e; }
.rxm-disc[b-fyke66hwag] { font-size: 1.05rem; color: #78695a; }
.rxm-disc.ok[b-fyke66hwag] { color: #5f7350; }
.rxm-disc.warn[b-fyke66hwag] { color: #7a5a1a; }
/* ===== gráficos ampliados (07/07) ===== */
/* Anel de score (0-5) sem style inline: uma classe por valor (conic-gradient). */
.rxm-gauge[b-fyke66hwag] {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
background: conic-gradient(#ddceb0 0deg, #ddceb0 0deg, #f6ecd3 0deg);
}
.rxm-gauge span[b-fyke66hwag] { font-size: .95rem; font-weight: 800; color: #2b2420; line-height: 1;
background: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.rxm-gauge span em[b-fyke66hwag] { font-style: normal; font-size: .6rem; color: #78695a; }
/* qualidade = roxo */
.rxm-gauge.g0[b-fyke66hwag] { background: conic-gradient(#f6ecd3 0deg 360deg); }
.rxm-gauge.g1[b-fyke66hwag] { background: conic-gradient(#b23a2e 0deg 72deg, #f6ecd3 72deg 360deg); }
.rxm-gauge.g2[b-fyke66hwag] { background: conic-gradient(#b23a2e 0deg 144deg, #f6ecd3 144deg 360deg); }
.rxm-gauge.g3[b-fyke66hwag] { background: conic-gradient(#b23a2e 0deg 216deg, #f6ecd3 216deg 360deg); }
.rxm-gauge.g4[b-fyke66hwag] { background: conic-gradient(#b23a2e 0deg 288deg, #f6ecd3 288deg 360deg); }
.rxm-gauge.g5[b-fyke66hwag] { background: conic-gradient(#b23a2e 0deg 360deg); }
/* clareza = verde-água (sobrepõe as regras g* acima) */
.rxm-gauge.gc.g1[b-fyke66hwag] { background: conic-gradient(#5f7350 0deg 72deg, #e5ecdc 72deg 360deg); }
.rxm-gauge.gc.g2[b-fyke66hwag] { background: conic-gradient(#5f7350 0deg 144deg, #e5ecdc 144deg 360deg); }
.rxm-gauge.gc.g3[b-fyke66hwag] { background: conic-gradient(#5f7350 0deg 216deg, #e5ecdc 216deg 360deg); }
.rxm-gauge.gc.g4[b-fyke66hwag] { background: conic-gradient(#5f7350 0deg 288deg, #e5ecdc 288deg 360deg); }
.rxm-gauge.gc.g5[b-fyke66hwag] { background: conic-gradient(#5f7350 0deg 360deg); }
.rxm-gauge.gc.g0[b-fyke66hwag] { background: conic-gradient(#e5ecdc 0deg 360deg); }
/* Escada de Bloom */
.rxm-bloom[b-fyke66hwag] { display: flex; gap: .25rem; flex-wrap: wrap; }
.rxm-bloom-step[b-fyke66hwag] {
flex: 1; min-width: 68px; border: 1px solid #ddceb0; border-radius: 8px;
padding: .3rem .2rem; text-align: center; background: #fffdf8; color: #78695a;
display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.rxm-bloom-step b[b-fyke66hwag] { font-size: .8rem; }
.rxm-bloom-step span[b-fyke66hwag] { font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; }
.rxm-bloom-step.past[b-fyke66hwag] { background: #fdf8ee; color: #c9b896; border-color: #e8dcc0; }
.rxm-bloom-step.on[b-fyke66hwag] { background: #b23a2e; color: #fff; border-color: #b23a2e; box-shadow: 0 3px 10px rgba(91,91,214,.3); }
.rxm-bloom-step.on span[b-fyke66hwag] { color: #fff; }
/* Barras qualitativas */
.rxm-bars[b-fyke66hwag] { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; margin-bottom: .7rem; }
.rxm-bar-top[b-fyke66hwag] { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; margin-bottom: .18rem; }
.rxm-bar-top span[b-fyke66hwag] { font-size: .72rem; color: #78695a; }
.rxm-bar-top em[b-fyke66hwag] { font-style: normal; font-size: .78rem; font-weight: 700; color: #2b2420; }
.rxm-bar-track[b-fyke66hwag] { height: .5rem; border-radius: 999px; background: #f6ecd3; overflow: hidden; }
.rxm-bar-track i[b-fyke66hwag] { display: block; height: 100%; border-radius: 999px; }
.rxm-bar-track i.lvl0[b-fyke66hwag] { width: 0; }
.rxm-bar-track i.lvl1[b-fyke66hwag] { width: 33%; background: #5f7350; }
.rxm-bar-track i.lvl2[b-fyke66hwag] { width: 66%; background: #b6892a; }
.rxm-bar-track i.lvl3[b-fyke66hwag] { width: 100%; background: #b23a2e; }
/* Pílulas de flag on/off */
.rxm-flags[b-fyke66hwag] { display: flex; flex-wrap: wrap; gap: .35rem; }
.rxm-flag[b-fyke66hwag] {
display: inline-flex; align-items: center; gap: .3rem;
border-radius: 999px; padding: .2rem .6rem; font-size: .76rem; font-weight: 600;
border: 1px solid #ddceb0;
}
.rxm-flag i[b-fyke66hwag] { font-size: .82rem; }
.rxm-flag.on[b-fyke66hwag] { background: #e5ecdc; color: #5f7350; border-color: #c9dcb9; }
.rxm-flag.off[b-fyke66hwag] { background: #fffdf8; color: #c9b896; border-color: #f4ecdd; }
/* Rótulo de seção */
.rxm-sec-label[b-fyke66hwag] {
font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
color: #78695a; font-weight: 700; margin: .1rem 0 .35rem;
}
.rxm-tag-forte[b-fyke66hwag] { background: #b23a2e; color: #fff; }
.rxm-item-erro[b-fyke66hwag] { border-color: #f6e3de; background: #f6e3de; }
.rxm-item-erro strong[b-fyke66hwag] { color: #b23a2e; }
.rxm-diss-exp[b-fyke66hwag] { color: #78695a; font-size: .84rem; margin-top: .25rem; }
/* ===== desempenho real dos alunos (db/214) ===== */
.rxm-real[b-fyke66hwag] {
border: 1px solid #e7edf6;
border-radius: 12px;
background: linear-gradient(135deg, #fffdf8 0%, #e5ecdc 100%);
padding: .6rem .75rem;
margin-bottom: .7rem;
}
.rxm-real-head[b-fyke66hwag] { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rxm-real-titulo[b-fyke66hwag] {
font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
color: #46618f; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem;
}
.rxm-real-n[b-fyke66hwag] { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; }
.rxm-real-n.ok[b-fyke66hwag] { background: #e5ecdc; color: #5f7350; }
.rxm-real-n.warn[b-fyke66hwag] { background: #f6ecd3; color: #7a5a1a; }
.rxm-real-corpo[b-fyke66hwag] { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.rxm-real-gauge[b-fyke66hwag] { position: relative; width: 84px; height: 84px; }
.rxm-real-gauge svg[b-fyke66hwag] { width: 100%; height: 100%; transform: rotate(-90deg); }
.rxm-real-gauge circle[b-fyke66hwag] { fill: none; stroke-width: 9; stroke-linecap: round; }
.rxm-real-gauge .trilha[b-fyke66hwag] { stroke: #e7edf6; }
.rxm-real-gauge .valor.otimo[b-fyke66hwag] { stroke: #5f7350; }
.rxm-real-gauge .valor.bom[b-fyke66hwag] { stroke: #b6892a; }
.rxm-real-gauge .valor.fraco[b-fyke66hwag] { stroke: #b23a2e; }
.rxm-real-gauge-num[b-fyke66hwag] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rxm-real-gauge-num strong[b-fyke66hwag] { font-size: 1.05rem; line-height: 1; color: #2b2420; }
.rxm-real-gauge-num span[b-fyke66hwag] { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: #78695a; }
.rxm-real-alt[b-fyke66hwag] { display: grid; grid-template-columns: 1.4rem 1fr 2.4rem; gap: .4rem; align-items: center; margin-bottom: .25rem; font-size: .78rem; }
.rxm-real-alt b[b-fyke66hwag] {
width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
background: #f6ecd3; color: #5b5148; font-size: .72rem;
}
.rxm-real-alt b.certa[b-fyke66hwag] { background: #5f7350; color: #fff; }
.rxm-real-alt .trilha[b-fyke66hwag] { height: .55rem; background: #e7edf6; border-radius: 999px; overflow: hidden; }
.rxm-real-alt .trilha i[b-fyke66hwag] { display: block; height: 100%; border-radius: 999px; background: #a89c8c; transition: width .3s ease; }
.rxm-real-alt .trilha i.certa[b-fyke66hwag] { background: #5f7350; }
.rxm-real-alt em[b-fyke66hwag] { font-style: normal; font-weight: 700; color: #2b2420; text-align: right; }
.rxm-real-chips[b-fyke66hwag] { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.rxm-real-chip[b-fyke66hwag] {
display: inline-flex; align-items: center; gap: .3rem;
background: #fff; border: 1px solid #e7edf6; border-radius: 999px;
padding: .2rem .6rem; font-size: .74rem; font-weight: 600; color: #5b5148;
}
.rxm-real-chip.ok[b-fyke66hwag] { background: #e5ecdc; color: #5f7350; border-color: #c9dcb9; }
.rxm-real-chip.warn[b-fyke66hwag] { background: #f6ecd3; color: #7a5a1a; border-color: #ead9ae; }
.rxm-real-chip.tri[b-fyke66hwag] { background: #f6ecd3; color: #8f2c22; border-color: #e8dcc0; }
.rxm-real-chip.muted[b-fyke66hwag] { color: #78695a; }
@media (max-width: 560px) {
.rxm-real-corpo[b-fyke66hwag] { grid-template-columns: 1fr; justify-items: center; }
.rxm-real-alts[b-fyke66hwag] { width: 100%; }
}
/* ===== Seletor de aluno com avatar (typeahead) ===== */
.sa-wrap[b-9sq9ckblav] { position: relative; }
.sa-campo[b-9sq9ckblav] {
display: flex;
align-items: center;
gap: 9px;
min-height: 46px;
padding: 5px 11px;
border: 2px solid #ddceb0;
border-radius: 11px;
background: #fff;
cursor: text;
transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-wrap.is-open .sa-campo[b-9sq9ckblav] {
border-color: #b23a2e;
box-shadow: 0 0 0 4px rgba(178, 58, 46, .12);
}
.sa-lupa[b-9sq9ckblav] { color: #78695a; }
.sa-campo input[b-9sq9ckblav] {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
color: #2b2420;
}
.sa-nome[b-9sq9ckblav] { flex: 1; min-width: 0; color: #2b2420; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-limpar[b-9sq9ckblav] {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: #f4ecdd;
color: #78695a;
font-size: .7rem;
}
.sa-avatar[b-9sq9ckblav] {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
overflow: hidden;
color: #fff;
font-size: .72rem;
font-weight: 900;
}
.sa-avatar img[b-9sq9ckblav] { width: 100%; height: 100%; object-fit: cover; }
/* Captura cliques fora pra fechar a lista (sem JS). Fica abaixo da lista (z 30). */
.sa-backdrop[b-9sq9ckblav] {
position: fixed;
inset: 0;
z-index: 29;
background: transparent;
}
.sa-lista[b-9sq9ckblav] {
position: absolute;
inset: calc(100% + 6px) 0 auto 0;
z-index: 30;
max-height: 320px;
overflow-y: auto;
padding: 6px;
border: 1px solid #ddceb0;
border-radius: 13px;
background: #fff;
box-shadow: 0 20px 50px rgba(43, 36, 32, .18);
animation: saDescer-b-9sq9ckblav .16s ease backwards;
}
@keyframes saDescer-b-9sq9ckblav {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.sa-item[b-9sq9ckblav] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 10px;
background: transparent;
text-align: left;
transition: background-color .12s ease;
}
.sa-item:hover[b-9sq9ckblav] { background: #fdf8ee; }
.sa-item-textos[b-9sq9ckblav] { display: grid; min-width: 0; }
.sa-item-textos strong[b-9sq9ckblav] { color: #2b2420; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-item-textos small[b-9sq9ckblav] { color: #78695a; font-size: .74rem; font-weight: 700; }
.sa-vazio[b-9sq9ckblav] { padding: 12px; color: #78695a; font-size: .85rem; text-align: center; }
/* ===== Combo com miniatura (Série/Matéria/Unidade/Assunto) ===== */
.se-wrap[b-01njizyh8t] { position: relative; }
.se-campo[b-01njizyh8t] {
display: flex;
align-items: center;
gap: 9px;
min-height: 46px;
padding: 5px 11px;
border: 2px solid #ddceb0;
border-radius: 11px;
background: #fff;
cursor: text;
transition: border-color .15s ease, box-shadow .15s ease;
}
.se-wrap.is-open .se-campo[b-01njizyh8t] {
border-color: #b23a2e;
box-shadow: 0 0 0 4px rgba(178, 58, 46, .12);
}
.se-lupa[b-01njizyh8t] { color: #78695a; }
.se-campo input[b-01njizyh8t] {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
color: #2b2420;
}
.se-nome[b-01njizyh8t] {
flex: 1;
min-width: 0;
color: #2b2420;
font-weight: 750;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.se-limpar[b-01njizyh8t] {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: #f4ecdd;
color: #78695a;
font-size: .7rem;
}
/* miniatura: mostra a imagem; se não carregar (.sem-img), cai no ícone */
.se-thumb[b-01njizyh8t] {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(135deg, #f6ecd3, #fdf8ee);
color: #b23a2e;
font-size: .8rem;
}
.se-thumb img[b-01njizyh8t] { width: 100%; height: 100%; object-fit: cover; }
.se-thumb i[b-01njizyh8t] { display: none; }
.se-thumb.sem-img img[b-01njizyh8t] { display: none; }
.se-thumb.sem-img i[b-01njizyh8t] { display: block; }
.se-thumb:not(:has(img)) i[b-01njizyh8t] { display: block; }
.se-lista[b-01njizyh8t] {
position: absolute;
inset: calc(100% + 6px) 0 auto 0;
z-index: 30;
max-height: 320px;
overflow-y: auto;
padding: 6px;
border: 1px solid #ddceb0;
border-radius: 13px;
background: #fff;
box-shadow: 0 20px 50px rgba(43, 36, 32, .18);
animation: seDescer-b-01njizyh8t .16s ease backwards;
}
@keyframes seDescer-b-01njizyh8t {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.se-item[b-01njizyh8t] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 10px;
background: transparent;
text-align: left;
transition: background-color .12s ease;
}
.se-item:hover[b-01njizyh8t] { background: #fdf8ee; }
.se-item-nome[b-01njizyh8t] {
min-width: 0;
color: #2b2420;
font-size: .88rem;
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.se-vazio[b-01njizyh8t] { padding: 12px; color: #78695a; font-size: .85rem; text-align: center; }
.sn-wrap[b-bida5gleb5] { position: relative; }
.sn-btn[b-bida5gleb5] {
position: relative;
width: 42px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fff;
color: #b23a2e;
font-size: 1.05rem;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sn-btn:hover[b-bida5gleb5] {
transform: translateY(-1px);
border-color: #ddceb0;
box-shadow: 0 10px 18px rgba(178, 58, 46, .12);
}
.sn-btn.is-on[b-bida5gleb5] { border-color: #b23a2e; color: #b23a2e; }
.sn-ponto[b-bida5gleb5] {
position: absolute;
top: 8px;
right: 9px;
width: 9px;
height: 9px;
border-radius: 50%;
background: linear-gradient(135deg, #46618f, #b23a2e);
box-shadow: 0 0 0 2px #fff;
}
.sn-painel[b-bida5gleb5] {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 40;
width: min(360px, 88vw);
max-height: 70vh;
overflow-y: auto;
border: 1px solid #ddceb0;
border-radius: 15px;
background: #fff;
box-shadow: 0 24px 60px rgba(43, 36, 32, .22);
}
.sn-cab[b-bida5gleb5] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
color: #fff;
background: linear-gradient(135deg, #46618f, #b23a2e);
}
.sn-cab strong[b-bida5gleb5] { font-size: .95rem; }
.sn-cab span[b-bida5gleb5] { font-size: .72rem; opacity: .85; }
.sn-aviso[b-bida5gleb5] {
display: flex;
gap: 11px;
padding: 13px 16px;
border-bottom: 1px solid #f4ecdd;
}
.sn-aviso:last-child[b-bida5gleb5] { border-bottom: 0; }
.sn-aviso i[b-bida5gleb5] {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
font-size: .95rem;
background: linear-gradient(135deg, #46618f, #b23a2e);
}
.sn-aviso.curiosidade i[b-bida5gleb5] { background: linear-gradient(135deg, #46618f, #b23a2e); }
.sn-aviso.dica i[b-bida5gleb5] { background: #b23a2e; }
.sn-aviso div[b-bida5gleb5] { display: grid; gap: 3px; min-width: 0; }
.sn-aviso strong[b-bida5gleb5] { color: #2b2420; font-size: .85rem; }
.sn-aviso span[b-bida5gleb5] { color: #5b5148; font-size: .82rem; line-height: 1.45; }
.sn-aviso small[b-bida5gleb5] { color: #78695a; font-size: .72rem; font-weight: 700; }
.sn-vazio[b-bida5gleb5] { padding: 18px; color: #78695a; font-size: .85rem; text-align: center; }
/* Gêmeo do SinoFraude, em índigo: comentário pendente é tarefa, não incidente —
vermelho fica reservado pro alerta de fraude, senão a topbar vira semáforo. */
.sc-alerta[b-kgnprmuvlk] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid #ddceb0;
background: #f6ecd3;
color: #b23a2e;
text-decoration: none;
transition: background-color .15s ease, transform .15s ease;
}
.sc-alerta:hover[b-kgnprmuvlk] {
background: #f6ecd3;
transform: translateY(-1px);
}
.sc-alerta i[b-kgnprmuvlk] { font-size: 17px; }
.sc-badge[b-kgnprmuvlk] {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #b23a2e;
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
.sf-alerta[b-u80jcfnc9n] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid #f6e3de;
background: #f6e3de;
color: #b23a2e;
text-decoration: none;
transition: background-color .15s ease, transform .15s ease;
}
.sf-alerta:hover[b-u80jcfnc9n] {
background: #f6e3de;
transform: translateY(-1px);
}
.sf-alerta i[b-u80jcfnc9n] { font-size: 17px; }
.sf-badge[b-u80jcfnc9n] {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #b23a2e;
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
/* Sininho de push — pill em evidência enquanto não ativado */
.sp-wrap[b-w2hi709f3k] {
position: relative;
display: flex;
align-items: center;
}
.sp-pill[b-w2hi709f3k] {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 0;
cursor: pointer;
padding: .38rem .8rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
color: #fff;
background: #b23a2e;
box-shadow: 0 2px 8px rgba(178, 58, 46, .35);
animation: sp-pulsa-b-w2hi709f3k 2.4s ease-in-out infinite;
white-space: nowrap;
}
.sp-pill:hover[b-w2hi709f3k] {
filter: brightness(1.08);
}
@keyframes sp-pulsa-b-w2hi709f3k {
0%, 100% { box-shadow: 0 2px 8px rgba(178, 58, 46, .35); }
50% { box-shadow: 0 2px 16px rgba(178, 58, 46, .65); }
}
.sp-btn[b-w2hi709f3k] {
border: 0;
cursor: pointer;
background: transparent;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.sp-on[b-w2hi709f3k] {
color: #b23a2e;
background: rgba(178, 58, 46, .12);
}
.sp-off[b-w2hi709f3k] {
color: #78695a;
}
.sp-ajuda[b-w2hi709f3k] {
position: absolute;
top: calc(100% + .5rem);
right: 0;
z-index: 60;
width: 260px;
background: #fff;
border: 1px solid #ddceb0;
border-radius: .75rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
padding: .8rem .9rem;
font-size: .8rem;
color: #5b5148;
}
.sp-ajuda button[b-w2hi709f3k] {
display: block;
margin-top: .5rem;
border: 0;
background: #b23a2e;
color: #fff;
border-radius: .5rem;
padding: .3rem .8rem;
cursor: pointer;
font-size: .78rem;
}
/* No celular a pill vira só o sino pra não estourar a topbar */
@media (max-width: 720px) {
.sp-pill span[b-w2hi709f3k] {
display: none;
}
.sp-pill[b-w2hi709f3k] {
padding: .38rem .55rem;
}
}
.sw-whats[b-yg98m5yuk3] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid #c9dcb9;
background: #e5ecdc;
color: #3e4c31;
text-decoration: none;
transition: background-color .15s ease, transform .15s ease;
}
.sw-whats:hover[b-yg98m5yuk3] {
background: #e5ecdc;
transform: translateY(-1px);
}
.sw-whats i[b-yg98m5yuk3] { font-size: 17px; }
/* com mensagem não lida o ícone acende */
.sw-whats.tem-msg[b-yg98m5yuk3] {
border-color: #25d366;
background: #e5ecdc;
}
.sw-badge[b-yg98m5yuk3] {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #b23a2e;
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
.tnps-card[b-vsur7hcrdv] {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 9000;
width: 300px;
max-width: calc(100vw - 32px);
border-radius: 16px;
padding: 3px;
background: linear-gradient(135deg, #b6892a, #b23a2e, #b23a2e, #46618f);
box-shadow: 0 24px 60px rgba(178, 58, 46, .35), 0 4px 14px rgba(43, 36, 32, .18);
animation: tnps-entrar-b-vsur7hcrdv .35s ease-out;
}
.tnps-inner[b-vsur7hcrdv] {
background: #fff;
border-radius: 13px;
padding: 14px 16px 16px;
}
@keyframes tnps-entrar-b-vsur7hcrdv {
from { transform: translateY(24px) scale(.96); opacity: 0; }
to   { transform: translateY(0) scale(1); opacity: 1; }
}
.tnps-faixa[b-vsur7hcrdv] {
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(120deg, #b6892a, #b23a2e);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .02em;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
.tnps-titulo[b-vsur7hcrdv] {
margin: 0 0 3px;
font-size: 14.5px;
font-weight: 800;
color: #2b2420;
}
.tnps-sub[b-vsur7hcrdv] {
margin: 0 0 9px;
font-size: 11.5px;
color: #78695a;
}
.tnps-notas[b-vsur7hcrdv] {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 3px;
margin-bottom: 4px;
}
.tnps-notas button[b-vsur7hcrdv] {
height: 24px;
border: 1px solid #ddceb0;
border-radius: 6px;
background: #fff;
font-size: 10.5px;
font-weight: 700;
color: #5b5148;
cursor: pointer;
padding: 0;
}
.tnps-notas button:hover[b-vsur7hcrdv] { border-color: #b23a2e; color: #b23a2e; }
.tnps-notas button.on[b-vsur7hcrdv] {
background: linear-gradient(120deg, #b6892a, #b23a2e, #b23a2e);
border-color: transparent;
color: #fff;
font-weight: 800;
box-shadow: 0 4px 10px rgba(236, 72, 153, .4);
}
.tnps-legenda[b-vsur7hcrdv] {
display: flex;
justify-content: space-between;
font-size: 9.5px;
color: #78695a;
margin-bottom: 10px;
}
.tnps-inner textarea[b-vsur7hcrdv] {
display: block;
width: 100%;
height: 46px;
margin-bottom: 10px;
resize: none;
border: 1.5px solid #ddceb0;
border-radius: 8px;
padding: 8px 10px;
font-size: 12.5px;
font-family: inherit;
box-sizing: border-box;
overflow: hidden;
}
.tnps-inner textarea:focus[b-vsur7hcrdv] {
outline: none;
border-color: #b23a2e;
}
.tnps-enviar[b-vsur7hcrdv] {
display: block;
width: 100%;
border: 0;
border-radius: 8px;
padding: 9px;
background: linear-gradient(120deg, #b6892a, #b23a2e, #b23a2e);
color: #fff;
font-weight: 800;
font-size: 13px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(236, 72, 153, .35);
}
.tnps-enviar:disabled[b-vsur7hcrdv] { opacity: .6; cursor: default; }
@media (max-width: 480px) {
.tnps-card[b-vsur7hcrdv] { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}
/* Trocar de escola — topbar */
.te-wrap[b-7a07954nuv] { position: relative; }
/* Topbar do app é CLARA — cores escuras pros ícones aparecerem (04/07). */
.te-btn[b-7a07954nuv] {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 1px solid #ddceb0;
background: #fffdf8;
color: #2b2420;
border-radius: 999px;
padding: .3rem .75rem;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
max-width: 220px;
}
.te-btn i[b-7a07954nuv] { color: #b23a2e; }
.te-btn:hover[b-7a07954nuv], .te-btn.on[b-7a07954nuv] { background: #f6ecd3; border-color: #ddceb0; }
.te-nome[b-7a07954nuv] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-seta[b-7a07954nuv] { font-size: .7rem; opacity: .8; }
.te-menu[b-7a07954nuv] {
position: absolute;
top: calc(100% + .45rem);
right: 0;
min-width: 260px;
background: #fff;
border: 1px solid #ddceb0;
border-radius: 12px;
box-shadow: 0 16px 40px rgba(23, 25, 48, .18);
padding: .4rem;
z-index: 1100;
}
.te-titulo[b-7a07954nuv] {
display: block;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .07em;
color: #78695a;
padding: .3rem .5rem .35rem;
font-weight: 700;
}
.te-item[b-7a07954nuv] {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
border: 0;
background: transparent;
border-radius: 8px;
padding: .45rem .5rem;
font-size: .86rem;
color: #2b2420;
cursor: pointer;
text-align: left;
}
.te-item:hover[b-7a07954nuv] { background: #fffdf8; }
.te-item i[b-7a07954nuv] { color: #b23a2e; }
.te-item.atual[b-7a07954nuv] { font-weight: 700; }
.te-check[b-7a07954nuv] { margin-left: auto; color: #5f7350 !important; }
/* Banner de erro do Blazor: fica ESCONDIDO até o framework mostrar de verdade.
Sem esta regra ele aparece sempre (texto cru no rodapé) e parece erro. */
#blazor-error-ui[b-4hm2v6b6gs] {
color-scheme: light only;
background: #fff7c2;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-4hm2v6b6gs] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* ===================== TEMA CADERNO (06/08) =====================
O shell era escuro-roxo com halos e ícones que pulsavam — competia com o
conteúdo em vez de emoldurá-lo. Virou "fichário": a sidebar é a CAPA (tinta
escura, quente), o conteúdo é o PAPEL, e o item ativo é uma aba de papel que
avança da capa pra página. Mesma paleta das telas Criar prova / Minhas provas. */
/* A PALETA VIVE NOS DOIS SHELLS (corrigido 07/08).
Erro que isto conserta: as variáveis estavam só no .gp-app-shell, que é o shell
de quem está LOGADO. O visitante anônimo recebe o .gp-public-shell, que é IRMÃO
e não herda nada dele — então var(--gp-vermelho) não resolvia, o fundo do botão
"Comece a usar agora" virava transparente e o color:#fff deixava letra branca no
branco. O botão sumia na landing. São 9 usos de variável no bloco público. */
.gp-app-shell[b-wrba6sspbh],
.gp-public-shell[b-wrba6sspbh] {
--gp-papel: #f4ecdd;
--gp-papel-claro: #fffcf5;
--gp-tinta: #2b2420;
--gp-tinta-media: #5b5148;
--gp-tinta-fraca: #78695a;
--gp-linha: #ddceb0;
--gp-vermelho: #b23a2e;
--gp-vermelho-fundo: #8f2c22;
--gp-latao: #b6892a;
--gp-capa: #241d19;
--gp-capa-alta: #33291f;
--gp-creme: #e8dcc0;
min-height: 100vh;
background: var(--gp-papel);
color: var(--gp-tinta);
}
.gp-topbar[b-wrba6sspbh] {
height: 44px;
position: fixed;
inset: 0 0 auto 0;
z-index: 20;
display: grid;
grid-template-columns: 292px minmax(280px, 1fr) auto;
align-items: center;
gap: 18px;
padding: 0 22px;
border-bottom: 1px solid var(--gp-linha);
background: rgba(255, 252, 245, .96);
box-shadow: 0 10px 28px rgba(43, 36, 32, .07);
backdrop-filter: blur(14px);
}
.gp-topbar-brand[b-wrba6sspbh] {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.gp-brand[b-wrba6sspbh] {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
color: var(--gp-tinta);
font-family: "Fraunces", "Plus Jakarta Sans", serif;
font-size: 1.2rem;
font-weight: 700;
font-optical-sizing: auto;
letter-spacing: -.01em;
text-decoration: none;
}
.gp-brand:hover[b-wrba6sspbh] {
color: var(--gp-vermelho-fundo);
}
.gp-brand-txt[b-wrba6sspbh] {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.gp-brand-txt small[b-wrba6sspbh] {
color: var(--gp-tinta-fraca);
font-family: "Plus Jakarta Sans", sans-serif;
font-size: .68rem;
font-weight: 700;
letter-spacing: 0;
}
.gp-brand:hover .gp-brand-mark[b-wrba6sspbh] {
transform: rotate(-3deg);
box-shadow: 0 10px 20px rgba(43, 36, 32, .22);
}
/* selo da marca: carimbo em tinta, com o vinco de papel no canto */
.gp-brand-mark[b-wrba6sspbh] {
position: relative;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 3px 9px 9px 3px;
color: var(--gp-creme);
font-size: .8rem;
font-weight: 950;
letter-spacing: .03em;
background: var(--gp-capa);
box-shadow: 0 6px 14px rgba(43, 36, 32, .2);
transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease;
overflow: hidden;
}
.gp-brand-mark[b-wrba6sspbh]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: repeating-linear-gradient(180deg, var(--gp-vermelho) 0 6px, transparent 6px 12px);
opacity: .8;
}
/* ---- hambúrguer: agora sempre visível (também recolhe o menu no desktop) ---- */
.gp-nav-toggle-input[b-wrba6sspbh] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.gp-nav-burger[b-wrba6sspbh] {
display: flex;
flex: 0 0 auto;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
gap: 4px;
flex-direction: column;
border: 1px solid var(--gp-linha);
border-radius: 6px;
background: var(--gp-papel-claro);
cursor: pointer;
}
.gp-nav-burger:hover[b-wrba6sspbh] { border-color: var(--gp-tinta-fraca); }
.gp-nav-burger span[b-wrba6sspbh] {
display: block;
width: 16px;
height: 2px;
border-radius: 2px;
background: var(--gp-vermelho-fundo);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}
.gp-nav-toggle-input:checked ~ .gp-topbar .gp-nav-burger span:nth-child(1)[b-wrba6sspbh] { transform: translateY(6px) rotate(45deg); }
.gp-nav-toggle-input:checked ~ .gp-topbar .gp-nav-burger span:nth-child(2)[b-wrba6sspbh] { opacity: 0; transform: scaleX(0); }
.gp-nav-toggle-input:checked ~ .gp-topbar .gp-nav-burger span:nth-child(3)[b-wrba6sspbh] { transform: translateY(-6px) rotate(-45deg); }
.gp-nav-scrim[b-wrba6sspbh] {
position: fixed;
inset: 0;
z-index: 14;
background: rgba(43, 36, 32, .55);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
/* o véu escuro é só da gaveta MOBILE (regra movida pro @media max-width:760px
abaixo) — no desktop o checkbox só recolhe a sidebar, sem escurecer a tela. */
.gp-search[b-wrba6sspbh] {
min-width: 0;
height: 42px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px;
align-items: center;
border: 1px solid var(--gp-linha);
border-radius: 6px;
background: var(--gp-papel-claro);
overflow: hidden;
transition: border-color .16s ease;
}
.gp-search:focus-within[b-wrba6sspbh] { border-color: var(--gp-vermelho); }
.gp-search i[b-wrba6sspbh] {
color: var(--gp-vermelho);
justify-self: center;
}
.gp-search input[b-wrba6sspbh] {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--gp-tinta);
font-size: .9rem;
font-weight: 650;
}
.gp-search input[b-wrba6sspbh]::placeholder {
color: var(--gp-tinta-fraca);
font-weight: 650;
}
.gp-search button[b-wrba6sspbh] {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 4px;
color: #fff8f0;
background: var(--gp-vermelho);
}
.gp-top-actions[b-wrba6sspbh] {
display: flex;
align-items: center;
gap: 10px;
}
.gp-top-actions form[b-wrba6sspbh] {
display: contents;
}
.gp-plan-pill[b-wrba6sspbh] {
min-width: 142px;
height: 42px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 14px;
border-radius: 6px;
color: var(--gp-creme);
text-decoration: none;
background: var(--gp-capa);
box-shadow: 0 6px 16px rgba(43, 36, 32, .18);
}
.gp-plan-pill span[b-wrba6sspbh] {
font-size: .62rem;
font-weight: 850;
text-transform: uppercase;
opacity: .82;
}
.gp-plan-pill strong[b-wrba6sspbh] {
font-size: .84rem;
line-height: 1.1;
}
.gp-help-pill[b-wrba6sspbh] {
height: 42px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
border-radius: 8px;
border: 1px solid var(--gp-linha);
background: var(--gp-papel-claro);
color: var(--gp-vermelho-fundo);
font-weight: 850;
font-size: .84rem;
text-decoration: none;
white-space: nowrap;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gp-help-pill i[b-wrba6sspbh] {
font-size: 1.05rem;
}
.gp-help-pill:hover[b-wrba6sspbh] {
transform: translateY(-1px);
border-color: var(--gp-vermelho);
box-shadow: 0 8px 16px rgba(43, 36, 32, .12);
}
/* em tela estreita fica so o icone, pra nao empurrar a busca */
@media (max-width: 1180px) {
.gp-help-pill span[b-wrba6sspbh] {
display: none;
}
.gp-help-pill[b-wrba6sspbh] {
width: 42px;
padding: 0;
justify-content: center;
}
}
.gp-icon-btn[b-wrba6sspbh],
.gp-logout[b-wrba6sspbh] {
height: 40px;
border: 1px solid var(--gp-linha);
border-radius: 6px;
background: var(--gp-papel-claro);
color: var(--gp-vermelho-fundo);
font-weight: 850;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gp-icon-btn[b-wrba6sspbh] {
width: 42px;
display: grid;
place-items: center;
font-size: 1.05rem;
}
.gp-logout[b-wrba6sspbh] {
padding: 0 15px;
}
.gp-icon-btn:hover[b-wrba6sspbh],
.gp-logout:hover[b-wrba6sspbh] {
transform: translateY(-1px);
border-color: var(--gp-vermelho);
box-shadow: 0 8px 16px rgba(43, 36, 32, .1);
}
/* SIDEBAR = capa do fichário. As 9 cores por seção (indigo/violet/cyan/amber/
teal/emerald/fuchsia/slate/rose) foram unificadas: a capa é toda tinta e o
destaque é o LATÃO das divisórias + o vermelho da caneta no item ativo.
Menos cor, mais hierarquia — e nenhum item de menu saiu. */
.gp-sidebar[b-wrba6sspbh] {
--accent: var(--gp-latao);
--accent-solid: #b6892a;
position: fixed;
inset: 44px auto 0 0;
width: 292px;
z-index: 15;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
padding: 16px 0 16px 12px;
background:
linear-gradient(180deg, var(--gp-capa-alta) 0%, var(--gp-capa) 46%, #1d1714 100%);
box-shadow: inset -1px 0 0 rgba(232, 220, 192, .08), 10px 0 30px rgba(43, 36, 32, .18);
overflow-y: auto;
overflow-x: hidden;
}
/* linha vermelha de margem — a do caderno escolar. É o eixo em que o marcador
do item ativo se encaixa, então ela é estrutural, não enfeite. */
.gp-sidebar[b-wrba6sspbh]::after {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(178, 58, 46, .55) 6%, rgba(178, 58, 46, .55) 94%, transparent);
pointer-events: none;
z-index: 1;
}
/* grão de couro/papel na capa — bem discreto, dá matéria em vez de chapado */
.gp-sidebar[b-wrba6sspbh]::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .07;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gp-nav[b-wrba6sspbh],
.gp-sidebar-card[b-wrba6sspbh] {
position: relative;
z-index: 1;
}
.gp-nav[b-wrba6sspbh] {
display: grid;
gap: 14px;
}
.gp-nav-section[b-wrba6sspbh] {
display: grid;
gap: 2px;
animation: gp-section-in-b-wrba6sspbh .5s cubic-bezier(.22, 1, .36, 1) both;
}
/* ---- seções colapsáveis: mesmo truque do hambúrguer (checkbox oculto),
sem JS — a seta gira e o corpo recolhe com animação de altura (grid-rows). ---- */
.gp-nav-sec-toggle[b-wrba6sspbh] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.gp-nav-section-collapse[b-wrba6sspbh] {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows .28s ease;
}
.gp-nav-sec-toggle:checked ~ .gp-nav-section-collapse[b-wrba6sspbh] {
grid-template-rows: 0fr;
}
.gp-nav-section-body[b-wrba6sspbh] {
display: grid;
gap: 4px;
min-height: 0;
overflow: hidden;
}
/* order: o filete (::after, order 1) fica ENTRE o rótulo e a seta (order 2) */
.gp-nav-chevron[b-wrba6sspbh] {
order: 2;
flex: 0 0 auto;
margin-left: 0;
font-size: .6rem;
opacity: .7;
transition: transform .28s ease;
}
.gp-nav-sec-toggle:checked ~ .gp-nav-title .gp-nav-chevron[b-wrba6sspbh] {
transform: rotate(-90deg);
}
/* Os data-color continuam no HTML (nada foi removido do menu), mas agora só
variam a etiqueta da divisória num tom de latão — não mais 9 gradientes
disputando atenção. Admin fica em vermelho: é a única seção que precisa
avisar "aqui é diferente". */
.gp-nav-section[data-color][b-wrba6sspbh] { --accent-solid: #b6892a; }
.gp-nav-section[data-color="rose"][b-wrba6sspbh] { --accent-solid: #b23a2e; }
.gp-nav-section:nth-of-type(1)[b-wrba6sspbh] { animation-delay: .02s; }
.gp-nav-section:nth-of-type(2)[b-wrba6sspbh] { animation-delay: .07s; }
.gp-nav-section:nth-of-type(3)[b-wrba6sspbh] { animation-delay: .12s; }
.gp-nav-section:nth-of-type(4)[b-wrba6sspbh] { animation-delay: .17s; }
.gp-nav-section:nth-of-type(5)[b-wrba6sspbh] { animation-delay: .22s; }
.gp-nav-section:nth-of-type(6)[b-wrba6sspbh] { animation-delay: .27s; }
.gp-nav-section:nth-of-type(7)[b-wrba6sspbh] { animation-delay: .32s; }
.gp-nav-section:nth-of-type(8)[b-wrba6sspbh] { animation-delay: .37s; }
.gp-nav-section:nth-of-type(9)[b-wrba6sspbh] { animation-delay: .42s; }
@keyframes gp-section-in-b-wrba6sspbh {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* DIVISÓRIA DE FICHÁRIO: versalete pequeno em latão, com uma etiqueta curta
antes do texto e um filete que corre até o fim. Substitui o Fraunces itálico
grande, que pesava tanto quanto os próprios itens. */
.gp-nav-title[b-wrba6sspbh] {
display: flex;
align-items: center;
gap: 9px;
margin: 10px 0 4px;
padding: 5px 10px 5px 22px;
color: var(--accent-solid, #b6892a);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: color .18s ease;
}
/* filete que preenche o resto da linha, como a régua de uma divisória */
.gp-nav-title .gp-nav-title-text[b-wrba6sspbh] { flex: 0 0 auto; }
.gp-nav-title[b-wrba6sspbh]::after {
content: "";
order: 1;
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, currentColor, transparent);
opacity: .3;
}
.gp-nav-title:hover[b-wrba6sspbh] { color: var(--gp-creme); }
.gp-nav-title[b-wrba6sspbh]::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent, var(--gp-indigo));
box-shadow: 0 0 9px 1px color-mix(in srgb, var(--accent-solid, #b6892a) 70%, transparent);
}
/* ITEM: fica à direita da linha de margem. O ativo vira uma ABA DE PAPEL que
avança da capa em direção ao conteúdo (arredondado só à esquerda, emendando
na borda direita da sidebar) — estado inequívoco, sem animação pulsando. */
.gp-nav-item[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item {
display: flex;
align-items: center;
gap: 11px;
min-height: 40px;
padding: 5px 12px 5px 10px;
margin-left: 10px;
border-radius: 8px 0 0 8px;
color: rgba(232, 220, 192, .78);
font-size: .84rem;
font-weight: 650;
letter-spacing: .002em;
text-decoration: none;
position: relative;
transition: background-color .2s ease, color .16s ease, padding-left .2s ease;
/* min-width:0 é obrigatório: o .gp-nav-section-body é grid, e filho de grid
nasce com min-width:auto — sem isto o item assume a largura do texto (medido:
345px numa sidebar de 304px) e rótulos longos como "Prova online (aluno
responde no link)" eram cortados pela borda, sem nem mostrar as reticências. */
min-width: 0;
/* content-box somaria os 22px de padding POR FORA do width e o item estouraria
a coluna (medido: 289px de largura declarada como 266,8px). */
box-sizing: border-box;
/* Reset p/ quando o item é um <button> (ex.: Tutorial abre modal) — fica igual aos <a> */
width: calc(100% - 10px);
text-align: left;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
}
.gp-nav-icon[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 6px;
background: transparent;
color: rgba(232, 220, 192, .55);
font-size: .98rem;
transition: color .2s ease;
}
/* Rótulo QUEBRA em até 2 linhas em vez de cortar. Os nomes foram escritos pra
dizer a tarefa — "Prova online (aluno responde no link)", "Cartão-resposta
(correção automática)" — e era exatamente a explicação entre parênteses que
as reticências comiam. Duas linhas cabem; a terceira vira reticência. */
.gp-nav-label[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-label {
min-width: 0;
overflow: hidden;
white-space: normal;
line-height: 1.28;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.gp-nav-item:hover[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item:hover {
color: var(--gp-creme);
background: rgba(232, 220, 192, .07);
padding-left: 14px;
}
.gp-nav-item:hover .gp-nav-icon[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item:hover .gp-nav-icon {
color: var(--gp-latao);
}
/* ATIVO = aba de papel saindo da capa */
.gp-nav-item.active[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item.active {
color: var(--gp-tinta);
background: var(--gp-papel);
font-weight: 750;
box-shadow: -1px 0 0 rgba(43, 36, 32, .1), 0 6px 16px -8px rgba(0, 0, 0, .5);
}
/* marcador de caneta encaixado NA linha de margem */
.gp-nav-item.active[b-wrba6sspbh]::before,
[b-wrba6sspbh] .gp-nav-item.active::before {
content: "";
position: absolute;
left: -11px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: var(--gp-vermelho);
box-shadow: 0 0 0 3px var(--gp-capa);
}
.gp-nav-item.active .gp-nav-icon[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item.active .gp-nav-icon {
color: var(--gp-vermelho-fundo);
}
.gp-nav-item.featured[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item.featured {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 24px rgba(43, 36, 32, .28);
}
.gp-nav-item.featured .gp-nav-icon[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item.featured .gp-nav-icon {
background: rgba(255, 255, 255, .22);
color: #fff;
}
.gp-nav-item.featured:hover[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item.featured:hover {
transform: translateX(3px) translateY(-1px);
box-shadow: 0 16px 30px rgba(178, 58, 46, .4);
}
/* Card do rodapé: etiqueta colada na contracapa — papel creme envelhecido,
levemente torto, com o friso de caneta. */
.gp-sidebar-card[b-wrba6sspbh] {
position: relative;
margin: 10px 12px 2px 22px;
padding: 12px 14px;
border: 1px solid rgba(232, 220, 192, .18);
border-radius: 3px 10px 10px 3px;
color: var(--gp-creme);
background: rgba(232, 220, 192, .07);
box-shadow: inset 0 1px 0 rgba(232, 220, 192, .1);
overflow: hidden;
}
.gp-sidebar-card[b-wrba6sspbh]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: repeating-linear-gradient(180deg, var(--gp-vermelho) 0 8px, transparent 8px 16px);
opacity: .6;
}
.gp-sidebar-card span[b-wrba6sspbh] {
display: block;
margin-bottom: 5px;
color: var(--gp-latao);
font-size: .64rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.gp-sidebar-card strong[b-wrba6sspbh] {
display: block;
font-family: "Fraunces", "Plus Jakarta Sans", serif;
font-size: .88rem;
font-style: italic;
font-weight: 600;
line-height: 1.4;
color: rgba(232, 220, 192, .85);
}
.gp-app-main[b-wrba6sspbh] {
min-height: calc(100vh - 44px);
margin-left: 292px;
padding: 62px 24px 28px;
display: flex;
flex-direction: column;
}
.gp-app-body[b-wrba6sspbh] {
flex: 1;
}
.gp-public-shell[b-wrba6sspbh] {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #f4ecdd;
}
.gp-public-topbar[b-wrba6sspbh] {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 clamp(18px, 5vw, 64px);
border-bottom: 1px solid #ddceb0;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
}
.gp-public-topbar nav[b-wrba6sspbh] {
display: flex;
align-items: center;
gap: 18px;
}
.gp-public-topbar nav a[b-wrba6sspbh] {
color: #5b5148;
font-size: .9rem;
font-weight: 850;
text-decoration: none;
}
/* "Entrar" agora e link comum: quem ja tem conta procura e acha. O destaque
da barra pertence ao cadastro, nao ao login. */
.gp-public-entrar[b-wrba6sspbh],
[b-wrba6sspbh] .gp-public-entrar {
color: #5b5148 !important;
padding: 10px 4px;
}
/* CARD de cadastro: o unico elemento colorido e grande da barra publica.
Fica sempre a direita porque a nav e o ultimo filho do flex do topbar.
O pulso e discreto de proposito (2s, escala minima) — chama o olho sem
virar banner piscante, e para em quem pediu menos movimento no sistema. */
.gp-cta-topo[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 12px;
color: #fff !important;
text-decoration: none;
background: var(--gp-vermelho);
box-shadow: 0 6px 18px rgba(178, 58, 46, .38);
white-space: nowrap;
animation: gp-cta-pulso-b-wrba6sspbh 2.4s ease-in-out infinite;
}
.gp-cta-topo:hover[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo:hover {
animation: none;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(178, 58, 46, .5);
}
.gp-cta-topo i[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo i { font-size: 1.15rem; }
.gp-cta-topo-txt[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo-txt {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.gp-cta-topo-txt strong[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo-txt strong { font-size: .95rem; font-weight: 900; }
.gp-cta-topo-txt small[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo-txt small { font-size: .72rem; opacity: .9; font-weight: 700; }
@keyframes gp-cta-pulso-b-wrba6sspbh {
0%, 100% { box-shadow: 0 6px 18px rgba(178, 58, 46, .38); }
50%      { box-shadow: 0 6px 26px rgba(219, 39, 119, .62); }
}
/* Quem pediu menos animacao no sistema nao ve o pulso. */
@media (prefers-reduced-motion: reduce) {
.gp-cta-topo[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo { animation: none; }
}
[b-wrba6sspbh] .gp-public-topbar nav a {
color: #5b5148;
font-size: .9rem;
font-weight: 850;
text-decoration: none;
}
.gp-public-main[b-wrba6sspbh] {
flex: 1;
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 28px 0 44px;
}
#blazor-error-ui[b-wrba6sspbh] {
color-scheme: light only;
background: #f6ecd3;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-wrba6sspbh] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
@media (max-width: 1120px) {
.gp-topbar[b-wrba6sspbh] {
grid-template-columns: auto 1fr auto;
}
.gp-sidebar[b-wrba6sspbh] {
width: 112px;
align-items: center;
padding-inline: 8px;
}
.gp-nav[b-wrba6sspbh] {
width: 100%;
}
.gp-nav-section[b-wrba6sspbh] {
place-items: center;
}
.gp-nav-title[b-wrba6sspbh],
.gp-sidebar-card[b-wrba6sspbh],
.gp-topbar .gp-brand span:last-child[b-wrba6sspbh],
.gp-plan-pill[b-wrba6sspbh] {
display: none;
}
/* compacto: chip do ícone em cima, nome embaixo (nunca só o ícone) */
.gp-nav-item[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item {
flex-direction: column;
justify-content: center;
gap: 5px;
width: 94px;
min-height: 64px;
padding: 8px 3px;
text-align: center;
}
.gp-nav-icon[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-icon {
width: 36px;
height: 36px;
font-size: 1.08rem;
}
.gp-nav-label[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-label {
display: block;
max-width: 88px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
font-size: .68rem;
font-weight: 750;
line-height: 1.2;
}
.gp-app-main[b-wrba6sspbh] {
margin-left: 112px;
}
}
@media (max-width: 760px) {
.gp-topbar[b-wrba6sspbh] {
/* 2 colunas agora: o wrapper (burger+logo) virou 1 item só, não 2 */
grid-template-columns: auto 1fr;
height: auto;
min-height: 70px;
padding: 12px 14px;
gap: 12px;
}
.gp-nav-toggle-input:checked ~ .gp-nav-scrim[b-wrba6sspbh] {
opacity: 1;
pointer-events: auto;
}
.gp-search[b-wrba6sspbh] {
grid-column: 1 / -1;
order: 4;
}
.gp-top-actions[b-wrba6sspbh] {
justify-content: flex-end;
}
/* gaveta lateral (drawer): fora da tela até o hambúrguer marcar o checkbox */
.gp-sidebar[b-wrba6sspbh] {
inset: 0 auto 0 0;
width: min(84vw, 320px);
height: 100vh;
flex-direction: column;
justify-content: flex-start;
padding: 96px 14px 24px;
border-radius: 0 22px 22px 0;
transform: translateX(-105%);
transition: transform .38s cubic-bezier(.22, 1, .36, 1);
overflow-x: hidden;
}
.gp-nav-toggle-input:checked ~ .gp-sidebar[b-wrba6sspbh] {
transform: translateX(0);
box-shadow: 24px 0 60px rgba(0, 0, 0, .4);
}
.gp-nav[b-wrba6sspbh] {
width: 100%;
display: grid;
gap: 14px;
}
.gp-nav-section[b-wrba6sspbh] {
display: grid;
gap: 4px;
place-items: unset;
}
.gp-nav-title[b-wrba6sspbh],
.gp-sidebar-card[b-wrba6sspbh] {
display: flex;
}
.gp-nav-item[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-item {
flex-direction: row;
width: 100%;
min-height: 48px;
text-align: left;
}
.gp-nav-label[b-wrba6sspbh],
[b-wrba6sspbh] .gp-nav-label {
max-width: none;
font-size: .88rem;
white-space: nowrap;
}
.gp-app-main[b-wrba6sspbh] {
margin-left: 0;
padding: 92px 14px 28px;
}
.gp-public-topbar[b-wrba6sspbh] {
flex-wrap: wrap;
row-gap: 10px;
padding-block: 12px;
}
.gp-public-topbar nav[b-wrba6sspbh] {
flex: 1 1 100%;
gap: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gp-public-topbar nav a[b-wrba6sspbh] {
white-space: nowrap;
}
/* No celular a nav vira faixa com rolagem horizontal: se o CTA ficasse
dentro dela, morreria fora da tela no fim do scroll — justo no aparelho
de onde vem a maior parte do trafego pago. Aqui ele sai da rolagem e
ocupa a largura inteira embaixo dos links, impossivel de nao ver. */
.gp-public-topbar nav[b-wrba6sspbh] {
flex-wrap: wrap;
}
.gp-cta-topo[b-wrba6sspbh],
[b-wrba6sspbh] .gp-cta-topo {
flex: 1 1 100%;
justify-content: center;
margin-top: 4px;
padding-block: 12px;
}
}
/* ===== hambúrguer recolhe o menu também no desktop/tablet (>760px) =====
Abaixo de 760px o checkbox já significa "gaveta aberta" (regra acima).
Aqui em cima ele significa "menu recolhido" — telas diferentes, mesmo
controle, sentidos opostos (tudo isolado em media queries próprias). */
@media (min-width: 761px) {
.gp-sidebar[b-wrba6sspbh] {
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.gp-app-main[b-wrba6sspbh] {
transition: margin-left .28s cubic-bezier(.22, 1, .36, 1);
}
.gp-nav-toggle-input:checked ~ .gp-sidebar[b-wrba6sspbh] {
transform: translateX(-100%);
}
.gp-nav-toggle-input:checked ~ .gp-app-main[b-wrba6sspbh] {
margin-left: 0;
}
}
/* ===== sino de avisos (conteúdo rotativo do banco) ===== */
.gp-sino-wrap[b-wrba6sspbh] { position: relative; }
.gp-sino-ponto[b-wrba6sspbh] {
position: absolute;
top: 8px;
right: 9px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gp-vermelho);
box-shadow: 0 0 0 2px #fff;
}
.gp-icon-btn[b-wrba6sspbh] { position: relative; }
.gp-icon-btn.is-on[b-wrba6sspbh] { border-color: var(--gp-vermelho); color: var(--gp-vermelho); }
.gp-avisos[b-wrba6sspbh] {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 40;
width: min(360px, 88vw);
max-height: 70vh;
overflow-y: auto;
border: 1px solid #ddceb0;
border-radius: 15px;
background: #fff;
box-shadow: 0 24px 60px rgba(43, 36, 32, .22);
}
.gp-avisos-cab[b-wrba6sspbh] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
color: #fff;
background: var(--gp-vermelho);
}
.gp-avisos-cab strong[b-wrba6sspbh] { font-size: .95rem; }
.gp-avisos-cab span[b-wrba6sspbh] { font-size: .72rem; opacity: .85; }
.gp-aviso[b-wrba6sspbh] {
display: flex;
gap: 11px;
padding: 13px 16px;
border-bottom: 1px solid #f4ecdd;
}
.gp-aviso:last-child[b-wrba6sspbh] { border-bottom: 0; }
.gp-aviso i[b-wrba6sspbh] {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
font-size: .95rem;
background: var(--gp-vermelho);
}
.gp-aviso.curiosidade i[b-wrba6sspbh] { background: var(--gp-latao); }
.gp-aviso.dica i[b-wrba6sspbh] { background: var(--gp-latao); }
.gp-aviso div[b-wrba6sspbh] { display: grid; gap: 3px; min-width: 0; }
.gp-aviso strong[b-wrba6sspbh] { color: #2b2420; font-size: .85rem; }
.gp-aviso span[b-wrba6sspbh] { color: #5b5148; font-size: .82rem; line-height: 1.45; }
.gp-aviso small[b-wrba6sspbh] { color: #78695a; font-size: .72rem; font-weight: 700; }
.gp-aviso-vazio[b-wrba6sspbh] { padding: 18px; color: #78695a; font-size: .85rem; text-align: center; }
.gp-brand-mark img[b-wrba6sspbh] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
/* cabecalho compacto (pedido do fundador: metade da altura) */
.gp-topbar .gp-brand-mark[b-wrba6sspbh] { width: 30px; height: 30px; border-radius: 7px; }
.gp-topbar .gp-plan-pill[b-wrba6sspbh] { padding: 4px 12px; font-size: 11px; }
.gp-topbar .gp-brand[b-wrba6sspbh] { font-size: 15px; }
/* ===== impressão (14/07): o papel recebe SÓ o conteúdo da página =====
Sem isto a sidebar/topbar saíam no papel e — pior — .gp-app-main é FLEX,
e o Chrome IGNORA page-break-after de filhos de flex: era por isso que
vários cartões-resposta caíam na mesma folha. No print vira block. */
@media print {
.gp-topbar[b-wrba6sspbh],
.gp-sidebar[b-wrba6sspbh],
.gp-nav-scrim[b-wrba6sspbh],
.gp-footer[b-wrba6sspbh] { display: none !important; }
.gp-app-shell[b-wrba6sspbh] { display: block !important; }
.gp-app-main[b-wrba6sspbh] {
display: block !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
background: #fff !important;
}
.gp-app-body[b-wrba6sspbh] { display: block !important; }
}
/* ===== Paywall (trial/pagante expirado) — modal que não fecha ===== */
.gp-paywall[b-wrba6sspbh] {
position: fixed;
inset: 0;
z-index: 2147483600;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(43, 36, 32, .72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gp-paywall-card[b-wrba6sspbh] {
width: 100%;
max-width: 440px;
background: #fff;
border-radius: 22px;
padding: 34px 30px 26px;
text-align: center;
box-shadow: 0 30px 80px rgba(43, 36, 32, .45);
animation: gp-paywall-in-b-wrba6sspbh .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes gp-paywall-in-b-wrba6sspbh {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
.gp-paywall-ico[b-wrba6sspbh] {
width: 62px;
height: 62px;
margin: 0 auto 18px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 26px rgba(178, 58, 46, .45);
}
.gp-paywall-card h2[b-wrba6sspbh] {
margin: 0 0 10px;
font-size: 22px;
font-weight: 800;
color: #2b2420;
line-height: 1.25;
}
.gp-paywall-card p[b-wrba6sspbh] {
margin: 0 0 22px;
font-size: 14.5px;
line-height: 1.55;
color: #78695a;
}
.gp-paywall-btn[b-wrba6sspbh] {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
padding: 14px 20px;
border-radius: 13px;
font-size: 15px;
font-weight: 800;
color: #fff;
text-decoration: none;
background: var(--gp-vermelho);
box-shadow: 0 10px 24px rgba(37, 99, 235, .4);
transition: transform .16s, box-shadow .16s;
}
.gp-paywall-btn:hover[b-wrba6sspbh] {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(178, 58, 46, .5);
}
.gp-paywall-sair[b-wrba6sspbh] {
margin: 14px 0 0;
}
.gp-paywall-sair button[b-wrba6sspbh] {
border: none;
background: none;
color: #78695a;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
/* ===== Faixa de simulação (admin vendo como outro) — acima do paywall ===== */
.gp-simular-faixa[b-wrba6sspbh] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2147483650;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #7a5a1a, #b6892a);
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.gp-simular-faixa strong[b-wrba6sspbh] { font-weight: 850; }
.gp-simular-faixa a[b-wrba6sspbh] {
color: #fff;
text-decoration: underline;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
/* Item de menu 'em breve' (17/07): inclicavel, esmaecido */
.gp-nav-item-breve[b-wrba6sspbh] { opacity: .5; cursor: default; }
.gp-nav-item-breve small[b-wrba6sspbh] { font-weight: 400; font-size: .72em; }
/* Cabecalho das telas do aluno (ver MarcaAluno.razor). */
.ma-topo[b-o17ibw3nh5] {
display: flex;
justify-content: center;
padding: 18px 14px 4px;
}
.ma-link[b-o17ibw3nh5] {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #1e293b;
}
.ma-link img[b-o17ibw3nh5] {
width: 36px;
height: 36px;
border-radius: 9px;
}
.ma-link span[b-o17ibw3nh5] {
display: flex;
flex-direction: column;
font-weight: 900;
font-size: 1rem;
line-height: 1.1;
}
.ma-link small[b-o17ibw3nh5] {
font-weight: 700;
font-size: .7rem;
color: #6366f1;
}
/* Rodape das telas do aluno (ver MarcaAlunoRodape.razor). */
.mar-rodape[b-ud0244hyvo] {
max-width: 700px;
margin: 34px auto 40px;
text-align: center;
padding: 30px 22px;
border-radius: 18px;
background: linear-gradient(135deg, #f5f3ff, #eef2ff);
border: 1px solid #ddd6fe;
display: grid;
justify-items: center;
gap: 8px;
}
.mar-logo[b-ud0244hyvo] {
width: 46px;
height: 46px;
border-radius: 11px;
}
.mar-nome[b-ud0244hyvo] {
margin: 0;
font-weight: 900;
font-size: 1.1rem;
color: #1e293b;
}
.mar-txt[b-ud0244hyvo] {
margin: 0;
max-width: 430px;
color: #475569;
font-size: .88rem;
}
.mar-links[b-ud0244hyvo] {
display: flex;
flex-wrap: wrap;
gap: 9px;
justify-content: center;
margin-top: 6px;
}
.mar-links a[b-ud0244hyvo] {
padding: 10px 18px;
border-radius: 10px;
background: #fff;
border: 1px solid #c7d2fe;
color: #4338ca;
font-weight: 800;
font-size: .87rem;
text-decoration: none;
}
.mar-links a:first-child[b-ud0244hyvo] {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
}
.mar-marca a[b-ud0244hyvo] {
color: #6366f1;
font-weight: 800;
font-size: .83rem;
text-decoration: none;
}
.components-reconnect-first-attempt-visible[b-kow3mjg1ch],
.components-reconnect-repeated-attempt-visible[b-kow3mjg1ch],
.components-reconnect-failed-visible[b-kow3mjg1ch],
.components-pause-visible[b-kow3mjg1ch],
.components-resume-failed-visible[b-kow3mjg1ch],
.components-rejoining-animation[b-kow3mjg1ch] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-retrying[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-failed[b-kow3mjg1ch],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kow3mjg1ch] {
display: block;
}
#components-reconnect-modal[b-kow3mjg1ch] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-kow3mjg1ch 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-kow3mjg1ch 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kow3mjg1ch 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-kow3mjg1ch]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-kow3mjg1ch 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-kow3mjg1ch {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-kow3mjg1ch {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-kow3mjg1ch {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-kow3mjg1ch] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-kow3mjg1ch] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-kow3mjg1ch] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-kow3mjg1ch] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-kow3mjg1ch] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-kow3mjg1ch] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-kow3mjg1ch] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-kow3mjg1ch 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-kow3mjg1ch] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-kow3mjg1ch {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
.aa-shell[b-634ji9tlkn] {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.aa-card[b-634ji9tlkn] {
background: #fff;
border-radius: 18px;
padding: 40px 32px;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 18px 48px rgba(31, 41, 55, .12);
}
.aa-logo[b-634ji9tlkn] {
width: 68px;
height: 68px;
object-fit: contain;
border-radius: 14px;
margin-bottom: 18px;
}
.aa-spinner[b-634ji9tlkn] {
width: 46px;
height: 46px;
margin: 4px auto 18px;
border: 4px solid #e5e7eb;
border-top-color: #4f46e5;
border-radius: 50%;
animation: aa-spin-b-634ji9tlkn 0.9s linear infinite;
}
@keyframes aa-spin-b-634ji9tlkn {
to { transform: rotate(360deg); }
}
.aa-card h1[b-634ji9tlkn] {
font-size: 1.35rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 10px;
}
.aa-card p[b-634ji9tlkn] {
font-size: .98rem;
line-height: 1.55;
color: #4b5563;
margin: 0 0 22px;
}
.aa-voltar[b-634ji9tlkn] {
display: inline-block;
font-size: .9rem;
font-weight: 600;
color: #6b7280;
text-decoration: none;
}
.aa-voltar:hover[b-634ji9tlkn] {
color: #4f46e5;
text-decoration: underline;
}
.ap2-page[b-e9sikcjpml] {
max-width: 800px;
margin: 0 auto;
padding: 24px 16px 70px;
display: grid;
gap: 14px;
}
.ap2-invalido[b-e9sikcjpml],
.ap2-espera[b-e9sikcjpml] {
display: grid;
justify-items: center;
gap: 10px;
padding: 60px 20px;
text-align: center;
color: #475569;
}
.ap2-invalido i[b-e9sikcjpml] { font-size: 2.4rem; color: #f59e0b; }
.ap2-invalido h2[b-e9sikcjpml], .ap2-espera h2[b-e9sikcjpml] { margin: 0; font-size: 1.3rem; font-weight: 900; color: #1e293b; }
/* ===== topo da prova ===== */
.ap2-topo[b-e9sikcjpml] {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 10px 26px rgba(76, 29, 149, .3);
}
.ap2-topo h1[b-e9sikcjpml] { margin: 0; font-size: 1.1rem; font-weight: 900; }
.ap2-topo p[b-e9sikcjpml] { margin: 3px 0 0; font-size: .76rem; color: rgba(255, 255, 255, .85); }
.ap2-progresso[b-e9sikcjpml] {
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
font-weight: 900;
font-size: .9rem;
white-space: nowrap;
}
/* ===== questão ===== */
.ap2-questao[b-e9sikcjpml],
.ap2-gab[b-e9sikcjpml] {
display: grid;
gap: 10px;
padding: 16px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
background: #fff;
}
.ap2-questao header[b-e9sikcjpml],
.ap2-gab header[b-e9sikcjpml] {
display: flex;
align-items: center;
gap: 10px;
}
.ap2-num[b-e9sikcjpml] {
display: inline-grid;
place-content: center;
min-width: 30px;
height: 30px;
border-radius: 8px;
background: #ede9fe;
color: #6d28d9;
font-weight: 900;
font-size: .82rem;
}
.ap2-mat[b-e9sikcjpml] {
flex: 1;
font-size: .74rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .03em;
}
.ap2-enunciado[b-e9sikcjpml] {
margin: 0;
color: #1e293b;
font-size: .94rem;
line-height: 1.6;
white-space: pre-line;
}
.ap2-img[b-e9sikcjpml] {
display: block;
max-width: 100%;
max-height: 420px;
margin: 10px auto;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #fff;
}
.ap2-alts[b-e9sikcjpml] { display: grid; gap: 7px; }
.ap2-alt[b-e9sikcjpml] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1.6px solid rgba(15, 23, 42, .12);
border-radius: 9px;
background: #fff;
text-align: left;
font-size: .88rem;
color: #334155;
transition: border-color .12s ease, background-color .12s ease;
}
.ap2-alt:hover[b-e9sikcjpml] { border-color: rgba(124, 58, 237, .45); }
.ap2-alt.on[b-e9sikcjpml] {
border-color: #7c3aed;
background: #faf5ff;
font-weight: 700;
color: #4c1d95;
}
.ap2-letra[b-e9sikcjpml] {
display: inline-grid;
place-content: center;
min-width: 26px;
height: 26px;
border-radius: 50%;
background: #f1f5f9;
font-weight: 900;
font-size: .78rem;
color: #475569;
flex: 0 0 26px;
}
.ap2-alt.on .ap2-letra[b-e9sikcjpml] { background: #7c3aed; color: #fff; }
.ap2-erro[b-e9sikcjpml] {
padding: 10px 12px;
border: 1px solid #fecdd3;
border-radius: 8px;
background: #fff1f2;
color: #9f1239;
font-size: .84rem;
font-weight: 700;
}
.ap2-entregar[b-e9sikcjpml] {
position: sticky;
bottom: 14px;
padding: 16px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #0f766e, #047857);
color: #fff;
font-size: 1rem;
font-weight: 900;
box-shadow: 0 14px 30px rgba(15, 118, 110, .35);
}
.ap2-entregar:disabled[b-e9sikcjpml] { opacity: .7; }
/* ===== resultado ===== */
.ap2-res-head[b-e9sikcjpml] {
display: grid;
justify-items: center;
gap: 10px;
padding: 28px 20px;
border-radius: 16px;
color: #fff;
text-align: center;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #0f766e 140%);
box-shadow: 0 20px 42px rgba(76, 29, 149, .25);
}
.ap2-selo[b-e9sikcjpml] {
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
}
.ap2-nota[b-e9sikcjpml] { display: grid; justify-items: center; line-height: 1.1; }
.ap2-nota strong[b-e9sikcjpml] { font-size: 3rem; font-weight: 900; color: #fde68a; }
.ap2-nota span[b-e9sikcjpml] { font-size: .86rem; opacity: .9; }
.ap2-grupos[b-e9sikcjpml] {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 12px;
}
.ap2-grupos > div[b-e9sikcjpml] {
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
background: #fff;
}
.ap2-grupos h3[b-e9sikcjpml] {
margin: 0 0 10px;
font-size: .92rem;
font-weight: 900;
color: #1e293b;
}
.ap2-barra-linha[b-e9sikcjpml] {
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.ap2-barra-linha .nome[b-e9sikcjpml] { font-size: .76rem; font-weight: 700; color: #475569; }
.ap2-barra-linha .trilho[b-e9sikcjpml] { height: 9px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.ap2-barra-linha .barra[b-e9sikcjpml] { height: 100%; border-radius: 999px; }
.ap2-barra-linha .barra.ok[b-e9sikcjpml] { background: linear-gradient(90deg, #10b981, #059669); }
.ap2-barra-linha .barra.baixo[b-e9sikcjpml] { background: linear-gradient(90deg, #f59e0b, #d97706); }
.ap2-barra-linha .valor[b-e9sikcjpml] { font-size: .74rem; font-weight: 800; color: #334155; }
.ap2-foco[b-e9sikcjpml] {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
margin-bottom: 6px;
border: 1px solid #fde68a;
border-radius: 8px;
background: #fffbeb;
font-size: .78rem;
}
.ap2-foco strong[b-e9sikcjpml] { color: #92400e; }
.ap2-foco span[b-e9sikcjpml] { color: #b45309; white-space: nowrap; }
.ap2-perfeito[b-e9sikcjpml] { margin: 0; color: #047857; font-weight: 800; font-size: .84rem; }
/* ===== gabarito ===== */
.ap2-gab-titulo[b-e9sikcjpml] { margin: 8px 0 0; font-size: 1.05rem; font-weight: 900; color: #1e293b; }
.ap2-gab.certo[b-e9sikcjpml] { border-left: 4px solid #10b981; }
.ap2-gab.errado[b-e9sikcjpml] { border-left: 4px solid #f43f5e; }
.ap2-veredito[b-e9sikcjpml] { font-size: .78rem; font-weight: 800; white-space: nowrap; }
.ap2-gab-alt[b-e9sikcjpml] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: .85rem;
color: #475569;
}
.ap2-gab-alt.certa[b-e9sikcjpml] { background: #ecfdf5; border: 1px solid #a7f3d0; }
.ap2-gab-alt.marcada-errada[b-e9sikcjpml] { background: #fff1f2; border: 1px solid #fecdd3; }
.ap2-gab-alt > div[b-e9sikcjpml] { display: grid; gap: 3px; }
.ap2-gab-alt small[b-e9sikcjpml] { color: #64748b; font-size: .76rem; line-height: 1.4; }
.ap2-foot[b-e9sikcjpml] {
display: grid;
justify-items: center;
gap: 8px;
text-align: center;
padding-top: 8px;
}
.ap2-foot p[b-e9sikcjpml] { margin: 0; color: #475569; font-size: .84rem; font-weight: 700; }
.ap2-cta[b-e9sikcjpml] {
display: inline-flex;
padding: 12px 22px;
border-radius: 10px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-weight: 850;
text-decoration: none;
}
.ap2-cta:hover[b-e9sikcjpml] { color: #fff; }
@media (max-width: 640px) {
.ap2-grupos[b-e9sikcjpml] { grid-template-columns: 1fr; }
}
.ap2-acoes[b-e9sikcjpml] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.ap2-cta.pdf[b-e9sikcjpml] {
background: #fff;
color: #6d28d9;
border: 2px solid #7c3aed;
display: inline-flex;
align-items: center;
gap: 8px;
}
.ap2-cta.pdf:hover[b-e9sikcjpml] { color: #6d28d9; }
/* opcao PDF no topo da prova (fundador 15/07) */
.ap2-pdfs[b-e9sikcjpml] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px dashed rgba(124, 58, 237, .4);
border-radius: 10px;
background: #faf5ff;
font-size: .82rem;
}
.ap2-pdfs span[b-e9sikcjpml] { color: #6d28d9; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.ap2-pdfs a[b-e9sikcjpml] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1.5px solid #7c3aed;
border-radius: 8px;
background: #fff;
color: #6d28d9;
font-weight: 800;
text-decoration: none;
}
.ar-page[b-hxwdmes6kx] {
max-width: 720px;
margin: 0 auto;
padding: 24px 16px 60px;
display: grid;
gap: 18px;
}
.ar-voltar[b-hxwdmes6kx] {
display: inline-flex;
align-items: center;
gap: 6px;
color: #7c3aed;
font-size: .85rem;
font-weight: 800;
text-decoration: none;
}
.ar-head h1[b-hxwdmes6kx] {
margin: 0;
font-size: 1.6rem;
font-weight: 900;
color: #1e293b;
}
.ar-head p[b-hxwdmes6kx] {
margin: 6px 0 0;
color: #475569;
font-size: .92rem;
}
.ar-form[b-hxwdmes6kx] {
display: grid;
gap: 14px;
padding: 22px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}
.ar-form label[b-hxwdmes6kx] {
display: grid;
gap: 6px;
}
.ar-form label span[b-hxwdmes6kx] {
font-size: .82rem;
font-weight: 800;
color: #334155;
}
.ar-form label em[b-hxwdmes6kx] {
font-style: normal;
font-weight: 600;
color: #94a3b8;
}
.ar-form input[b-hxwdmes6kx],
.ar-form textarea[b-hxwdmes6kx] {
padding: 11px 12px;
border: 1px solid rgba(15, 23, 42, .16);
border-radius: 9px;
font-size: .92rem;
font-family: inherit;
}
.ar-form textarea[b-hxwdmes6kx] {
resize: vertical;
line-height: 1.55;
}
.ar-abas[b-hxwdmes6kx] {
display: flex;
gap: 8px;
}
.ar-abas button[b-hxwdmes6kx] {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
border: 1px solid rgba(15, 23, 42, .14);
border-radius: 9px;
background: #f8fafc;
font-size: .87rem;
font-weight: 800;
color: #64748b;
}
.ar-abas button.on[b-hxwdmes6kx] {
border-color: #7c3aed;
background: #f5f3ff;
color: #6d28d9;
}
.ar-contador[b-hxwdmes6kx] {
font-size: .78rem;
font-weight: 700;
}
.ar-contador.curto[b-hxwdmes6kx] { color: #b45309; }
.ar-contador.ok[b-hxwdmes6kx] { color: #047857; }
.ar-foto-area[b-hxwdmes6kx] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ar-foto-btn[b-hxwdmes6kx] {
display: grid;
justify-items: center;
gap: 4px;
padding: 18px 12px;
border: 2px dashed rgba(124, 58, 237, .35);
border-radius: 10px;
background: #faf5ff;
cursor: pointer;
text-align: center;
}
.ar-foto-btn i[b-hxwdmes6kx] { font-size: 1.4rem; color: #7c3aed; }
.ar-foto-btn span[b-hxwdmes6kx] { font-weight: 800; font-size: .85rem; color: #6d28d9; }
.ar-foto-btn small[b-hxwdmes6kx] { color: #94a3b8; font-size: .72rem; }
.ar-foto-btn[b-hxwdmes6kx]  input[type="file"] { display: none; }
.ar-qr-bloco[b-hxwdmes6kx] { display: grid; }
.ar-codigo-curto[b-hxwdmes6kx] { display: block; margin: 4px 0; font-size: .85rem; color: #475569; }
.ar-cod[b-hxwdmes6kx] { display: inline-block; font-weight: 900; letter-spacing: .12em; color: #15803d; background: #dcfce7; border-radius: 8px; padding: 1px 8px; }
.ar-qr-gerar[b-hxwdmes6kx] {
display: grid;
place-content: center;
gap: 4px;
height: 100%;
padding: 18px 12px;
border: 2px dashed rgba(15, 118, 110, .35);
border-radius: 10px;
background: #f0fdfa;
color: #0f766e;
font-weight: 800;
font-size: .85rem;
}
.ar-qr[b-hxwdmes6kx] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border: 1px solid rgba(15, 118, 110, .3);
border-radius: 10px;
background: #f0fdfa;
}
.ar-qr img[b-hxwdmes6kx] { width: 110px; height: 110px; border-radius: 8px; }
.ar-qr div[b-hxwdmes6kx] { display: grid; gap: 4px; }
.ar-qr strong[b-hxwdmes6kx] { font-size: .82rem; color: #134e4a; }
.ar-qr span[b-hxwdmes6kx] { font-size: .76rem; color: #0f766e; }
.ar-qr button[b-hxwdmes6kx] {
justify-self: start;
padding: 6px 12px;
border: 0;
border-radius: 7px;
background: #0f766e;
color: #fff;
font-size: .76rem;
font-weight: 800;
}
.ar-qr button:disabled[b-hxwdmes6kx] { opacity: .5; }
.ar-fotos-ok[b-hxwdmes6kx] {
display: flex;
align-items: center;
gap: 8px;
font-size: .84rem;
font-weight: 800;
color: #047857;
}
.ar-fotos-ok button[b-hxwdmes6kx] {
border: 0;
background: none;
color: #94a3b8;
font-size: .76rem;
text-decoration: underline;
}
.ar-erro[b-hxwdmes6kx] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid #fecdd3;
border-radius: 8px;
background: #fff1f2;
color: #9f1239;
font-size: .84rem;
font-weight: 700;
}
.ar-pagar[b-hxwdmes6kx] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-size: 1rem;
font-weight: 900;
box-shadow: 0 12px 26px rgba(124, 58, 237, .3);
}
.ar-pagar:disabled[b-hxwdmes6kx] { opacity: .7; }
.ar-nota[b-hxwdmes6kx] {
margin: 0;
text-align: center;
color: #94a3b8;
font-size: .76rem;
}
@media (max-width: 620px) {
.ar-foto-area[b-hxwdmes6kx] { grid-template-columns: 1fr; }
}
/* canal de entrega + passos WhatsApp (17/07) */
.ar-canal-dica[b-hxwdmes6kx] {
margin: 0;
font-size: .8rem;
color: #15803d;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.ar-wa-passos[b-hxwdmes6kx] {
display: grid;
gap: 10px;
padding: 14px;
border: 1.5px solid rgba(22, 163, 74, .35);
border-radius: 11px;
background: #f0fdf4;
}
.ar-wa-passos strong[b-hxwdmes6kx] { color: #14532d; font-size: .9rem; }
.ar-passo[b-hxwdmes6kx] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
border-radius: 10px;
font-size: .95rem;
font-weight: 900;
text-decoration: none;
}
.ar-passo.zap[b-hxwdmes6kx] { background: #16a34a; color: #fff; }
.ar-passo.pix[b-hxwdmes6kx] { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }
.ar-passo:hover[b-hxwdmes6kx] { color: #fff; }
.ar-check[b-hxwdmes6kx] {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 10px;
}
.ar-check input[type="checkbox"][b-hxwdmes6kx] { width: 18px; height: 18px; accent-color: #16a34a; }
.ar-check span[b-hxwdmes6kx] { font-size: .86rem !important; color: #334155; font-weight: 700 !important; }
.ar-check i[b-hxwdmes6kx] { color: #16a34a; }
.ar-aviso-ia[b-hxwdmes6kx] {
margin: 0;
padding: 10px 12px;
border: 1px solid #fde68a;
border-radius: 9px;
background: #fffbeb;
color: #92400e;
font-size: .78rem;
line-height: 1.5;
}
.rs-page[b-bnmtfcpu8k] {
max-width: 760px;
margin: 0 auto;
padding: 28px 16px 60px;
display: grid;
gap: 18px;
}
.rs-invalido[b-bnmtfcpu8k],
.rs-espera[b-bnmtfcpu8k] {
display: grid;
justify-items: center;
gap: 10px;
padding: 60px 20px;
text-align: center;
color: #475569;
}
.rs-invalido i[b-bnmtfcpu8k] { font-size: 2.4rem; color: #f59e0b; }
.rs-invalido h2[b-bnmtfcpu8k], .rs-espera h2[b-bnmtfcpu8k] { margin: 0; font-size: 1.3rem; font-weight: 900; color: #1e293b; }
.rs-espera p[b-bnmtfcpu8k] { margin: 0; max-width: 420px; }
.rs-espera small[b-bnmtfcpu8k] { color: #94a3b8; word-break: break-all; }
/* ===== cabeçalho com a nota ===== */
.rs-head[b-bnmtfcpu8k] {
display: grid;
justify-items: center;
gap: 10px;
padding: 30px 20px;
border-radius: 16px;
color: #fff;
text-align: center;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #0f766e 140%);
box-shadow: 0 20px 42px rgba(76, 29, 149, .25);
}
.rs-selo[b-bnmtfcpu8k] {
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
font-size: .72rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.rs-nota[b-bnmtfcpu8k] { display: grid; justify-items: center; line-height: 1; }
.rs-nota small[b-bnmtfcpu8k] { font-size: .78rem; opacity: .85; }
.rs-nota strong[b-bnmtfcpu8k] { font-size: 3.4rem; font-weight: 900; color: #fde68a; }
.rs-nota span[b-bnmtfcpu8k] { font-size: .9rem; opacity: .85; }
.rs-tema[b-bnmtfcpu8k] { margin: 0; font-size: .84rem; opacity: .9; }
/* ===== competências ===== */
.rs-comps[b-bnmtfcpu8k] { display: grid; gap: 10px; }
.rs-comp[b-bnmtfcpu8k] {
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
background: #fff;
}
.rs-comp header[b-bnmtfcpu8k] {
display: flex;
align-items: center;
gap: 10px;
}
.rs-comp-num[b-bnmtfcpu8k] {
display: inline-grid;
place-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #ede9fe;
color: #6d28d9;
font-weight: 900;
font-size: .82rem;
}
.rs-comp header strong[b-bnmtfcpu8k] {
flex: 1;
font-size: .88rem;
color: #1e293b;
}
.rs-comp-nota[b-bnmtfcpu8k] {
font-weight: 900;
font-size: .88rem;
white-space: nowrap;
}
.rs-comp-nota.alta[b-bnmtfcpu8k] { color: #047857; }
.rs-comp-nota.media[b-bnmtfcpu8k] { color: #b45309; }
.rs-comp-nota.baixa[b-bnmtfcpu8k] { color: #be123c; }
.rs-comp p[b-bnmtfcpu8k] {
margin: 8px 0 0;
color: #475569;
font-size: .86rem;
line-height: 1.55;
}
/* ===== pontos ===== */
.rs-pontos[b-bnmtfcpu8k] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rs-pontos > div[b-bnmtfcpu8k] {
padding: 14px 16px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
background: #fff;
}
.rs-pontos h3[b-bnmtfcpu8k], .rs-reescrita h3[b-bnmtfcpu8k] {
margin: 0 0 8px;
font-size: .92rem;
font-weight: 900;
color: #1e293b;
}
.rs-pontos p[b-bnmtfcpu8k] {
margin: 0 0 6px;
color: #475569;
font-size: .84rem;
line-height: 1.5;
}
.rs-reescrita[b-bnmtfcpu8k] {
padding: 14px 16px;
border: 1px solid rgba(124, 58, 237, .25);
border-radius: 12px;
background: #faf5ff;
}
.rs-reescrita p[b-bnmtfcpu8k] {
margin: 0;
color: #4c1d95;
font-size: .86rem;
line-height: 1.6;
}
/* ===== rodapé ===== */
.rs-foot[b-bnmtfcpu8k] {
display: grid;
justify-items: center;
gap: 8px;
text-align: center;
padding-top: 8px;
}
.rs-foot p[b-bnmtfcpu8k] { margin: 0; color: #475569; font-size: .84rem; font-weight: 700; }
.rs-cta[b-bnmtfcpu8k] {
display: inline-flex;
padding: 12px 22px;
border-radius: 10px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-weight: 850;
text-decoration: none;
}
.rs-cta:hover[b-bnmtfcpu8k] { color: #fff; }
.rs-foot small[b-bnmtfcpu8k] { color: #94a3b8; }
.rs-foot small a[b-bnmtfcpu8k] { color: #7c3aed; font-weight: 700; }
@media (max-width: 620px) {
.rs-pontos[b-bnmtfcpu8k] { grid-template-columns: 1fr; }
}
.rs-acoes[b-bnmtfcpu8k] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.rs-cta.pdf[b-bnmtfcpu8k] {
background: #fff;
color: #6d28d9;
border: 2px solid #7c3aed;
display: inline-flex;
align-items: center;
gap: 8px;
}
.rs-cta.pdf:hover[b-bnmtfcpu8k] { color: #6d28d9; }
/* redacao original (como a IA leu) */
.rs-original details[b-bnmtfcpu8k] {
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
background: #fff;
padding: 12px 16px;
}
.rs-original summary[b-bnmtfcpu8k] {
cursor: pointer;
font-weight: 800;
font-size: .92rem;
color: #334155;
}
.rs-original p[b-bnmtfcpu8k] {
margin: 10px 0 0;
color: #475569;
font-size: .88rem;
line-height: 1.65;
white-space: pre-line;
}
.rs-cta.zap[b-bnmtfcpu8k] {
background: #fff;
color: #15803d;
border: 2px solid #16a34a;
display: inline-flex;
align-items: center;
gap: 8px;
}
.rs-cta.zap:hover[b-bnmtfcpu8k] { color: #15803d; }
.as-page[b-scurelssmg] {
max-width: 760px;
margin: 0 auto;
padding: 24px 16px 60px;
display: grid;
gap: 18px;
}
.as-voltar[b-scurelssmg] {
display: inline-flex;
align-items: center;
gap: 6px;
color: #7c3aed;
font-size: .85rem;
font-weight: 800;
text-decoration: none;
}
.as-head h1[b-scurelssmg] {
margin: 0;
font-size: 1.5rem;
font-weight: 900;
color: #1e293b;
}
.as-head p[b-scurelssmg] {
margin: 6px 0 0;
color: #475569;
font-size: .92rem;
}
.as-form[b-scurelssmg] {
display: grid;
gap: 14px;
padding: 22px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}
.as-form h2[b-scurelssmg] {
margin: 0;
font-size: .95rem;
font-weight: 900;
color: #334155;
}
.as-areas[b-scurelssmg] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.as-area[b-scurelssmg] {
display: grid;
justify-items: start;
gap: 3px;
padding: 14px;
border: 2px solid rgba(15, 23, 42, .12);
border-radius: 12px;
background: #fff;
text-align: left;
transition: border-color .15s ease, box-shadow .15s ease;
}
.as-area:hover[b-scurelssmg] { border-color: rgba(124, 58, 237, .5); }
.as-area.on[b-scurelssmg] {
border-color: #7c3aed;
background: #faf5ff;
box-shadow: 0 8px 20px rgba(124, 58, 237, .15);
}
.as-area-icone[b-scurelssmg] { font-size: 1.4rem; }
.as-area strong[b-scurelssmg] { font-size: .92rem; color: #1e293b; }
.as-area small[b-scurelssmg] { font-size: .72rem; color: #64748b; }
.as-form input[b-scurelssmg] {
padding: 11px 12px;
border: 1px solid rgba(15, 23, 42, .16);
border-radius: 9px;
font-size: .92rem;
}
.as-erro[b-scurelssmg] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid #fecdd3;
border-radius: 8px;
background: #fff1f2;
color: #9f1239;
font-size: .84rem;
font-weight: 700;
}
.as-pagar[b-scurelssmg] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-size: 1rem;
font-weight: 900;
box-shadow: 0 12px 26px rgba(124, 58, 237, .3);
}
.as-pagar:disabled[b-scurelssmg] { opacity: .7; }
.as-nota[b-scurelssmg] {
margin: 0;
text-align: center;
color: #94a3b8;
font-size: .76rem;
}
@media (max-width: 560px) {
.as-areas[b-scurelssmg] { grid-template-columns: 1fr; }
}
/* canal de entrega + passos WhatsApp (17/07) */
.as-canais[b-scurelssmg] {
display: flex;
gap: 8px;
}
.as-canais button[b-scurelssmg] {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
border: 1px solid rgba(15, 23, 42, .14);
border-radius: 9px;
background: #f8fafc;
font-size: .85rem;
font-weight: 800;
color: #64748b;
}
.as-canais button.on[b-scurelssmg] {
border-color: #7c3aed;
background: #f5f3ff;
color: #6d28d9;
}
.as-canal-dica[b-scurelssmg] {
margin: 0;
font-size: .8rem;
color: #15803d;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.as-wa-passos[b-scurelssmg] {
display: grid;
gap: 10px;
padding: 14px;
border: 1.5px solid rgba(22, 163, 74, .35);
border-radius: 11px;
background: #f0fdf4;
}
.as-wa-passos strong[b-scurelssmg] { color: #14532d; font-size: .9rem; }
.as-passo[b-scurelssmg] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
border-radius: 10px;
font-size: .95rem;
font-weight: 900;
text-decoration: none;
}
.as-passo.zap[b-scurelssmg] { background: #16a34a; color: #fff; }
.as-passo.pix[b-scurelssmg] { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }
.as-passo:hover[b-scurelssmg] { color: #fff; }
.as-check[b-scurelssmg] {
display: flex;
align-items: center;
gap: 10px;
}
.as-check input[type="checkbox"][b-scurelssmg] { width: 18px; height: 18px; accent-color: #16a34a; }
.as-check span[b-scurelssmg] { font-size: .86rem; color: #334155; font-weight: 700; }
.as-check i[b-scurelssmg] { color: #16a34a; }
.as-form h2 small[b-scurelssmg] { font-weight: 600; color: #94a3b8; font-size: .74rem; }
.as-aviso-ia[b-scurelssmg] {
margin: 0;
padding: 10px 12px;
border: 1px solid #fde68a;
border-radius: 9px;
background: #fffbeb;
color: #92400e;
font-size: .78rem;
line-height: 1.5;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-a0sgqoum65] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-a0sgqoum65] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-a0sgqoum65] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-a0sgqoum65] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-a0sgqoum65] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-a0sgqoum65] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-a0sgqoum65 20s linear infinite;
}
@keyframes particles-b-a0sgqoum65 { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-a0sgqoum65] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-a0sgqoum65] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-a0sgqoum65] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-a0sgqoum65] { color: var(--gp-latao); }
.hero .subtitle[b-a0sgqoum65] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-a0sgqoum65] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-a0sgqoum65] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-a0sgqoum65] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-a0sgqoum65] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-a0sgqoum65] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-a0sgqoum65] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-a0sgqoum65] { text-align: center; }
.proof-number[b-a0sgqoum65] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-a0sgqoum65] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-a0sgqoum65] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-a0sgqoum65] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-a0sgqoum65] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-a0sgqoum65] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-a0sgqoum65] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-a0sgqoum65] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-a0sgqoum65] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-a0sgqoum65] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-a0sgqoum65] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-a0sgqoum65] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-a0sgqoum65] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-a0sgqoum65] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-a0sgqoum65] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-a0sgqoum65] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-a0sgqoum65] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-a0sgqoum65] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-a0sgqoum65] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-a0sgqoum65] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-a0sgqoum65] { max-width: 720px; margin: 0 auto; }
.faq-item[b-a0sgqoum65] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-a0sgqoum65] { border-color: var(--gp-vermelho); }
.faq-question[b-a0sgqoum65] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-a0sgqoum65]::-webkit-details-marker { display: none; }
.faq-question i[b-a0sgqoum65] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-a0sgqoum65] { transform: rotate(180deg); }
.faq-answer[b-a0sgqoum65] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-a0sgqoum65] { max-width: 900px; }
.seo-text p[b-a0sgqoum65] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-a0sgqoum65] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-a0sgqoum65]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-a0sgqoum65] { position: relative; z-index: 1; }
.cta-title[b-a0sgqoum65] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-a0sgqoum65] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-a0sgqoum65] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-a0sgqoum65] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
.aa-page[b-8um6r3hwy5] {
max-width: 980px;
margin: 0 auto;
padding: 28px 16px 60px;
display: grid;
gap: 34px;
}
/* ===== hero ===== */
.aa-hero[b-8um6r3hwy5] {
text-align: center;
padding: 40px 20px;
border-radius: 18px;
color: #fff;
background:
radial-gradient(circle at 15% 20%, rgba(253, 230, 138, .18), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(56, 189, 248, .22), transparent 45%),
linear-gradient(135deg, var(--gp-vermelho) 0%, var(--gp-vermelho-fundo) 55%, var(--gp-salvia-forte) 130%);
box-shadow: 0 24px 48px rgba(76, 29, 149, .25);
}
.aa-kicker[b-8um6r3hwy5] { color: var(--gp-creme);
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: .74rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.aa-hero h1[b-8um6r3hwy5] {
margin: 14px auto 0;
max-width: 640px;
font-size: clamp(1.7rem, 4.5vw, 2.6rem);
font-weight: 900;
line-height: 1.15;
}
.aa-hero h1 em[b-8um6r3hwy5] {
font-style: normal;
color: var(--gp-latao);
}
.aa-hero p[b-8um6r3hwy5] {
max-width: 560px;
margin: 12px auto 0;
font-size: 1rem;
color: var(--gp-creme);
}
/* ===== faixa de confiança ===== */
.aa-trust[b-8um6r3hwy5] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 22px;
}
.aa-trust-item[b-8um6r3hwy5] {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .9rem;
font-weight: 700;
color: var(--gp-tinta);
}
.aa-trust-item i[b-8um6r3hwy5] {
color: var(--gp-salvia-forte);
}
/* ===== urgência ===== */
.aa-urgencia[b-8um6r3hwy5] {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: 14px 20px;
font-weight: 700;
color: var(--gp-kicker);
background: var(--gp-papel);
border: 1px solid var(--gp-latao);
border-radius: 12px;
}
.aa-urgencia i[b-8um6r3hwy5] {
color: var(--gp-kicker);
margin-right: 6px;
}
/* ===== como funciona + prova social ===== */
.aa-como h3[b-8um6r3hwy5],
.aa-prova h3[b-8um6r3hwy5] {
text-align: center;
font-size: 1.35rem;
font-weight: 800;
color: var(--gp-tinta);
margin-bottom: 18px;
}
.aa-passos[b-8um6r3hwy5],
.aa-prova-grid[b-8um6r3hwy5] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.aa-passo[b-8um6r3hwy5] {
padding: 22px 20px;
background: var(--gp-papel-claro);
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 14px;
box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.aa-passo-n[b-8um6r3hwy5] {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--gp-vermelho);
color: #fff;
font-weight: 800;
margin-bottom: 10px;
}
.aa-passo h4[b-8um6r3hwy5] {
font-size: 1.05rem;
font-weight: 800;
color: var(--gp-tinta);
margin-bottom: 4px;
}
.aa-passo p[b-8um6r3hwy5] {
font-size: .92rem;
color: var(--gp-tinta-media);
line-height: 1.5;
}
.aa-prova-item[b-8um6r3hwy5] {
display: grid;
gap: 6px;
padding: 22px 20px;
background: var(--gp-papel-claro);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 14px;
text-align: center;
}
.aa-prova-item i[b-8um6r3hwy5] {
font-size: 1.6rem;
color: var(--gp-salvia-forte);
}
.aa-prova-item strong[b-8um6r3hwy5] {
font-size: 1.02rem;
color: var(--gp-tinta);
}
.aa-prova-item span[b-8um6r3hwy5] {
font-size: .9rem;
color: var(--gp-tinta-media);
line-height: 1.5;
}
@media (max-width: 680px) {
.aa-passos[b-8um6r3hwy5],
.aa-prova-grid[b-8um6r3hwy5] {
grid-template-columns: 1fr;
}
}
/* ===== cards ===== */
.aa-cards[b-8um6r3hwy5] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.aa-card[b-8um6r3hwy5] {
display: grid;
gap: 10px;
align-content: start;
padding: 26px 24px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 16px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
transition: transform .18s ease, box-shadow .18s ease;
}
.aa-card:hover[b-8um6r3hwy5] {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
}
.aa-card.destaque[b-8um6r3hwy5] {
border: 2px solid var(--gp-vermelho-fundo);
position: relative;
}
.aa-card.breve[b-8um6r3hwy5] {
opacity: .82;
}
.aa-card-icone[b-8um6r3hwy5] {
font-size: 2rem;
}
.aa-card h2[b-8um6r3hwy5] {
margin: 0;
font-size: 1.3rem;
font-weight: 900;
color: var(--gp-tinta);
}
.aa-card-sub[b-8um6r3hwy5] {
margin: -6px 0 0;
color: var(--gp-vermelho-fundo);
font-size: .85rem;
font-weight: 800;
}
.aa-card ul[b-8um6r3hwy5] {
margin: 4px 0 0;
padding: 0 0 0 2px;
list-style: none;
display: grid;
gap: 7px;
}
.aa-card ul li[b-8um6r3hwy5] {
position: relative;
padding-left: 24px;
color: var(--gp-tinta-media);
font-size: .9rem;
}
.aa-card ul li[b-8um6r3hwy5]::before {
content: "✓";
position: absolute;
left: 0;
color: var(--gp-salvia-forte);
font-weight: 900;
}
.aa-preco[b-8um6r3hwy5] {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 8px;
}
.aa-preco small[b-8um6r3hwy5] {
color: var(--gp-tinta-media);
font-size: .78rem;
}
.aa-preco strong[b-8um6r3hwy5] {
font-size: 1.7rem;
font-weight: 900;
color: var(--gp-tinta);
}
.aa-btn[b-8um6r3hwy5] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 6px;
padding: 13px 20px;
border-radius: 10px;
background: linear-gradient(135deg, var(--gp-vermelho-fundo), var(--gp-vermelho));
color: #fff;
font-size: .95rem;
font-weight: 850;
text-decoration: none;
box-shadow: 0 10px 22px rgba(124, 58, 237, .3);
transition: transform .15s ease;
}
.aa-btn:hover[b-8um6r3hwy5] {
transform: translateY(-2px);
color: #fff;
}
.aa-btn.desab[b-8um6r3hwy5] {
background: var(--gp-linha);
color: var(--gp-tinta-media);
box-shadow: none;
cursor: default;
}
/* ===== faq ===== */
.aa-faq[b-8um6r3hwy5] {
display: grid;
gap: 8px;
}
.aa-faq h3[b-8um6r3hwy5] {
margin: 0 0 4px;
font-size: 1.1rem;
font-weight: 900;
color: var(--gp-tinta);
}
.aa-faq details[b-8um6r3hwy5] {
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 10px;
background: var(--gp-papel-claro);
padding: 12px 16px;
}
.aa-faq summary[b-8um6r3hwy5] {
cursor: pointer;
font-weight: 800;
font-size: .92rem;
color: var(--gp-tinta);
}
.aa-faq p[b-8um6r3hwy5] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: .88rem;
}
.aa-faq a[b-8um6r3hwy5] {
color: var(--gp-vermelho-fundo);
font-weight: 700;
}
@media (max-width: 720px) {
.aa-cards[b-8um6r3hwy5] {
grid-template-columns: 1fr;
}
}
/* ===== Captura na correção de atividade (celular do professor) — tema roxo =====
Mesmo visual da captura de redação; CSS isolado por componente. */
.cap-fundo[b-ue4rreteov] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(147, 51, 234, .3), transparent 60%),
linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
}
.cap-card[b-ue4rreteov] {
position: relative;
overflow: hidden;
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-ue4rreteov .4s ease backwards;
}
@keyframes capSubir-b-ue4rreteov {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.cap-logo[b-ue4rreteov] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #9333ea, #3b0764);
box-shadow: 0 12px 26px rgba(124, 58, 237, .35);
}
.cap-card h1[b-ue4rreteov] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-ue4rreteov] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-ue4rreteov] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #7c3aed, #9333ea);
box-shadow: 0 14px 30px rgba(124, 58, 237, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-ue4rreteov] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-ue4rreteov] { opacity: .6; cursor: wait; }
.cap-botao-foto[b-ue4rreteov]  input[type="file"] { display: none; }
.cap-progresso[b-ue4rreteov] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #faf5ff;
border: 1px solid #ddd6fe;
color: #6d28d9;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-ue4rreteov] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(124, 58, 237, .25);
border-top-color: #7c3aed;
animation: capGirar-b-ue4rreteov .8s linear infinite;
}
@keyframes capGirar-b-ue4rreteov {
to { transform: rotate(360deg); }
}
.cap-gab-ok[b-ue4rreteov] {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #ddd6fe;
text-align: left;
}
.cap-gab-ok > strong[b-ue4rreteov] { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .95rem; }
.cap-gab-ok .cap-sub[b-ue4rreteov] { margin: 6px 0 0; }
.cap-erro[b-ue4rreteov] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 11px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .87rem;
font-weight: 700;
}
.cap-card[b-ue4rreteov]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #9333ea, #3b0764) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-ue4rreteov]::before { width: 50%; height: 50%; }
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-mu2zkd92yt] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-mu2zkd92yt] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-mu2zkd92yt] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-mu2zkd92yt] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-mu2zkd92yt] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-mu2zkd92yt] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-mu2zkd92yt 20s linear infinite;
}
@keyframes particles-b-mu2zkd92yt { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-mu2zkd92yt] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-mu2zkd92yt] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-mu2zkd92yt] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-mu2zkd92yt] { color: var(--gp-latao); }
.hero .subtitle[b-mu2zkd92yt] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-mu2zkd92yt] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-mu2zkd92yt] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-mu2zkd92yt] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-mu2zkd92yt] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-mu2zkd92yt] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-mu2zkd92yt] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-mu2zkd92yt] { text-align: center; }
.proof-number[b-mu2zkd92yt] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-mu2zkd92yt] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-mu2zkd92yt] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-mu2zkd92yt] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-mu2zkd92yt] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-mu2zkd92yt] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-mu2zkd92yt] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-mu2zkd92yt] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-mu2zkd92yt] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-mu2zkd92yt] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-mu2zkd92yt] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-mu2zkd92yt] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-mu2zkd92yt] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-mu2zkd92yt] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-mu2zkd92yt] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-mu2zkd92yt] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-mu2zkd92yt] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-mu2zkd92yt] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-mu2zkd92yt] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-mu2zkd92yt] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-mu2zkd92yt] { max-width: 720px; margin: 0 auto; }
.faq-item[b-mu2zkd92yt] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-mu2zkd92yt] { border-color: var(--gp-vermelho); }
.faq-question[b-mu2zkd92yt] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-mu2zkd92yt]::-webkit-details-marker { display: none; }
.faq-question i[b-mu2zkd92yt] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-mu2zkd92yt] { transform: rotate(180deg); }
.faq-answer[b-mu2zkd92yt] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-mu2zkd92yt] { max-width: 900px; }
.seo-text p[b-mu2zkd92yt] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-mu2zkd92yt] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-mu2zkd92yt]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-mu2zkd92yt] { position: relative; z-index: 1; }
.cta-title[b-mu2zkd92yt] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-mu2zkd92yt] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-mu2zkd92yt] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-mu2zkd92yt] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-n9xjwj3bj4] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-n9xjwj3bj4] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-n9xjwj3bj4]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-n9xjwj3bj4] {
position: relative;
z-index: 1;
}
.lp-badge[b-n9xjwj3bj4] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-n9xjwj3bj4] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-n9xjwj3bj4] {
color: var(--gp-latao);
}
.lp-sub[b-n9xjwj3bj4] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-n9xjwj3bj4] { color: var(--gp-creme); }
.lp-sub.small[b-n9xjwj3bj4] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-n9xjwj3bj4] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-n9xjwj3bj4] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-n9xjwj3bj4] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-n9xjwj3bj4] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-n9xjwj3bj4] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-n9xjwj3bj4] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-n9xjwj3bj4] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-n9xjwj3bj4] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-n9xjwj3bj4] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-n9xjwj3bj4] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-n9xjwj3bj4] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-n9xjwj3bj4] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-n9xjwj3bj4] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-n9xjwj3bj4]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-n9xjwj3bj4] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-n9xjwj3bj4]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-n9xjwj3bj4] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-n9xjwj3bj4] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-n9xjwj3bj4] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-n9xjwj3bj4] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-n9xjwj3bj4] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-n9xjwj3bj4] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-n9xjwj3bj4] {
padding: 24px;
}
.lp-step-num[b-n9xjwj3bj4] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-n9xjwj3bj4] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-n9xjwj3bj4] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-n9xjwj3bj4] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-n9xjwj3bj4] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-n9xjwj3bj4] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-n9xjwj3bj4] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-n9xjwj3bj4] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-n9xjwj3bj4] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-n9xjwj3bj4] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-n9xjwj3bj4]::-webkit-details-marker { display: none; }
.lp-faq summary[b-n9xjwj3bj4]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-n9xjwj3bj4]::after { transform: rotate(180deg); }
.lp-faq p[b-n9xjwj3bj4] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-n9xjwj3bj4] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-n9xjwj3bj4] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-n9xjwj3bj4] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-n9xjwj3bj4] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-n9xjwj3bj4] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-n9xjwj3bj4] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-n9xjwj3bj4] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-n9xjwj3bj4] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-n9xjwj3bj4],
.lp-steps[b-n9xjwj3bj4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-n9xjwj3bj4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-n9xjwj3bj4] { padding: 24px 22px; }
.lp-hero h1[b-n9xjwj3bj4] { font-size: 1.7rem; }
.lp-features[b-n9xjwj3bj4],
.lp-steps[b-n9xjwj3bj4],
.lp-stats[b-n9xjwj3bj4] { grid-template-columns: 1fr; }
.lp-proof[b-n9xjwj3bj4] { gap: 22px; }
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-fpvjacvxrv] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-fpvjacvxrv] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-fpvjacvxrv]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-fpvjacvxrv] {
position: relative;
z-index: 1;
}
.lp-badge[b-fpvjacvxrv] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-fpvjacvxrv] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-fpvjacvxrv] {
color: var(--gp-latao);
}
.lp-sub[b-fpvjacvxrv] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-fpvjacvxrv] { color: var(--gp-creme); }
.lp-sub.small[b-fpvjacvxrv] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-fpvjacvxrv] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-fpvjacvxrv] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-fpvjacvxrv] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-fpvjacvxrv] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-fpvjacvxrv] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-fpvjacvxrv] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-fpvjacvxrv] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-fpvjacvxrv] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-fpvjacvxrv] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-fpvjacvxrv] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-fpvjacvxrv] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-fpvjacvxrv] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-fpvjacvxrv] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-fpvjacvxrv]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-fpvjacvxrv] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-fpvjacvxrv]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-fpvjacvxrv] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-fpvjacvxrv] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-fpvjacvxrv] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-fpvjacvxrv] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-fpvjacvxrv] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-fpvjacvxrv] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-fpvjacvxrv] {
padding: 24px;
}
.lp-step-num[b-fpvjacvxrv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-fpvjacvxrv] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-fpvjacvxrv] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-fpvjacvxrv] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-fpvjacvxrv] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-fpvjacvxrv] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-fpvjacvxrv] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-fpvjacvxrv] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-fpvjacvxrv] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-fpvjacvxrv] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-fpvjacvxrv]::-webkit-details-marker { display: none; }
.lp-faq summary[b-fpvjacvxrv]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-fpvjacvxrv]::after { transform: rotate(180deg); }
.lp-faq p[b-fpvjacvxrv] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-fpvjacvxrv] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-fpvjacvxrv] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-fpvjacvxrv] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-fpvjacvxrv] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-fpvjacvxrv] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-fpvjacvxrv] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-fpvjacvxrv] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-fpvjacvxrv] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-fpvjacvxrv],
.lp-steps[b-fpvjacvxrv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-fpvjacvxrv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-fpvjacvxrv] { padding: 24px 22px; }
.lp-hero h1[b-fpvjacvxrv] { font-size: 1.7rem; }
.lp-features[b-fpvjacvxrv],
.lp-steps[b-fpvjacvxrv],
.lp-stats[b-fpvjacvxrv] { grid-template-columns: 1fr; }
.lp-proof[b-fpvjacvxrv] { gap: 22px; }
}
/* Mesma paleta do blogpost.css do legado — tema escuro do artigo.
.post-fundo preenche 100% do espaço de conteúdo (já exclui a barra lateral,
que fica fora deste container) — o texto continua centrado em 780px dentro. */
.post-fundo[b-bkyoqoy7l1] {
width: 100%;
background: var(--gp-papel);
}
.post-layout[b-bkyoqoy7l1] {
max-width: 1200px;
margin: 0 auto;
padding: 0 18px 30px;
display: grid;
grid-template-columns: 1fr;
gap: 26px;
align-items: start;
}
@media (min-width: 900px) {
.post-layout[b-bkyoqoy7l1] {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
.post[b-bkyoqoy7l1] {
min-width: 0;
max-width: 780px;
padding: 32px 0 40px;
color: var(--gp-tinta);
}
@media (min-width: 900px) {
.post[b-bkyoqoy7l1] {
padding: 50px 0 40px;
}
}
/* ---- Barra lateral do artigo ---- */
.post-side[b-bkyoqoy7l1] {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 900px) {
.post-side[b-bkyoqoy7l1] {
position: sticky;
top: 20px;
padding-top: 50px;
}
}
.side-box[b-bkyoqoy7l1] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha);
border-radius: 16px;
padding: 18px;
}
.side-box h3[b-bkyoqoy7l1] {
font-size: .95rem;
font-weight: 800;
color: var(--gp-tinta);
margin: 0 0 13px;
display: flex;
align-items: center;
gap: 8px;
}
.side-box h3 i[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
}
.side-link-list[b-bkyoqoy7l1] {
display: flex;
flex-direction: column;
gap: 9px;
}
.side-link-item[b-bkyoqoy7l1] {
display: block;
text-decoration: none;
padding: 10px 12px;
border-radius: 11px;
background: var(--gp-linha);
border: 1px solid var(--gp-linha);
transition: all .2s;
}
.side-link-item:hover[b-bkyoqoy7l1] {
border-color: rgba(178, 58, 46, .28);
background: rgba(178, 58, 46, .08);
}
.side-link-title[b-bkyoqoy7l1] {
display: block;
color: var(--gp-tinta);
font-size: .86rem;
font-weight: 700;
line-height: 1.35;
}
.side-link-meta[b-bkyoqoy7l1] {
display: block;
color: var(--gp-tinta-fraca);
font-size: .74rem;
margin-top: 4px;
}
/* Breadcrumb */
.post-breadcrumb[b-bkyoqoy7l1] {
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
color: var(--gp-tinta-media);
margin-bottom: 20px;
}
.post-breadcrumb a[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
text-decoration: none;
}
.post-breadcrumb i[b-bkyoqoy7l1] {
font-size: .7rem;
}
/* Cabeçalho */
.post-cat[b-bkyoqoy7l1] {
display: inline-block;
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gp-vermelho);
background: rgba(178, 58, 46, .15);
padding: 4px 12px;
border-radius: 12px;
margin-bottom: 14px;
}
.post-title[b-bkyoqoy7l1] {
font-size: 2.2rem;
font-weight: 800;
color: var(--gp-tinta);
line-height: 1.2;
margin: 0 0 18px;
}
.post-meta[b-bkyoqoy7l1] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: .85rem;
color: var(--gp-tinta-media);
padding-bottom: 24px;
border-bottom: 1px solid var(--gp-linha);
margin-bottom: 28px;
}
.post-author[b-bkyoqoy7l1] {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--gp-tinta);
}
.avatar[b-bkyoqoy7l1] {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo));
color: #fff;
font-size: .72rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.post-meta .dot[b-bkyoqoy7l1] {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--gp-papel-claro);
}
/* Capa */
.post-capa[b-bkyoqoy7l1] {
border-radius: 16px;
overflow: hidden;
margin-bottom: 32px;
}
.post-capa img[b-bkyoqoy7l1] {
width: 100%;
display: block;
}
/* Conteúdo do artigo */
.post-conteudo[b-bkyoqoy7l1] {
font-size: 1.06rem;
line-height: 1.8;
color: var(--gp-tinta);
}
.post-conteudo[b-bkyoqoy7l1]  h2 {
font-size: 1.4rem;
font-weight: 800;
color: var(--gp-tinta);
margin: 34px 0 14px;
}
.post-conteudo[b-bkyoqoy7l1]  h3 {
font-size: 1.18rem;
font-weight: 700;
color: var(--gp-tinta);
margin: 26px 0 12px;
}
.post-conteudo[b-bkyoqoy7l1]  p {
margin-bottom: 18px;
}
.post-conteudo[b-bkyoqoy7l1]  ul,
.post-conteudo[b-bkyoqoy7l1]  ol {
margin: 0 0 18px;
padding-left: 22px;
}
.post-conteudo[b-bkyoqoy7l1]  li {
margin-bottom: 8px;
}
.post-conteudo[b-bkyoqoy7l1]  a {
color: var(--gp-vermelho);
text-decoration: underline;
}
.post-conteudo[b-bkyoqoy7l1]  strong {
color: var(--gp-tinta);
font-weight: 700;
}
.post-conteudo[b-bkyoqoy7l1]  img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 20px 0;
}
.post-conteudo[b-bkyoqoy7l1]  blockquote {
border-left: 3px solid var(--gp-vermelho);
background: rgba(178, 58, 46, .06);
padding: 14px 18px;
margin: 22px 0;
color: var(--gp-tinta-media);
border-radius: 0 12px 12px 0;
font-style: italic;
}
.post-conteudo[b-bkyoqoy7l1]  code {
background: var(--gp-linha);
color: var(--gp-tinta-media);
padding: 2px 6px;
border-radius: 4px;
font-size: .9em;
}
.post-conteudo[b-bkyoqoy7l1]  pre {
background: var(--gp-linha);
color: var(--gp-tinta-media);
padding: 16px 18px;
border-radius: 12px;
overflow-x: auto;
margin: 20px 0;
}
.post-conteudo[b-bkyoqoy7l1]  table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
display: block;
overflow-x: auto;
}
.post-conteudo[b-bkyoqoy7l1]  th,
.post-conteudo[b-bkyoqoy7l1]  td {
border: 1px solid var(--gp-linha);
padding: 10px 12px;
text-align: left;
}
/* Conteúdo colado pode trazer cor/fundo claro — força tudo legível no tema escuro,
igual ao legado (regra "!important" proposital: HTML de post vem de fonte externa). */
.post-conteudo[b-bkyoqoy7l1]  * {
background-color: transparent !important;
background-image: none !important;
}
.post-conteudo[b-bkyoqoy7l1]  p,
.post-conteudo[b-bkyoqoy7l1]  li,
.post-conteudo[b-bkyoqoy7l1]  span,
.post-conteudo[b-bkyoqoy7l1]  td {
color: var(--gp-tinta) !important;
}
/* Tags */
.post-tags[b-bkyoqoy7l1] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 36px 0;
padding-top: 24px;
border-top: 1px solid var(--gp-linha);
}
.tag-pill[b-bkyoqoy7l1] {
font-size: .82rem;
color: var(--gp-tinta-media);
background: var(--gp-linha);
border: 1px solid var(--gp-linha);
border-radius: 14px;
padding: 5px 14px;
}
/* Relacionados */
.post-relacionados[b-bkyoqoy7l1] {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--gp-linha);
}
.post-relacionados h2[b-bkyoqoy7l1] {
font-size: 1.4rem;
font-weight: 800;
color: var(--gp-tinta);
margin-bottom: 20px;
}
.rel-grid[b-bkyoqoy7l1] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.related-card[b-bkyoqoy7l1] {
display: block;
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha);
border-radius: 14px;
padding: 18px;
text-decoration: none;
transition: box-shadow .18s, transform .18s;
}
.related-card:hover[b-bkyoqoy7l1] {
border-color: rgba(178, 58, 46, .25);
transform: translateY(-2px);
}
.related-card-cat[b-bkyoqoy7l1] {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
color: var(--gp-vermelho);
margin-bottom: 8px;
}
.related-card-title[b-bkyoqoy7l1] {
font-size: 1rem;
font-weight: 700;
color: var(--gp-tinta);
line-height: 1.3;
margin-bottom: 10px;
}
.related-card-meta[b-bkyoqoy7l1] {
font-size: .78rem;
color: var(--gp-tinta-fraca);
}
/* 404 */
.post-404[b-bkyoqoy7l1] {
max-width: 520px;
margin: 0 auto;
padding: 80px 20px;
text-align: center;
color: var(--gp-tinta-media);
}
.post-404 i[b-bkyoqoy7l1] {
font-size: 3rem;
color: var(--gp-tinta-fraca);
display: block;
margin-bottom: 16px;
}
.post-404 h1[b-bkyoqoy7l1] {
font-size: 1.6rem;
font-weight: 800;
color: var(--gp-tinta);
margin-bottom: 8px;
}
.post-404-back[b-bkyoqoy7l1] {
display: inline-block;
margin-top: 18px;
background: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo));
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 10px 24px;
border-radius: 10px;
}
@media (max-width: 560px) {
.post-title[b-bkyoqoy7l1] {
font-size: 1.7rem;
}
}
/* ---- Newsletter (sidebar) ---- */
.side-box-news[b-bkyoqoy7l1] {
background: linear-gradient(160deg, rgba(178, 58, 46, .16), rgba(178, 58, 46, .08));
border-color: rgba(178, 58, 46, .3);
box-shadow: 0 8px 28px rgba(76, 29, 149, .22);
padding: 22px 20px;
position: relative;
overflow: hidden;
}
/* Brilho difuso no canto: dá profundidade ao card sem pedir imagem nenhuma. */
.side-box-news[b-bkyoqoy7l1]::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 160px;
height: 160px;
background: radial-gradient(circle, rgba(178, 58, 46, .35), transparent 70%);
pointer-events: none;
}
.side-box-news h3[b-bkyoqoy7l1] {
font-size: 1rem;
margin-bottom: 8px;
position: relative;
}
.side-box-news h3 i[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
}
.news-desc[b-bkyoqoy7l1] {
font-size: .82rem;
color: var(--gp-tinta-media);
margin: 0 0 14px;
line-height: 1.5;
}
/* ===== POR QUE ::deep AQUI =====
O CSS isolado do Blazor só marca com o atributo de escopo o HTML escrito
DIRETAMENTE neste .razor. O <form> vem do componente EditForm e o <input> do
InputText, então nenhum dos dois recebe a marca — e as regras .news-form /
.news-input nunca aplicaram nada (campo ficava sem borda, sem raio e sem
recuo; era esse o "formulário feio"). ::deep parte de um ancestral marcado
(.side-box-news, .post-comentarios, que são <div> nativos) e alcança os
filhos renderizados por componentes. */
.side-box-news[b-bkyoqoy7l1]  .news-form {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Rótulo acima do campo: ícone e texto fora da caixa, então nada se sobrepõe
ao que a pessoa digita (o ícone dentro do input exigia recuo, e era esse
recuo que não aplicava). */
.campo[b-bkyoqoy7l1] {
display: flex;
flex-direction: column;
gap: 6px;
}
.campo-label[b-bkyoqoy7l1] {
display: flex;
align-items: center;
gap: 6px;
font-size: .78rem;
font-weight: 600;
color: var(--gp-tinta-media);
letter-spacing: .2px;
}
.campo-label i[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
font-size: .85rem;
}
.campo-opcional[b-bkyoqoy7l1] {
font-weight: 400;
color: var(--gp-tinta-fraca);
}
.side-box-news[b-bkyoqoy7l1]  .news-input {
width: 100%;
box-sizing: border-box;
background: var(--gp-linha);
border: 1px solid var(--gp-linha);
border-radius: 14px;
padding: 12px 16px;
color: var(--gp-tinta);
font-size: .88rem;
font-family: inherit;
/* inset = campo "afundado" no card; a transição é pro estado de foco abaixo */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.side-box-news[b-bkyoqoy7l1]  .news-input:focus {
outline: none;
background: var(--gp-linha);
border-color: rgba(178, 58, 46, .75);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(178, 58, 46, .22);
}
.side-box-news[b-bkyoqoy7l1]  .news-input::placeholder {
color: var(--gp-tinta-fraca);
}
.news-submit[b-bkyoqoy7l1] {
background: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo));
color: #fff;
border: none;
border-radius: 14px;
padding: 12px 16px;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
box-shadow: 0 6px 16px rgba(178, 58, 46, .38);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.news-submit:hover:not(:disabled)[b-bkyoqoy7l1] {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 10px 22px rgba(178, 58, 46, .5);
}
.news-submit:disabled[b-bkyoqoy7l1] {
opacity: .6;
cursor: default;
box-shadow: none;
}
/* Aviso do double opt-in: a pessoa precisa saber que ainda falta confirmar no
e-mail, senão acha que já está inscrita e o cadastro morre em PENDENTE. */
.news-hint[b-bkyoqoy7l1] {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: .76rem;
line-height: 1.55;
color: var(--gp-tinta-media);
background: var(--gp-linha);
border: 1px solid var(--gp-linha);
border-radius: 12px;
padding: 12px 14px;
margin: 16px 0 0;
position: relative;
}
.news-hint i[b-bkyoqoy7l1] {
color: rgba(178, 58, 46, .9);
flex-shrink: 0;
margin-top: 1px;
}
.news-msg[b-bkyoqoy7l1] {
font-size: .78rem;
margin: 10px 0 0;
line-height: 1.4;
}
.news-msg.ok[b-bkyoqoy7l1] {
color: var(--gp-salvia-forte);
}
.news-msg.erro[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
}
/* ---- Comentários ---- */
.post-comentarios[b-bkyoqoy7l1] {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--gp-linha);
}
.post-comentarios h2[b-bkyoqoy7l1] {
font-size: 1.4rem;
font-weight: 800;
color: var(--gp-tinta);
margin-bottom: 20px;
}
.comment-form[b-bkyoqoy7l1] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha);
border-radius: 16px;
padding: 22px;
margin-bottom: 26px;
}
.comment-form-row[b-bkyoqoy7l1] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
@media (max-width: 560px) {
.comment-form-row[b-bkyoqoy7l1] {
grid-template-columns: 1fr;
}
}
/* Mesmo tratamento visual dos campos da newsletter (ver .news-input): campo
afundado no card + anel roxo no foco. Os dois formulários da página pedem
dado da mesma forma, então têm que parecer a mesma coisa.
::deep pelo mesmo motivo explicado lá em cima — InputText/InputTextArea são
componentes e não recebem o atributo de escopo. */
.post-comentarios[b-bkyoqoy7l1]  .comment-input,
.post-comentarios[b-bkyoqoy7l1]  .comment-textarea {
background: var(--gp-linha);
border: 1px solid var(--gp-linha);
border-radius: 14px;
padding: 12px 16px;
color: var(--gp-tinta);
font-size: .9rem;
font-family: inherit;
width: 100%;
box-sizing: border-box;
resize: vertical;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-comentarios[b-bkyoqoy7l1]  .comment-input:focus,
.post-comentarios[b-bkyoqoy7l1]  .comment-textarea:focus {
outline: none;
background: var(--gp-linha);
border-color: rgba(178, 58, 46, .75);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(178, 58, 46, .22);
}
.post-comentarios[b-bkyoqoy7l1]  .comment-input::placeholder,
.post-comentarios[b-bkyoqoy7l1]  .comment-textarea::placeholder {
color: var(--gp-tinta-fraca);
}
.comment-form-footer[b-bkyoqoy7l1] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
margin-top: 10px;
}
.comment-msg[b-bkyoqoy7l1] {
font-size: .82rem;
}
.comment-msg.ok[b-bkyoqoy7l1] {
color: var(--gp-salvia-forte);
}
.comment-msg.erro[b-bkyoqoy7l1] {
color: var(--gp-vermelho);
}
.comment-submit[b-bkyoqoy7l1] {
background: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo));
color: #fff;
border: none;
border-radius: 14px;
padding: 12px 22px;
font-weight: 700;
font-size: .88rem;
cursor: pointer;
box-shadow: 0 6px 16px rgba(178, 58, 46, .38);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.comment-submit:hover:not(:disabled)[b-bkyoqoy7l1] {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 10px 22px rgba(178, 58, 46, .5);
}
.comment-submit:disabled[b-bkyoqoy7l1] {
opacity: .6;
cursor: default;
box-shadow: none;
}
.comment-submit:disabled[b-bkyoqoy7l1] {
opacity: .6;
cursor: default;
}
.comment-list[b-bkyoqoy7l1] {
display: flex;
flex-direction: column;
gap: 16px;
}
.comment-item[b-bkyoqoy7l1] {
padding-bottom: 16px;
border-bottom: 1px solid var(--gp-linha);
}
.comment-item-head[b-bkyoqoy7l1] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.comment-author[b-bkyoqoy7l1] {
font-weight: 700;
color: var(--gp-tinta);
font-size: .9rem;
}
.comment-date[b-bkyoqoy7l1] {
font-size: .78rem;
color: var(--gp-tinta-fraca);
}
.comment-texto[b-bkyoqoy7l1] {
font-size: .92rem;
color: var(--gp-tinta);
line-height: 1.6;
margin: 0;
}
.bg-page[b-hmd9ndt7cn] {
display: grid;
gap: 14px;
padding-bottom: 20px;
color: #2b2420;
}
.bg-hero[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
gap: 16px;
align-items: center;
position: relative;
padding: 12px 22px 12px 26px;
border: 1px solid #ddceb0;
border-radius: 4px 18px 18px 4px;
color: #2b2420;
background: #fffcf5;
box-shadow: 0 1px 2px rgba(43,36,32,.05), 0 12px 28px -16px rgba(43,36,32,.2);
overflow: hidden;
}
/* friso de caneta — igual às demais telas (06/08) */
.bg-hero[b-hmd9ndt7cn]::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0; width: 5px;
background: repeating-linear-gradient(180deg, #b23a2e 0 10px, transparent 10px 20px);
opacity: .55;
}
.bg-hero .bg-kicker[b-hmd9ndt7cn] { color: #8f2c22; }
.bg-kicker[b-hmd9ndt7cn] {
color: inherit;
font-size: .72rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .82;
}
.bg-hero h1[b-hmd9ndt7cn],
.bg-section-head h2[b-hmd9ndt7cn] {
margin: 5px 0 0;
font-weight: 950;
letter-spacing: 0;
}
.bg-hero h1[b-hmd9ndt7cn] { margin: 4px 0 0;
max-width: 760px;
font-size: 2rem;
}
.bg-hero p[b-hmd9ndt7cn] {
max-width: 760px;
margin: 5px 0 0;
color: #5b5148;
font-size: 13px;}
.bg-hero-stats[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.bg-hero-stats article[b-hmd9ndt7cn] {
min-height: 64px;
display: grid;
align-content: center;
gap: 5px;
padding: 8px 12px;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fffdf8;
}
.bg-hero-stats span[b-hmd9ndt7cn] {
color: #78695a;
font-size: .72rem;
font-weight: 850;
text-transform: uppercase;
}
.bg-hero-stats strong[b-hmd9ndt7cn] {
font-size: 1.55rem;
line-height: 1;
font-weight: 950;
}
.bg-search-panel[b-hmd9ndt7cn],
.bg-results[b-hmd9ndt7cn],
.bg-builder[b-hmd9ndt7cn] {
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 24px rgba(43, 36, 32, .05);
}
.bg-search-panel[b-hmd9ndt7cn] {
display: grid;
gap: 12px;
padding: 14px;
}
.bg-search-row[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: minmax(0, 1fr) 138px;
gap: 10px;
}
.bg-search-box[b-hmd9ndt7cn] {
position: relative;
display: block;
}
.bg-search-box i[b-hmd9ndt7cn] {
position: absolute;
left: 14px;
top: 50%;
color: #b23a2e;
transform: translateY(-50%);
}
.bg-search-box input[b-hmd9ndt7cn] {
padding-left: 40px;
}
label[b-hmd9ndt7cn] {
display: grid;
gap: 6px;
}
label span[b-hmd9ndt7cn] {
color: #78695a;
font-size: .7rem;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
input[b-hmd9ndt7cn],
select[b-hmd9ndt7cn] {
width: 100%;
min-height: 40px;
padding: 0 11px;
border: 1px solid #ddceb0;
border-radius: 6px;
background: #fff;
color: #2b2420;
font-size: .9rem;
outline: none;
}
input:focus[b-hmd9ndt7cn],
select:focus[b-hmd9ndt7cn] {
border-color: #c9b896;
box-shadow: 0 0 0 3px rgba(178, 58, 46, .16);
}
.bg-primary[b-hmd9ndt7cn],
.bg-ghost[b-hmd9ndt7cn],
.bg-select-btn[b-hmd9ndt7cn] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 0 13px;
border-radius: 6px;
font-size: .83rem;
font-weight: 850;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.bg-primary[b-hmd9ndt7cn] {
border: 0;
color: #fff;
background: linear-gradient(135deg, #b23a2e 0%, #8f2c22 100%);
box-shadow: 0 10px 20px rgba(178, 58, 46, .18);
}
.bg-primary.full[b-hmd9ndt7cn] {
width: 100%;
}
.bg-ghost[b-hmd9ndt7cn] {
border: 1px solid #ddceb0;
color: #8f2c22;
background: #fff;
}
.bg-primary:hover[b-hmd9ndt7cn],
.bg-ghost:hover[b-hmd9ndt7cn],
.bg-select-btn:hover[b-hmd9ndt7cn] {
transform: translateY(-1px);
}
.bg-filter-grid[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.bg-type-strip[b-hmd9ndt7cn] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bg-type-strip button[b-hmd9ndt7cn] {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 12px;
border: 1px solid #ddceb0;
border-radius: 6px;
color: #5b5148;
background: #fffdf8;
font-weight: 850;
}
.bg-type-strip button.is-on[b-hmd9ndt7cn] {
color: #8f2c22;
border-color: #c9b896;
background: #f6ecd3;
}
.bg-message[b-hmd9ndt7cn],
.bg-save-msg[b-hmd9ndt7cn] {
padding: 11px 13px;
border-radius: 8px;
font-weight: 800;
}
.bg-message.ok[b-hmd9ndt7cn],
.bg-save-msg[b-hmd9ndt7cn] {
color: #3e4c31;
border: 1px solid #c9dcb9;
background: #e5ecdc;
}
.bg-message.err[b-hmd9ndt7cn] {
color: #8f2c22;
border: 1px solid #f6e3de;
background: #f6e3de;
}
.bg-workspace[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
gap: 14px;
align-items: start;
}
.bg-results[b-hmd9ndt7cn],
.bg-builder[b-hmd9ndt7cn] {
padding: 14px;
}
.bg-builder[b-hmd9ndt7cn] {
position: sticky;
top: 84px;
display: grid;
gap: 12px;
}
.bg-section-head[b-hmd9ndt7cn] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.bg-section-head .bg-kicker[b-hmd9ndt7cn] {
color: #78695a;
}
.bg-section-head h2[b-hmd9ndt7cn] {
color: #2b2420;
font-size: 1.12rem;
}
.bg-section-head.compact[b-hmd9ndt7cn] {
margin-bottom: 0;
}
.bg-section-head.compact strong[b-hmd9ndt7cn] {
min-width: 42px;
height: 34px;
display: grid;
place-items: center;
border-radius: 8px;
color: #8f2c22;
background: #f6ecd3;
font-size: 1.15rem;
}
.bg-card-list[b-hmd9ndt7cn],
.bg-selected-list[b-hmd9ndt7cn] {
display: grid;
gap: 10px;
}
.bg-result-card[b-hmd9ndt7cn] {
display: grid;
gap: 10px;
padding: 13px;
border: 1px solid #ddceb0;
border-radius: 8px;
background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bg-result-card:hover[b-hmd9ndt7cn],
.bg-result-card.is-selected[b-hmd9ndt7cn] {
border-color: #c9b896;
box-shadow: 0 14px 28px rgba(178, 58, 46, .12);
transform: translateY(-1px);
}
.bg-card-top[b-hmd9ndt7cn],
.bg-tags[b-hmd9ndt7cn],
.bg-meta[b-hmd9ndt7cn] {
display: flex;
align-items: center;
gap: 7px;
}
.bg-card-top[b-hmd9ndt7cn] {
justify-content: space-between;
}
.bg-tags[b-hmd9ndt7cn],
.bg-meta[b-hmd9ndt7cn] {
flex-wrap: wrap;
}
.bg-tag[b-hmd9ndt7cn] {
min-height: 24px;
display: inline-flex;
align-items: center;
padding: 0 8px;
border-radius: 999px;
color: #5b5148;
background: #f4ecdd;
font-size: .72rem;
font-weight: 850;
}
.bg-tag.origin[b-hmd9ndt7cn] {
color: #8f2c22;
background: #f6ecd3;
}
.bg-tag.bncc[b-hmd9ndt7cn] {
color: #3e4c31;
background: #e5ecdc;
}
.bg-select-btn[b-hmd9ndt7cn] {
border: 1px solid #ddceb0;
color: #8f2c22;
background: #fff;
}
.bg-select-btn.is-on[b-hmd9ndt7cn] {
color: #3e4c31;
border-color: #c9dcb9;
background: #e5ecdc;
}
.bg-question[b-hmd9ndt7cn] {
margin: 0;
color: #2b2420;
font-size: .98rem;
line-height: 1.55;
}
.bg-meta[b-hmd9ndt7cn] {
color: #78695a;
font-size: .78rem;
font-weight: 750;
}
.bg-meta span + span[b-hmd9ndt7cn]::before {
margin-right: 7px;
color: #ddceb0;
content: "/";
}
.bg-alts[b-hmd9ndt7cn] {
display: grid;
gap: 6px;
margin: 0;
padding-left: 22px;
color: #5b5148;
font-size: .86rem;
}
.bg-alts li.ok[b-hmd9ndt7cn] {
color: #3e4c31;
font-weight: 850;
}
.bg-answer[b-hmd9ndt7cn] {
display: grid;
gap: 4px;
padding: 10px;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fff;
}
.bg-answer strong[b-hmd9ndt7cn] {
color: #5b5148;
font-size: .76rem;
text-transform: uppercase;
}
.bg-answer span[b-hmd9ndt7cn] {
color: #5b5148;
font-size: .86rem;
line-height: 1.5;
}
.bg-selected-list article[b-hmd9ndt7cn] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 32px;
align-items: center;
gap: 8px;
padding: 9px;
border: 1px solid #ddceb0;
border-radius: 8px;
background: #fffdf8;
}
.bg-selected-list span[b-hmd9ndt7cn] {
color: #8f2c22;
font-size: .78rem;
font-weight: 900;
}
.bg-selected-list p[b-hmd9ndt7cn] {
margin: 0;
color: #5b5148;
font-size: .82rem;
line-height: 1.35;
}
.bg-selected-list button[b-hmd9ndt7cn] {
width: 32px;
height: 32px;
border: 1px solid #f6e3de;
border-radius: 6px;
color: #8f2c22;
background: #fff;
}
.bg-empty[b-hmd9ndt7cn] {
min-height: 220px;
display: grid;
place-items: center;
gap: 8px;
padding: 18px;
text-align: center;
color: #78695a;
border: 1px dashed #ddceb0;
border-radius: 8px;
background: #fffdf8;
}
.bg-empty.compact[b-hmd9ndt7cn] {
min-height: 120px;
}
.bg-empty i[b-hmd9ndt7cn] {
color: #c9b896;
font-size: 2rem;
}
.bg-empty strong[b-hmd9ndt7cn] {
color: #2b2420;
}
@media (max-width: 1180px) {
.bg-hero[b-hmd9ndt7cn],
.bg-workspace[b-hmd9ndt7cn],
.bg-filter-grid[b-hmd9ndt7cn] {
grid-template-columns: 1fr;
}
.bg-builder[b-hmd9ndt7cn] {
position: static;
}
}
@media (max-width: 720px) {
.bg-search-row[b-hmd9ndt7cn],
.bg-hero-stats[b-hmd9ndt7cn] {
grid-template-columns: 1fr;
}
.bg-card-top[b-hmd9ndt7cn],
.bg-section-head[b-hmd9ndt7cn] {
align-items: stretch;
flex-direction: column;
}
}
.bg-filter-grid label[b-hmd9ndt7cn]  .se-wrap { min-width: 0; }
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.bg-result-card[b-hmd9ndt7cn] {
position: relative;
overflow: hidden;
box-shadow: 0 14px 34px rgba(43, 36, 32, .10), 0 2px 6px rgba(43, 36, 32, .04);
}
.bg-result-card[b-hmd9ndt7cn]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: #b23a2e 1;
border-top-right-radius: 8px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.bg-result-card:hover[b-hmd9ndt7cn] {
transform: translateY(-5px);
border-color: #ddceb0;
box-shadow: 0 26px 54px rgba(178, 58, 46, .18), 0 6px 16px rgba(43, 36, 32, .08);
}
.bg-result-card:hover[b-hmd9ndt7cn]::before {
width: 50%;
height: 50%;
}
/* Raio-X + Usar lado a lado (04/07) */
.bg-card-acoes[b-hmd9ndt7cn] { display: flex; gap: .35rem; }
.q-imagem[b-hmd9ndt7cn] {
display: block;
max-width: 100%;
max-height: 320px;
margin: .4rem auto .6rem;
border-radius: 8px;
object-fit: contain;
}
/* Sugestões (tags com miniatura + BNCC com imagem) — 04/07 */
.bg-sugestoes[b-hmd9ndt7cn] {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: .2rem;
border: 1px solid #ddceb0;
border-radius: 10px;
background: #fff;
padding: .35rem;
max-height: 300px;
overflow-y: auto;
}
.bg-sug-item[b-hmd9ndt7cn] {
display: flex;
align-items: center;
gap: .55rem;
border: 0;
background: transparent;
padding: .35rem .45rem;
border-radius: 8px;
cursor: pointer;
text-align: left;
}
.bg-sug-item:hover[b-hmd9ndt7cn] { background: #fffdf8; }
.bg-sug-item img[b-hmd9ndt7cn], .bg-sug-ph[b-hmd9ndt7cn] {
width: 2rem;
height: 2rem;
border-radius: 6px;
object-fit: cover;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f6ecd3;
color: #b23a2e;
flex-shrink: 0;
}
.bg-sug-textos[b-hmd9ndt7cn] { display: flex; flex-direction: column; }
.bg-sug-textos small[b-hmd9ndt7cn] { color: #78695a; }
.bg-sug-item em[b-hmd9ndt7cn] {
margin-left: auto;
font-style: normal;
background: #f6ecd3;
color: #8f2c22;
border-radius: 999px;
padding: .1rem .5rem;
font-size: .74rem;
}
/* Adicionar à prova (azul primário) já adicionada = verde */
.bg-primary.is-on[b-hmd9ndt7cn] {
background: #3e4c31;
box-shadow: 0 10px 20px rgba(5, 150, 105, .18);
}
/* Raio-X da prova na montagem rápida (04/07) */
.bg-ghost.full[b-hmd9ndt7cn] { width: 100%; }
.bg-raiox-prova[b-hmd9ndt7cn] {
border: 1px solid #ddceb0;
border-radius: 10px;
padding: .55rem .65rem;
background: #fffdf8;
display: flex;
flex-direction: column;
gap: .3rem;
}
.bg-rx-linha[b-hmd9ndt7cn] { display: flex; justify-content: space-between; font-size: .83rem; }
.bg-rx-linha span[b-hmd9ndt7cn] { color: #78695a; }
.bg-rx-sub[b-hmd9ndt7cn] {
font-size: .74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
color: #8f2c22;
margin-top: .3rem;
}
.bg-rx-leitura[b-hmd9ndt7cn] { color: #78695a; }
/* Fundo azul-arroxeado suave (mais claro/azulado que o login, pra não brigar
com o header do site) + quadriculado sutil + ícones flutuando decorativos.
width:100% (não 100vw) — 100vw soma a barra de rolagem e causa overflow horizontal. */
.cpf-shell[b-kd879012nj] {
position: relative;
width: 100%;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
gap: 28px;
align-items: start;
padding: 40px clamp(16px, 4vw, 48px) 56px;
background: linear-gradient(160deg, #c9b896 0%, #c9b896 45%, #b23a2e 100%);
}
.cpf-shell[b-kd879012nj]::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 56px 56px;
}
.cpf-deco[b-kd879012nj] {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.cpf-deco i[b-kd879012nj] {
position: absolute;
color: rgba(255, 255, 255, .16);
animation: cpf-float-b-kd879012nj 7s ease-in-out infinite;
}
.cpf-deco i:nth-child(1)[b-kd879012nj] { top: 6%;  left: 5%;  font-size: 2.4rem; animation-delay: 0s; }
.cpf-deco i:nth-child(2)[b-kd879012nj] { top: 70%; left: 9%;  font-size: 1.9rem; animation-delay: 1.2s; }
.cpf-deco i:nth-child(3)[b-kd879012nj] { top: 12%; left: 46%; font-size: 3rem;   animation-delay: .6s; }
.cpf-deco i:nth-child(4)[b-kd879012nj] { top: 80%; left: 40%; font-size: 2.1rem; animation-delay: 2s; }
.cpf-deco i:nth-child(5)[b-kd879012nj] { top: 42%; left: 3%;  font-size: 2.2rem; animation-delay: 1.6s; }
.cpf-deco i:nth-child(6)[b-kd879012nj] { top: 5%;  left: 85%; font-size: 1.9rem; animation-delay: .3s; }
.cpf-deco i:nth-child(7)[b-kd879012nj] { top: 55%; left: 90%; font-size: 2.3rem; animation-delay: 2.4s; }
@keyframes cpf-float-b-kd879012nj {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-16px) rotate(6deg); }
}
.cpf-story[b-kd879012nj] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-top: clamp(4px, 2vw, 20px);
color: #fff;
}
.cpf-brand[b-kd879012nj] {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: 900;
}
.cpf-brand-mark[b-kd879012nj] {
width: 44px;
height: 44px;
display: block;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 24px rgba(20, 15, 55, .22);
}
.cpf-brand-mark img[b-kd879012nj] {
width: 100%;
height: 100%;
object-fit: cover;
}
.cpf-story h1[b-kd879012nj] {
max-width: 420px;
margin: 0;
font-size: clamp(1.55rem, 2.6vw, 2.1rem);
line-height: 1.18;
font-weight: 900;
}
.cpf-features[b-kd879012nj] {
display: grid;
gap: 12px;
max-width: 400px;
width: 100%;
}
.cpf-feature[b-kd879012nj] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 1px solid rgba(196, 162, 255, .45);
border-radius: 14px;
background: rgba(178, 58, 46, .38);
backdrop-filter: blur(10px);
font-size: .92rem;
font-weight: 800;
}
.cpf-feature i[b-kd879012nj] {
width: 36px;
height: 36px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 10px;
background: rgba(216, 180, 254, .35);
font-size: 1.05rem;
}
.cpf-panel[b-kd879012nj] {
position: relative;
z-index: 1;
min-width: 0;
}
@media (max-width: 980px) {
.cpf-shell[b-kd879012nj] {
grid-template-columns: 1fr;
}
.cpf-panel[b-kd879012nj] {
order: -1;
}
.cpf-story[b-kd879012nj] {
padding-top: 8px;
}
}
.cpf-page[b-kd879012nj] {
width: min(980px, 100%);
margin: 0 auto;
display: grid;
gap: 12px;
}
.cpf-hero[b-kd879012nj] {
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-radius: 16px;
color: #fff;
background: linear-gradient(135deg, #b23a2e 0%, #8f2c22 100%);
}
.cpf-kicker[b-kd879012nj] {
display: block;
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cpf-hero h1[b-kd879012nj] {
margin: 4px 0 0;
font-size: 2rem;
font-weight: 900;
}
.cpf-hero p[b-kd879012nj] {
margin: 5px 0 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.92);
}
.cpf-link[b-kd879012nj] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 10px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 800;
}
.cpf-msg[b-kd879012nj] {
min-height: 40px;
display: flex;
align-items: center;
padding: 0 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
}
.cpf-msg.ok[b-kd879012nj] {
color: #3e4c31;
border: 1px solid #c9dcb9;
background: #e5ecdc;
}
.cpf-msg.err[b-kd879012nj] {
color: #8f2c22;
border: 1px solid #f6e3de;
background: #f6e3de;
}
.cpf-form[b-kd879012nj] {
border: 1px solid #ddceb0;
border-radius: 14px;
background: #fff;
padding: 14px;
}
.cpf-step[b-kd879012nj] {
display: flex;
gap: 10px;
align-items: center;
margin: 4px 0 12px;
}
.cpf-step strong[b-kd879012nj] {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
color: #fff;
background: linear-gradient(135deg, #b23a2e 0%, #8f2c22 100%);
font-size: 14px;
}
.cpf-step h2[b-kd879012nj] {
margin: 0;
color: #2b2420;
font-size: 1.05rem;
font-weight: 900;
}
.cpf-step p[b-kd879012nj] {
margin: 2px 0 0;
color: #78695a;
font-size: 13px;
}
.cpf-grid[b-kd879012nj] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.cpf-form label[b-kd879012nj] {
display: block;
margin-bottom: 0;
}
.cpf-form label span[b-kd879012nj] {
display: block;
margin-bottom: 6px;
color: #78695a;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.cpf-hint[b-kd879012nj] {
display: block;
margin-top: 4px;
color: #46618f;
font-size: 11px;
font-weight: 700;
text-transform: none;
}
.cpf-form input[b-kd879012nj],
.cpf-form select[b-kd879012nj] {
width: 100%;
min-height: 42px;
border: 1px solid #ddceb0;
border-radius: 10px;
padding: 0 10px;
color: #2b2420;
background: #fff;
font-size: 14px;
font-family: inherit;
}
.cpf-form button[b-kd879012nj] {
min-height: 42px;
padding: 0 14px;
border: 0;
border-radius: 10px;
color: #fff;
background: linear-gradient(135deg, #b23a2e 0%, #8f2c22 100%);
font-size: 13px;
font-weight: 900;
}
.cpf-escola-label span em[b-kd879012nj] {
color: #78695a;
font-style: normal;
font-weight: 700;
text-transform: none;
}
.cpf-escola[b-kd879012nj] {
position: relative;
}
.cpf-escola-lista[b-kd879012nj] {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 260px;
overflow-y: auto;
border: 1px solid #ddceb0;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 28px rgba(43, 36, 32, 0.12);
}
.cpf-escola-item[b-kd879012nj] {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #f4ecdd;
}
.cpf-escola-item:last-child[b-kd879012nj] {
border-bottom: 0;
}
.cpf-escola-item:hover[b-kd879012nj] {
background: #fffdf8;
}
.cpf-escola-item strong[b-kd879012nj] {
display: block;
color: #2b2420;
font-size: 13px;
font-weight: 800;
}
.cpf-escola-item small[b-kd879012nj] {
display: block;
color: #78695a;
font-size: 12px;
}
.cpf-escola-chips[b-kd879012nj] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.cpf-escola-chip[b-kd879012nj] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 6px 6px 12px;
border-radius: 999px;
background: #f6ecd3;
width: fit-content;
}
/* .cpf-form label span (rótulo em maiúsculas) tem MAIS especificidade (label+span)
que um seletor de classe único — precisa repetir "label" aqui pra vencer o empate. */
.cpf-form label .cpf-escola-chip span[b-kd879012nj] {
display: inline;
margin-bottom: 0;
text-transform: none;
color: #8f2c22;
font-size: 12px;
font-weight: 800;
}
.cpf-escola-chip button[b-kd879012nj] {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: transparent;
color: #8f2c22;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.cpf-escola-chip button:hover[b-kd879012nj] {
background: rgba(143, 44, 34, 0.15);
}
@media (max-width: 900px) {
.cpf-hero[b-kd879012nj] {
flex-direction: column;
align-items: start;
}
.cpf-grid[b-kd879012nj] {
grid-template-columns: 1fr;
}
}
/* Cadastro com Google (mesmo visual do botão do Login, CSS isolado aqui). */
/* Rotulo do caminho rapido: 22 dos ultimos 23 cadastros vieram por aqui. */
.cpf-rapido[b-kd879012nj] {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 18px 0 0;
color: #3e4c31;
font-size: .84rem;
font-weight: 900;
letter-spacing: .01em;
}
/* 56px (era 48) e fonte maior: no celular, que e de onde vem o trafego pago,
o botao precisa ser a primeira coisa que o polegar encontra. */
.cpf-google[b-kd879012nj] {
width: 100%;
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 13px;
font-size: 1.02rem;
font-weight: 900;
text-decoration: none;
color: #241d19;
border: 2px solid #ddceb0;
background: #fff;
margin-top: 10px;
box-shadow: 0 2px 8px rgba(21, 20, 38, .07);
}
.cpf-google:hover[b-kd879012nj] {
border-color: #ddceb0;
background: #fdf8ee;
}
.cpf-google-dot[b-kd879012nj] {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
font-size: .76rem;
font-weight: 900;
}
.cpf-facebook[b-kd879012nj] {
color: #fff;
border: 0;
background: #1877f2;
margin-top: 10px;
}
.cpf-facebook:hover[b-kd879012nj] {
border-color: transparent;
background: #46618f;
}
.cpf-facebook-dot[b-kd879012nj] {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: #fff;
font-size: 1.15rem;
line-height: 1;
}
.cpf-ou[b-kd879012nj] {
display: flex;
align-items: center;
text-align: center;
color: #78695a;
font-size: .82rem;
margin: 16px 0 4px;
gap: 12px;
}
.cpf-ou[b-kd879012nj]::before,
.cpf-ou[b-kd879012nj]::after {
content: "";
flex: 1;
height: 1px;
background: #e8dcc0;
}
/* ===== "Você já tem conta" (db/124, 20/07) =====
Substitui o aviso vermelho morto "este e-mail já possui cadastro". Quem cai
aqui costuma ser cliente querendo pagar — o painel é acolhedor de propósito e
leva pro login+planos, em vez de tratar o cara como erro de formulário. */
.cpf-jatem[b-kd879012nj] {
display: flex;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
padding: 18px 20px;
margin-bottom: 18px;
border: 1px solid #ddceb0;
border-radius: 16px;
background: linear-gradient(135deg, #f6ecd3, #fdf8ee);
}
.cpf-jatem-ico[b-kd879012nj] {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: #b23a2e;
color: #fff;
font-size: 1.25rem;
flex: none;
}
.cpf-jatem-txt[b-kd879012nj] {
flex: 1 1 260px;
display: grid;
gap: 3px;
}
.cpf-jatem-txt strong[b-kd879012nj] {
color: #2b2420;
font-size: 1rem;
}
.cpf-jatem-txt span[b-kd879012nj] {
color: #8f2c22;
font-size: .89rem;
line-height: 1.5;
}
.cpf-jatem-acoes[b-kd879012nj] {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.cpf-jatem-btn[b-kd879012nj] {
display: inline-flex;
align-items: center;
padding: 11px 20px;
border-radius: 11px;
background: #b23a2e;
color: #fff;
font-weight: 800;
font-size: .92rem;
text-decoration: none;
white-space: nowrap;
}
.cpf-jatem-btn:hover[b-kd879012nj] { filter: brightness(1.06); }
.cpf-jatem-link[b-kd879012nj] {
color: #b23a2e;
font-weight: 700;
font-size: .86rem;
text-decoration: none;
white-space: nowrap;
}
.cpf-jatem-link:hover[b-kd879012nj] { text-decoration: underline; }
/* ===== Cadastro concluído — tela própria, centralizada, celebrando de verdade
(antes era uma linha verde discreta em cima do formulário vazio). Substitui
TODO o painel (form + botões Google/Facebook) quando sucesso=true. */
.cpf-sucesso[b-kd879012nj] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 48px 32px;
margin: 12px 0;
border: 1px solid #c9dcb9;
border-radius: 18px;
background: #e5ecdc;
}
.cpf-sucesso-ico[b-kd879012nj] {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #5f7350, #3e4c31);
color: #fff;
font-size: 2rem;
box-shadow: 0 10px 28px rgba(5, 150, 105, .35);
margin-bottom: 4px;
}
.cpf-sucesso h2[b-kd879012nj] {
margin: 0;
font-size: 1.4rem;
font-weight: 900;
color: #3e4c31;
}
.cpf-sucesso p[b-kd879012nj] {
margin: 0 0 6px;
max-width: 420px;
font-size: .95rem;
line-height: 1.5;
color: #3e4c31;
}
/* A escola ficou sozinha na etapa 2 (30/07 — serie/materia sairam daqui e foram pro
aceite dos termos). Sozinha num grid de 2 colunas ela sumia; borda mais grossa e
indigo devolve o peso de campo que vale a pena preencher. */
.cpf-escola input[b-kd879012nj] {
border-width: 2px !important;
border-color: #ddceb0 !important;
}
.cpf-escola input:focus[b-kd879012nj] {
border-color: #b23a2e !important;
box-shadow: 0 0 0 3px rgba(178, 58, 46, .14);
outline: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
NAVEGADOR EMBUTIDO (Instagram / Facebook) — 05/08/2026
Medido no Clarity: 341 sessões/semana chegam nesta tela dentro do app da
Meta, e ela abandona 79%. O Google recusa OAuth em webview embutido, então
"Cadastrar com o Google" simplesmente não faz nada ali — sem erro visível.
Regra: dentro do app, o botão do Google SOME e entra um aviso. O do Facebook
FICA (funciona dentro do webview da própria Meta) e o formulário de e-mail
continua logo abaixo, como sempre.
Tudo por CSS a partir do atributo que o navegador-embutido.js põe no <html>:
não depende de render do Blazor e não pisca o botão antes de escondê-lo.
═══════════════════════════════════════════════════════════════════════════ */
/* Fora de navegador embutido, nada disto existe. */
.cpf-inapp[b-kd879012nj] { display: none; }
/* Dentro do app do Instagram/Facebook: SEM aviso, sem alarme (fundador 05/08 —
caixa amarela assusta cliente). Só o botão do Google some, que é o que não
funciona ali, e entra um convite discreto. A pessoa não fica sabendo que
faltou nada: vê Facebook, e-mail e a opção de abrir no navegador. */
/* SÓ no Android. No iPhone a Apple não deixa sair do webview por código, então
lá não aparece botão nenhum (fundador 05/08: "tira o botão onde não
funciona"). O iOS fica com Facebook + e-mail, sem nada quebrado na tela. */
html[data-inapp][data-inapp-so="android"] .cpf-inapp[b-kd879012nj] {
display: flex;
justify-content: center;
margin: 0 0 14px;
}
/* O botão do Google sai — o Google recusa OAuth em webview embutido.
`:not(.cpf-facebook)` porque o do Facebook reusa a mesma classe base. */
html[data-inapp] .cpf-google:not(.cpf-facebook)[b-kd879012nj] { display: none; }
.cpf-inapp-btn[b-kd879012nj] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border: 1px solid #ddceb0;
border-radius: 10px;
background: #fff;
color: #5b5148;
font-size: .83rem;
font-weight: 600;
cursor: pointer;
}
.cpf-inapp-btn:hover[b-kd879012nj] { background: #fffdf8; border-color: #a89c8c; color: #2b2420; }
/* ===== Captura do cartão-resposta (celular) =====
Cópia das classes .cap-* da ProvaFisicaCaptura.razor.css: é a MESMA casca de
captura, e o App.razor pinta .cap-fundo/.cap-card inline enquanto o CSS carrega
sem bloquear (EhCapturaMovel). Se o valor mudar lá, mudar aqui e no inline.
CSS isolado não atravessa componente — por isso as regras vêm copiadas, não
compartilhadas. */
.cap-fundo[b-xo3r8x0osz] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(16, 185, 129, .3), transparent 60%),
linear-gradient(135deg, #0f766e 0%, #059669 100%);
}
.cap-card[b-xo3r8x0osz] {
position: relative;
overflow: hidden;
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-xo3r8x0osz .4s ease backwards;
}
@keyframes capSubir-b-xo3r8x0osz {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* grampo arredondado + elevação no hover: card padrão do site */
.cap-card[b-xo3r8x0osz]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-xo3r8x0osz] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.cap-card:hover[b-xo3r8x0osz]::before {
width: 50%;
height: 50%;
}
.cap-logo[b-xo3r8x0osz] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #0f766e, #059669);
box-shadow: 0 12px 26px rgba(5, 150, 105, .35);
}
.cap-card h1[b-xo3r8x0osz] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-xo3r8x0osz] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-xo3r8x0osz] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #0f766e, #10b981);
box-shadow: 0 14px 30px rgba(5, 150, 105, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-xo3r8x0osz] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-xo3r8x0osz] { opacity: .6; cursor: wait; }
/* input NATIVO (não é o <InputFile> do Blazor): fica escondido dentro do label */
.cap-botao-foto input[type="file"][b-xo3r8x0osz] {
display: none;
}
.cap-progresso[b-xo3r8x0osz] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #047857;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-xo3r8x0osz] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(5, 150, 105, .25);
border-top-color: #059669;
animation: capGirar-b-xo3r8x0osz .8s linear infinite;
}
@keyframes capGirar-b-xo3r8x0osz {
to { transform: rotate(360deg); }
}
.cap-resultado[b-xo3r8x0osz] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 10px;
padding: 11px 14px;
border-radius: 11px;
font-size: .87rem;
font-weight: 700;
}
.cap-resultado.ok[b-xo3r8x0osz] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.cap-resultado.erro[b-xo3r8x0osz] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cap-resultado i[b-xo3r8x0osz] { margin-top: 1px; }
/* Contagem do modo PROFESSOR: ele fotografa a turma toda e precisa saber quantos
já foram sem sair da tela. No modo ALUNO isto não existe — ele manda um só. */
.cap-contagem[b-xo3r8x0osz] {
display: flex;
align-items: center;
gap: 9px;
margin-top: 14px;
padding: 12px 15px;
border-radius: 12px;
background: #f0fdfa;
border: 1px solid #99f6e4;
color: #115e59;
font-size: .88rem;
font-weight: 750;
}
.cap-contagem b[b-xo3r8x0osz] { font-size: 1rem; }
/* "preparando o envio": honesto — o input é nativo e a foto tirada antes da
conexão fica guardada (sessionStorage) e sobe quando o circuito arma. */
.cap-conectando[b-xo3r8x0osz] {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 0;
color: #475569;
font-size: .82rem;
font-weight: 600;
}
.cf-page[b-8jnq6ezyyc] { min-height: 70vh; display: grid; place-items: center; padding: 24px 16px; }
.cf-card[b-8jnq6ezyyc] { width: 100%; max-width: 400px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 16px 40px rgba(15,23,42,.08); padding: 32px 28px; text-align: center; display: grid; gap: 12px; }
.cf-icone[b-8jnq6ezyyc] { font-size: 2.2rem; background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-card h1[b-8jnq6ezyyc] { margin: 0; font-size: 1.5rem; color: #0f172a; }
.cf-card p[b-8jnq6ezyyc] { margin: 0; color: #64748b; }
.cf-campo[b-8jnq6ezyyc] { width: 100%; min-height: 64px; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .18em; border: 2px solid #ddd6fe; border-radius: 14px; color: #0f172a; }
.cf-campo:focus[b-8jnq6ezyyc] { outline: 0; border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
.cf-erro[b-8jnq6ezyyc] { margin: 0; color: #b91c1c; font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cf-entrar[b-8jnq6ezyyc] { min-height: 50px; border: 0; border-radius: 12px; font-size: 1.05rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); cursor: pointer; }
.cf-entrar:disabled[b-8jnq6ezyyc] { opacity: .5; cursor: default; }
.cf-card small[b-8jnq6ezyyc] { color: #94a3b8; }
/* PALETA CADERNO (08/08/2026): pagina era ESCURA; as variaveis locais abaixo sao
o unico lugar onde a superficie e definida, entao remapea-las vira a pagina
inteira. Texto claro so sobrevive dentro de .hero/.cta-section (a capa). */
.seo-page[b-sswtn99mol] {
--primary-gradient: var(--gp-capa);
--dark-gradient: var(--gp-papel);
--glass-border: 1px solid var(--gp-creme-linha);
--text-light: var(--gp-tinta);
--primary-purple: var(--gp-vermelho);
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--dark-gradient);
color: var(--text-light);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-sswtn99mol] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-sswtn99mol] { text-align: center; }
/* HERO */
.hero[b-sswtn99mol] {
color: var(--gp-creme);
min-height: 60vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
background: var(--primary-gradient);
}
.hero-background[b-sswtn99mol] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 50%),
var(--primary-gradient);
}
.particles-bg[b-sswtn99mol] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-papel-claro), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-linha), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-papel-claro), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-papel-claro), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-linha), transparent);
background-size: 200px 100px;
animation: particles-b-sswtn99mol 20s linear infinite;
}
@keyframes particles-b-sswtn99mol { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-sswtn99mol] {
position: relative; z-index: 2; text-align: center;
max-width: 900px; padding: 70px 20px 40px;
}
.hero-badge[b-sswtn99mol] {
display: inline-block; color: var(--gp-creme); background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: var(--glass-border);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-sswtn99mol] {
font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
.hero h1 .highlight[b-sswtn99mol] { color: var(--gp-latao); }
.hero .subtitle[b-sswtn99mol] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-sswtn99mol] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn-primary-glow[b-sswtn99mol] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(255, 215, 0, 0.35); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-sswtn99mol] { color: var(--gp-capa); transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(255, 215, 0, 0.5); }
.btn-secondary-glass[b-sswtn99mol] {
background: var(--gp-linha); backdrop-filter: blur(20px);
border: 1px solid var(--gp-linha); color: var(--gp-tinta);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-sswtn99mol] { color: var(--gp-tinta); background: var(--gp-linha); transform: translateY(-3px); }
.section-title[b-sswtn99mol] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-sswtn99mol] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-sswtn99mol] {
background: var(--gp-linha); backdrop-filter: blur(20px);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
/* GRID DE TUTORIAIS */
.tutoriais-grid[b-sswtn99mol] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.tutorial-card[b-sswtn99mol] {
background: var(--gp-linha); backdrop-filter: blur(12px);
border: 1px solid var(--gp-linha); border-radius: 20px;
overflow: hidden; transition: all 0.4s ease;
}
.tutorial-card:hover[b-sswtn99mol] { transform: translateY(-6px); background: var(--gp-linha); box-shadow: 0 16px 48px rgba(178, 58, 46, 0.2); border-color: var(--gp-linha); }
.tutorial-info[b-sswtn99mol] { padding: 22px 24px 26px; }
.tutorial-info h3[b-sswtn99mol] { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.tutorial-info p[b-sswtn99mol] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.92rem; }
.tutorial-em-breve[b-sswtn99mol] {
aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 10px; background: var(--gp-linha);
color: var(--gp-tinta-fraca); font-weight: 600; font-size: 0.95rem;
}
.tutorial-em-breve i[b-sswtn99mol] { font-size: 2rem; }
.how-section[b-sswtn99mol] { background: var(--dark-gradient); padding: 90px 0; }
.steps-container[b-sswtn99mol] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-sswtn99mol] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
.step-number[b-sswtn99mol] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(178, 58, 46, 0.4);
}
.step-item h4[b-sswtn99mol] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.step-item p[b-sswtn99mol] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-sswtn99mol] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-sswtn99mol] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-tinta-fraca); padding: 0 4px; }
}
.faq-section[b-sswtn99mol] { background: var(--gp-linha); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-sswtn99mol] { max-width: 720px; margin: 0 auto; }
.faq-item[b-sswtn99mol] {
background: var(--gp-linha); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-sswtn99mol] { border-color: var(--gp-linha); }
.faq-question[b-sswtn99mol] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
}
.faq-question[b-sswtn99mol]::-webkit-details-marker { display: none; }
.faq-question i[b-sswtn99mol] { transition: transform 0.3s ease; font-size: 0.9rem; opacity: 0.5; }
.faq-item[open] .faq-question i[b-sswtn99mol] { transform: rotate(180deg); }
.faq-answer[b-sswtn99mol] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-sswtn99mol] { max-width: 900px; }
.seo-text p[b-sswtn99mol] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
.cta-section[b-sswtn99mol] { background: var(--primary-gradient); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-sswtn99mol]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-creme-linha) 0%, transparent 70%);
}
.cta-content[b-sswtn99mol] { position: relative; z-index: 1; }
.cta-title[b-sswtn99mol] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; }
.cta-subtitle[b-sswtn99mol] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
/* "Este computador é compartilhado" — opt-out da sessão persistente.
Gêmeo do mesmo controle na ConfirmarMagicLink; o CSS isolado do Blazor é por
componente, então a regra precisa existir aqui também. */
.cml-compartilhado[b-eo3e0yq1bz] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
color: #64748b;
font-size: .82rem;
cursor: pointer;
}
.cml-compartilhado input[b-eo3e0yq1bz] {
accent-color: #4f46e5;
cursor: pointer;
}
.cml-shell[b-0lwrnplijt] {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
padding: 24px;
}
.cml-card[b-0lwrnplijt] {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(79, 70, 229, .12);
padding: 44px 40px;
max-width: 420px;
width: 100%;
text-align: center;
}
.cml-logo[b-0lwrnplijt] {
height: 48px;
border-radius: 10px;
margin-bottom: 18px;
}
.cml-icone[b-0lwrnplijt] {
font-size: 2.4rem;
color: #4f46e5;
display: block;
margin-bottom: 10px;
}
.cml-icone-erro[b-0lwrnplijt] {
color: #dc2626;
}
.cml-card h1[b-0lwrnplijt] {
font-size: 1.35rem;
color: #1e293b;
margin: 0 0 8px;
}
.cml-card p[b-0lwrnplijt] {
color: #475569;
font-size: .95rem;
line-height: 1.6;
margin: 0 0 22px;
}
.cml-btn[b-0lwrnplijt] {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
border: none;
border-radius: 50px;
padding: 13px 34px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.cml-btn:hover[b-0lwrnplijt] {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(79, 70, 229, .35);
}
.cml-btn-sec[b-0lwrnplijt] {
background: #eef2ff;
color: #4f46e5;
}
.cml-card small[b-0lwrnplijt] {
display: block;
margin-top: 16px;
color: #94a3b8;
font-size: .78rem;
}
/* "Este computador é compartilhado" — opt-out da sessão persistente. */
.cml-compartilhado[b-0lwrnplijt] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
color: #64748b;
font-size: .82rem;
cursor: pointer;
}
.cml-compartilhado input[b-0lwrnplijt] {
accent-color: #4f46e5;
cursor: pointer;
}
/* Wizard de aceite (Termos/Política -> Marketing). Toggles são CSS-only
(checkbox :checked) porque a página roda em SSR estático, sem JS. */
/* Centraliza o modal na tela (o .cml-shell/.cml-card não centravam -> ficava no canto). */
.cml-shell[b-tzhk5tik0g] {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: linear-gradient(135deg, #1f0e58 0%, #3b1d8a 60%, #6b3fea 100%);
}
.cml-card[b-tzhk5tik0g] {
background: #fff;
border-radius: 24px;
padding: 30px 28px;
width: 100%;
box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.wz-card[b-tzhk5tik0g] {
max-width: 410px;
text-align: center;
padding-top: 22px;
}
/* ── stepper ── */
.wz-stepper[b-tzhk5tik0g] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 8px;
}
.wz-step[b-tzhk5tik0g] {
display: flex;
align-items: center;
gap: 8px;
}
.wz-dot[b-tzhk5tik0g] {
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: .78rem;
font-weight: 800;
background: #e7e3f5;
color: #8a86a3;
transition: .25s;
}
.wz-step.active .wz-dot[b-tzhk5tik0g] {
background: linear-gradient(135deg, #6d3ff2, #9b6bff);
color: #fff;
box-shadow: 0 6px 16px -4px rgba(109, 63, 242, .6);
}
.wz-step.done .wz-dot[b-tzhk5tik0g] {
background: #16a34a;
color: #fff;
}
.wz-lbl[b-tzhk5tik0g] {
font-size: .78rem;
font-weight: 700;
color: #8a86a3;
}
.wz-step.active .wz-lbl[b-tzhk5tik0g] {
color: #14121f;
}
.wz-bar[b-tzhk5tik0g] {
width: 34px;
height: 2.5px;
border-radius: 2px;
background: #e7e3f5;
}
.wz-bar.fill[b-tzhk5tik0g] {
background: #16a34a;
}
/* ── hero ── */
.wz-hero[b-tzhk5tik0g] {
padding: 12px 4px 6px;
}
.wz-badge[b-tzhk5tik0g] {
width: 62px;
height: 62px;
margin: 2px auto 14px;
border-radius: 20px;
display: grid;
place-items: center;
font-size: 28px;
background: linear-gradient(135deg, #6d3ff2, #9b6bff);
box-shadow: 0 14px 34px -8px rgba(109, 63, 242, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
transform: rotate(-4deg);
}
.wz-pill[b-tzhk5tik0g] {
display: inline-flex;
align-items: center;
gap: 7px;
background: #efeaff;
color: #3a1d94;
padding: 6px 13px;
border-radius: 999px;
font-size: .74rem;
font-weight: 700;
margin-bottom: 10px;
}
.wz-pill.req[b-tzhk5tik0g] {
background: #fdecec;
color: #b42318;
}
.wz-card h1[b-tzhk5tik0g] {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(1.35rem, 4vw, 1.7rem);
line-height: 1.12;
letter-spacing: -.02em;
color: #14121f;
}
.wz-card h1 em[b-tzhk5tik0g] {
color: #6d3ff2;
font-style: italic;
}
.wz-sub[b-tzhk5tik0g] {
color: #8a86a3;
font-size: .9rem;
line-height: 1.55;
margin: 9px auto 0;
max-width: 40ch;
min-height: 66px;
}
/* ── documentos (passo 1) ── */
.wz-docs[b-tzhk5tik0g] {
display: flex;
flex-direction: column;
gap: 10px;
margin: 4px 0 16px;
min-height: 138px;
justify-content: flex-start;
}
.wz-doc[b-tzhk5tik0g] {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 16px;
border: 1.5px solid #e7e3f5;
border-radius: 14px;
color: #14121f;
text-decoration: none;
transition: .16s;
}
.wz-doc:hover[b-tzhk5tik0g] {
border-color: #c9b8ff;
background: #efeaff;
}
.wz-doc > i:first-child[b-tzhk5tik0g] {
font-size: 1.15rem;
color: #6d3ff2;
}
.wz-doc-tx[b-tzhk5tik0g] {
flex: 1;
text-align: left;
font-weight: 700;
font-size: .92rem;
}
.wz-go[b-tzhk5tik0g] {
opacity: .5;
}
/* ── opções marketing (passo 2) — CSS-only toggle, começam DESLIGADAS ── */
.wz-opt[b-tzhk5tik0g] {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 16px;
margin-bottom: 10px;
border: 1.5px solid #e7e3f5;
border-radius: 14px;
cursor: pointer;
transition: .18s;
}
.wz-opt:hover[b-tzhk5tik0g] {
border-color: #c9b8ff;
transform: translateY(-1px);
}
.wz-opt:has(.wz-cb:checked)[b-tzhk5tik0g] {
border-color: #6d3ff2;
background: linear-gradient(120deg, #efeaff, transparent);
}
.wz-cb[b-tzhk5tik0g] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wz-ic[b-tzhk5tik0g] {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 11px;
display: grid;
place-items: center;
font-size: 18px;
background: #efeaff;
transition: .18s;
}
.wz-opt:has(.wz-cb:checked) .wz-ic[b-tzhk5tik0g] {
background: linear-gradient(135deg, #6d3ff2, #9b6bff);
}
.wz-opt-tx[b-tzhk5tik0g] {
flex: 1;
text-align: left;
}
.wz-opt-tx strong[b-tzhk5tik0g] {
display: block;
font-size: .92rem;
font-weight: 700;
color: #14121f;
}
.wz-opt-tx small[b-tzhk5tik0g] {
color: #8a86a3;
font-size: .78rem;
line-height: 1.4;
}
.wz-sw[b-tzhk5tik0g] {
width: 44px;
height: 26px;
border-radius: 999px;
background: #e7e3f5;
position: relative;
transition: .2s;
flex-shrink: 0;
}
.wz-sw[b-tzhk5tik0g]::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
transition: .2s;
}
.wz-opt:has(.wz-cb:checked) .wz-sw[b-tzhk5tik0g] {
background: #6d3ff2;
}
.wz-opt:has(.wz-cb:checked) .wz-sw[b-tzhk5tik0g]::after {
left: 21px;
}
/* ── botão / erro ── */
.wz-card .wz-btn[b-tzhk5tik0g] {
width: 100%;
justify-content: center;
border: none;
margin-top: 8px;
}
/* ── sair (escape: nunca prender o usuário no wizard) ── */
.wz-sair[b-tzhk5tik0g] {
margin: 14px 0 0;
text-align: center;
}
.wz-sair button[b-tzhk5tik0g] {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: none;
padding: 4px 8px;
color: #94a3b8;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
}
.wz-sair button:hover[b-tzhk5tik0g] {
color: #475569;
text-decoration: underline;
}
.wz-erro[b-tzhk5tik0g] {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
border-radius: 10px;
padding: 10px 14px;
font-size: .85rem;
margin: 8px 0 0;
}
/* ===== O QUE VOCÊ ENSINA (30/07) =====
O card do wizard é centralizado; formulário centralizado fica ilegível.
Aqui o bloco volta a alinhar à esquerda e os controles ocupam a largura toda. */
.wz-ensina[b-tzhk5tik0g] {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid rgba(79, 70, 229, .16);
text-align: left;
}
.wz-ensina-tit[b-tzhk5tik0g] {
margin: 0;
font-size: 1.12rem;
font-weight: 800;
color: #1b1733;
text-align: center;
}
.wz-ensina-sub[b-tzhk5tik0g] {
margin: 4px 0 18px;
font-size: .88rem;
color: #5b5772;
text-align: center;
}
.wz-campo[b-tzhk5tik0g] {
display: block;
margin-bottom: 14px;
}
.wz-campo > span[b-tzhk5tik0g] {
display: block;
margin-bottom: 6px;
font-size: .82rem;
font-weight: 700;
color: #1b1733;
}
.wz-campo > span em[b-tzhk5tik0g] {
font-style: normal;
font-weight: 500;
color: #9a96ae;
}
.wz-campo select[b-tzhk5tik0g],
.wz-campo input[type="text"][b-tzhk5tik0g] {
display: block;
width: 100%;
height: 46px;
padding: 0 14px;
border: 1.5px solid #d9dcf5;
border-radius: 10px;
background: #fff;
font-size: .95rem;
font-family: inherit;
color: #1b1733;
appearance: none;
-webkit-appearance: none;
}
/* seta própria: appearance:none tira a nativa e o campo ficaria sem indicação */
.wz-campo select[b-tzhk5tik0g] {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b5772'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 38px;
}
.wz-campo select:focus[b-tzhk5tik0g],
.wz-campo input[type="text"]:focus[b-tzhk5tik0g] {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.wz-campo select:disabled[b-tzhk5tik0g] {
background-color: #f4f5fb;
color: #9a96ae;
cursor: not-allowed;
}
/* o texto de ajuda ficava do LADO do input (bug do print): forçar bloco */
.wz-campo > small[b-tzhk5tik0g] {
display: block;
margin-top: 6px;
font-size: .78rem;
line-height: 1.35;
color: #9a96ae;
}
/* Consentimento discreto (30/07): a estrela da tela é a primeira prova. Opt-in é
opcional e não deve competir visualmente com o que é obrigatório. */
.wz-consent[b-tzhk5tik0g] {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(79, 70, 229, .12);
text-align: left;
}
.wz-consent-tit[b-tzhk5tik0g] {
display: block;
margin-bottom: 8px;
font-size: .8rem;
color: #9a96ae;
}
.wz-consent-op[b-tzhk5tik0g] {
display: inline-flex;
align-items: center;
gap: 7px;
margin-right: 18px;
font-size: .85rem;
color: #5b5772;
cursor: pointer;
}
.wz-consent-op input[b-tzhk5tik0g] {
width: 15px;
height: 15px;
accent-color: #4f46e5;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-bessyafs39] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-bessyafs39] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-bessyafs39]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-bessyafs39] {
position: relative;
z-index: 1;
}
.lp-badge[b-bessyafs39] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-bessyafs39] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-bessyafs39] {
color: var(--gp-latao);
}
.lp-sub[b-bessyafs39] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-bessyafs39] { color: var(--gp-creme); }
.lp-sub.small[b-bessyafs39] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-bessyafs39] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-bessyafs39] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-bessyafs39] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-bessyafs39] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-bessyafs39] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-bessyafs39] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-bessyafs39] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-bessyafs39] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-bessyafs39] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-bessyafs39] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-bessyafs39] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-bessyafs39] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-bessyafs39] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-bessyafs39]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-bessyafs39] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-bessyafs39]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-bessyafs39] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-bessyafs39] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-bessyafs39] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-bessyafs39] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-bessyafs39] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-bessyafs39] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-bessyafs39] {
padding: 24px;
}
.lp-step-num[b-bessyafs39] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-bessyafs39] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-bessyafs39] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-bessyafs39] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-bessyafs39] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-bessyafs39] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-bessyafs39] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-bessyafs39] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-bessyafs39] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-bessyafs39] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-bessyafs39]::-webkit-details-marker { display: none; }
.lp-faq summary[b-bessyafs39]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-bessyafs39]::after { transform: rotate(180deg); }
.lp-faq p[b-bessyafs39] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-bessyafs39] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-bessyafs39] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-bessyafs39] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-bessyafs39] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-bessyafs39] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-bessyafs39] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-bessyafs39] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-bessyafs39] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-bessyafs39],
.lp-steps[b-bessyafs39] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-bessyafs39] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-bessyafs39] { padding: 24px 22px; }
.lp-hero h1[b-bessyafs39] { font-size: 1.7rem; }
.lp-features[b-bessyafs39],
.lp-steps[b-bessyafs39],
.lp-stats[b-bessyafs39] { grid-template-columns: 1fr; }
.lp-proof[b-bessyafs39] { gap: 22px; }
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-dfwfvbgy2c] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-dfwfvbgy2c] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-dfwfvbgy2c]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-dfwfvbgy2c] {
position: relative;
z-index: 1;
}
.lp-badge[b-dfwfvbgy2c] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-dfwfvbgy2c] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-dfwfvbgy2c] {
color: var(--gp-latao);
}
.lp-sub[b-dfwfvbgy2c] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-dfwfvbgy2c] { color: var(--gp-creme); }
.lp-sub.small[b-dfwfvbgy2c] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-dfwfvbgy2c] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-dfwfvbgy2c] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-dfwfvbgy2c] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-dfwfvbgy2c] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-dfwfvbgy2c] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-dfwfvbgy2c] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-dfwfvbgy2c] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-dfwfvbgy2c] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-dfwfvbgy2c] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-dfwfvbgy2c] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-dfwfvbgy2c] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-dfwfvbgy2c] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-dfwfvbgy2c] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-dfwfvbgy2c]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-dfwfvbgy2c] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-dfwfvbgy2c]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-dfwfvbgy2c] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-dfwfvbgy2c] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-dfwfvbgy2c] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-dfwfvbgy2c] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-dfwfvbgy2c] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-dfwfvbgy2c] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-dfwfvbgy2c] {
padding: 24px;
}
.lp-step-num[b-dfwfvbgy2c] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-dfwfvbgy2c] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-dfwfvbgy2c] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-dfwfvbgy2c] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-dfwfvbgy2c] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-dfwfvbgy2c] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-dfwfvbgy2c] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-dfwfvbgy2c] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-dfwfvbgy2c] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-dfwfvbgy2c] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-dfwfvbgy2c]::-webkit-details-marker { display: none; }
.lp-faq summary[b-dfwfvbgy2c]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-dfwfvbgy2c]::after { transform: rotate(180deg); }
.lp-faq p[b-dfwfvbgy2c] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-dfwfvbgy2c] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-dfwfvbgy2c] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-dfwfvbgy2c] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-dfwfvbgy2c] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-dfwfvbgy2c] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-dfwfvbgy2c] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-dfwfvbgy2c] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-dfwfvbgy2c] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-dfwfvbgy2c],
.lp-steps[b-dfwfvbgy2c] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-dfwfvbgy2c] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-dfwfvbgy2c] { padding: 24px 22px; }
.lp-hero h1[b-dfwfvbgy2c] { font-size: 1.7rem; }
.lp-features[b-dfwfvbgy2c],
.lp-steps[b-dfwfvbgy2c],
.lp-stats[b-dfwfvbgy2c] { grid-template-columns: 1fr; }
.lp-proof[b-dfwfvbgy2c] { gap: 22px; }
}
/* ===== Captura de redação (celular do aluno) — tema roxo ===== */
.cap-fundo[b-6unam30cxw] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(147, 51, 234, .3), transparent 60%),
linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
}
.cap-card[b-6unam30cxw] {
position: relative;
overflow: hidden;
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-6unam30cxw .4s ease backwards;
}
@keyframes capSubir-b-6unam30cxw {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.cap-logo[b-6unam30cxw] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #9333ea, #3b0764);
box-shadow: 0 12px 26px rgba(124, 58, 237, .35);
}
.cap-card h1[b-6unam30cxw] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-6unam30cxw] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-6unam30cxw] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #7c3aed, #9333ea);
box-shadow: 0 14px 30px rgba(124, 58, 237, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-6unam30cxw] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-6unam30cxw] { opacity: .6; cursor: wait; }
.cap-botao-foto[b-6unam30cxw]  input[type="file"] { display: none; }
.cap-progresso[b-6unam30cxw] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #faf5ff;
border: 1px solid #ddd6fe;
color: #6d28d9;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-6unam30cxw] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(124, 58, 237, .25);
border-top-color: #7c3aed;
animation: capGirar-b-6unam30cxw .8s linear infinite;
}
@keyframes capGirar-b-6unam30cxw {
to { transform: rotate(360deg); }
}
.cap-gab-ok[b-6unam30cxw] {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #ddd6fe;
text-align: left;
}
.cap-gab-ok > strong[b-6unam30cxw] { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .95rem; }
.cap-gab-ok .cap-sub[b-6unam30cxw] { margin: 6px 0 0; }
.cap-erro[b-6unam30cxw] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 11px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .87rem;
font-weight: 700;
}
.cap-card[b-6unam30cxw]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #9333ea, #3b0764) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-6unam30cxw]::before { width: 50%; height: 50%; }
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-iyo75mc7vg] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-iyo75mc7vg] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-iyo75mc7vg]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-iyo75mc7vg] {
position: relative;
z-index: 1;
}
.lp-badge[b-iyo75mc7vg] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-iyo75mc7vg] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-iyo75mc7vg] {
color: var(--gp-latao);
}
.lp-sub[b-iyo75mc7vg] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-iyo75mc7vg] { color: var(--gp-creme); }
.lp-sub.small[b-iyo75mc7vg] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-iyo75mc7vg] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-iyo75mc7vg] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-iyo75mc7vg] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-iyo75mc7vg] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-iyo75mc7vg] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-iyo75mc7vg] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-iyo75mc7vg] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-iyo75mc7vg] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-iyo75mc7vg] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-iyo75mc7vg] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-iyo75mc7vg] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-iyo75mc7vg] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-iyo75mc7vg] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-iyo75mc7vg]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-iyo75mc7vg] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-iyo75mc7vg]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-iyo75mc7vg] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-iyo75mc7vg] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-iyo75mc7vg] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-iyo75mc7vg] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-iyo75mc7vg] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-iyo75mc7vg] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-iyo75mc7vg] {
padding: 24px;
}
.lp-step-num[b-iyo75mc7vg] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-iyo75mc7vg] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-iyo75mc7vg] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-iyo75mc7vg] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-iyo75mc7vg] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-iyo75mc7vg] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-iyo75mc7vg] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-iyo75mc7vg] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-iyo75mc7vg] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-iyo75mc7vg] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-iyo75mc7vg]::-webkit-details-marker { display: none; }
.lp-faq summary[b-iyo75mc7vg]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-iyo75mc7vg]::after { transform: rotate(180deg); }
.lp-faq p[b-iyo75mc7vg] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-iyo75mc7vg] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-iyo75mc7vg] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-iyo75mc7vg] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-iyo75mc7vg] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-iyo75mc7vg] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-iyo75mc7vg] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-iyo75mc7vg] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-iyo75mc7vg] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-iyo75mc7vg],
.lp-steps[b-iyo75mc7vg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-iyo75mc7vg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-iyo75mc7vg] { padding: 24px 22px; }
.lp-hero h1[b-iyo75mc7vg] { font-size: 1.7rem; }
.lp-features[b-iyo75mc7vg],
.lp-steps[b-iyo75mc7vg],
.lp-stats[b-iyo75mc7vg] { grid-template-columns: 1fr; }
.lp-proof[b-iyo75mc7vg] { gap: 22px; }
}
.es-shell[b-25cuy8gd8k] {
min-height: 60vh;
display: grid;
place-items: center;
padding: 24px 16px;
}
.es-card[b-25cuy8gd8k] {
width: min(520px, 100%);
display: grid;
gap: 14px;
padding: 30px 28px;
border: 1px solid #e2e8f0;
border-radius: 20px;
background: #fff;
box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
text-align: center;
}
.es-icone[b-25cuy8gd8k] {
width: 62px;
height: 62px;
display: grid;
place-items: center;
margin: 0 auto;
border-radius: 18px;
color: #fff;
font-size: 1.6rem;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
}
.es-card h1[b-25cuy8gd8k] { margin: 0; color: #0f172a; font-size: 1.35rem; font-weight: 950; }
.es-card > p[b-25cuy8gd8k], .es-sub[b-25cuy8gd8k] { margin: 0; color: #475569; font-size: .9rem; line-height: 1.5; }
/* ----- formulário do link de acesso (caminho principal) ----- */
.es-field[b-25cuy8gd8k] { text-align: left; }
.es-field label[b-25cuy8gd8k] {
display: block;
color: #475569;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
}
.es-input-wrap[b-25cuy8gd8k] {
position: relative;
display: flex;
align-items: center;
}
.es-input-wrap i[b-25cuy8gd8k] {
position: absolute;
left: 12px;
color: #94a3b8;
font-size: .95rem;
}
/* ::deep é obrigatório aqui: o <input> vem do componente <InputText>, e o CSS
isolado do Blazor NÃO carimba o atributo de escopo em elemento renderizado por
componente filho. Sem isso a regra existe e nunca casa — foi o que deixou o
campo cru com o ícone montado em cima do texto (20/07). Mesmo padrão do Login. */
.es-input-wrap[b-25cuy8gd8k]  .es-input {
width: 100%;
padding: 11px 13px 11px 36px;
border: 1px solid #cbd5e1;
border-radius: 11px;
font-size: .93rem;
color: #0f172a;
background: #fff;
}
.es-input-wrap[b-25cuy8gd8k]  .es-input:focus {
outline: none;
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(129, 140, 248, .18);
}
[b-25cuy8gd8k] .validation-message,
.validation-message[b-25cuy8gd8k] {
display: block;
margin-top: 5px;
color: #dc2626;
font-size: .78rem;
font-weight: 700;
}
.es-submit[b-25cuy8gd8k] {
width: 100%;
margin-top: 14px;
padding: 12px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
font-weight: 800;
font-size: .95rem;
cursor: pointer;
}
.es-submit:hover[b-25cuy8gd8k] { filter: brightness(1.05); }
/* mesmo botão quando é link (telas de "deu certo" / "link venceu") */
.es-submit-link[b-25cuy8gd8k] { text-decoration: none; }
.es-alerta[b-25cuy8gd8k] {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 14px;
border-radius: 11px;
background: #ecfdf5;
color: #065f46;
font-size: .87rem;
text-align: left;
line-height: 1.45;
}
.es-alerta.erro[b-25cuy8gd8k] { background: #fef2f2; color: #991b1b; }
.es-divisor[b-25cuy8gd8k] {
display: flex;
align-items: center;
gap: 12px;
color: #94a3b8;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.es-divisor[b-25cuy8gd8k]::before,
.es-divisor[b-25cuy8gd8k]::after {
content: "";
flex: 1;
height: 1px;
background: #e2e8f0;
}
.es-google[b-25cuy8gd8k] {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 1px solid #e2e8f0;
color: #4285f4;
font-weight: 900;
font-size: .82rem;
margin-top: 2px;
flex: none;
}
.es-opcoes[b-25cuy8gd8k] { display: grid; gap: 10px; text-align: left; }
.es-opcao[b-25cuy8gd8k] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 15px;
border: 1px solid #eef2f7;
border-radius: 13px;
background: #f8fafc;
text-decoration: none;
transition: border-color .14s ease;
}
a.es-opcao:hover[b-25cuy8gd8k] { border-color: #a5b4fc; }
.es-opcao i[b-25cuy8gd8k] { font-size: 1.15rem; color: #7c3aed; margin-top: 2px; }
.es-opcao div[b-25cuy8gd8k] { display: grid; gap: 2px; }
.es-opcao strong[b-25cuy8gd8k] { color: #0f172a; font-size: .88rem; }
.es-opcao span[b-25cuy8gd8k] { color: #64748b; font-size: .8rem; line-height: 1.4; }
.es-voltar[b-25cuy8gd8k] {
justify-self: center;
display: inline-flex;
align-items: center;
gap: 7px;
color: #4f46e5;
font-size: .86rem;
font-weight: 800;
text-decoration: none;
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.es-card[b-25cuy8gd8k] {
position: relative;
overflow: hidden;
}
.es-card[b-25cuy8gd8k]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.es-card:hover[b-25cuy8gd8k] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.es-card:hover[b-25cuy8gd8k]::before {
width: 50%;
height: 50%;
}
.legal[b-ev4eautgxe] {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.7;
}
.legal h1[b-ev4eautgxe] {
font-size: 2rem;
font-weight: 800;
margin-bottom: 8px;
color: #667eea;
}
.legal .updated[b-ev4eautgxe] {
color: #6b7280;
font-size: .85rem;
margin-bottom: 40px;
}
.legal h2[b-ev4eautgxe] {
font-size: 1.15rem;
font-weight: 700;
color: #1f2937;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.legal p[b-ev4eautgxe],
.legal li[b-ev4eautgxe] {
font-size: .95rem;
color: #374151;
margin-bottom: 12px;
}
.legal ul[b-ev4eautgxe] {
padding-left: 20px;
margin-bottom: 16px;
}
.legal li[b-ev4eautgxe] {
margin-bottom: 6px;
}
.legal a[b-ev4eautgxe] {
color: #667eea;
}
.legal .card[b-ev4eautgxe] {
background: #f8f9fc;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
.card-green[b-ev4eautgxe] {
background: rgba(16, 185, 129, 0.06);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
text-align: center;
}
.card-green .cta-title[b-ev4eautgxe] {
color: #1f2937;
font-weight: 600;
margin-bottom: 16px;
}
.step[b-ev4eautgxe] {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 20px;
}
.step-num[b-ev4eautgxe] {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-weight: 800;
font-size: .9rem;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.step-body strong[b-ev4eautgxe] {
display: block;
color: #1f2937;
margin-bottom: 4px;
}
.btn-email[b-ev4eautgxe] {
display: inline-block;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
padding: 12px 28px;
border-radius: 8px;
font-weight: 700;
margin-top: 8px;
}
.badge[b-ev4eautgxe] {
display: inline-block;
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 20px;
padding: 2px 12px;
font-size: .78rem;
font-weight: 600;
margin-left: 8px;
vertical-align: middle;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-uuq3iud0n9] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-uuq3iud0n9] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-uuq3iud0n9] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-uuq3iud0n9] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-uuq3iud0n9] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-uuq3iud0n9] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-uuq3iud0n9 20s linear infinite;
}
@keyframes particles-b-uuq3iud0n9 { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-uuq3iud0n9] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-uuq3iud0n9] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-uuq3iud0n9] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-uuq3iud0n9] { color: var(--gp-latao); }
.hero .subtitle[b-uuq3iud0n9] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-uuq3iud0n9] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-uuq3iud0n9] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-uuq3iud0n9] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-uuq3iud0n9] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-uuq3iud0n9] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-uuq3iud0n9] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-uuq3iud0n9] { text-align: center; }
.proof-number[b-uuq3iud0n9] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-uuq3iud0n9] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-uuq3iud0n9] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-uuq3iud0n9] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-uuq3iud0n9] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-uuq3iud0n9] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-uuq3iud0n9] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-uuq3iud0n9] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-uuq3iud0n9] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-uuq3iud0n9] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-uuq3iud0n9] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-uuq3iud0n9] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-uuq3iud0n9] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-uuq3iud0n9] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-uuq3iud0n9] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-uuq3iud0n9] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-uuq3iud0n9] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-uuq3iud0n9] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-uuq3iud0n9] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-uuq3iud0n9] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-uuq3iud0n9] { max-width: 720px; margin: 0 auto; }
.faq-item[b-uuq3iud0n9] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-uuq3iud0n9] { border-color: var(--gp-vermelho); }
.faq-question[b-uuq3iud0n9] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-uuq3iud0n9]::-webkit-details-marker { display: none; }
.faq-question i[b-uuq3iud0n9] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-uuq3iud0n9] { transform: rotate(180deg); }
.faq-answer[b-uuq3iud0n9] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-uuq3iud0n9] { max-width: 900px; }
.seo-text p[b-uuq3iud0n9] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-uuq3iud0n9] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-uuq3iud0n9]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-uuq3iud0n9] { position: relative; z-index: 1; }
.cta-title[b-uuq3iud0n9] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-uuq3iud0n9] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-uuq3iud0n9] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-uuq3iud0n9] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-u9jj4nsnna] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-u9jj4nsnna] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-u9jj4nsnna]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-u9jj4nsnna] {
position: relative;
z-index: 1;
}
.lp-badge[b-u9jj4nsnna] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-u9jj4nsnna] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-u9jj4nsnna] {
color: var(--gp-latao);
}
.lp-sub[b-u9jj4nsnna] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-u9jj4nsnna] { color: var(--gp-creme); }
.lp-sub.small[b-u9jj4nsnna] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-u9jj4nsnna] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-u9jj4nsnna] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-u9jj4nsnna] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-u9jj4nsnna] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-u9jj4nsnna] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-u9jj4nsnna] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-u9jj4nsnna] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-u9jj4nsnna] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-u9jj4nsnna] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-u9jj4nsnna] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-u9jj4nsnna] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-u9jj4nsnna] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-u9jj4nsnna] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-u9jj4nsnna]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-u9jj4nsnna] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-u9jj4nsnna]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-u9jj4nsnna] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-u9jj4nsnna] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-u9jj4nsnna] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-u9jj4nsnna] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-u9jj4nsnna] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-u9jj4nsnna] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-u9jj4nsnna] {
padding: 24px;
}
.lp-step-num[b-u9jj4nsnna] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-u9jj4nsnna] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-u9jj4nsnna] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-u9jj4nsnna] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-u9jj4nsnna] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-u9jj4nsnna] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-u9jj4nsnna] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-u9jj4nsnna] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-u9jj4nsnna] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-u9jj4nsnna] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-u9jj4nsnna]::-webkit-details-marker { display: none; }
.lp-faq summary[b-u9jj4nsnna]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-u9jj4nsnna]::after { transform: rotate(180deg); }
.lp-faq p[b-u9jj4nsnna] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-u9jj4nsnna] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-u9jj4nsnna] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-u9jj4nsnna] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-u9jj4nsnna] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-u9jj4nsnna] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-u9jj4nsnna] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-u9jj4nsnna] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-u9jj4nsnna] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-u9jj4nsnna],
.lp-steps[b-u9jj4nsnna] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-u9jj4nsnna] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-u9jj4nsnna] { padding: 24px 22px; }
.lp-hero h1[b-u9jj4nsnna] { font-size: 1.7rem; }
.lp-features[b-u9jj4nsnna],
.lp-steps[b-u9jj4nsnna],
.lp-stats[b-u9jj4nsnna] { grid-template-columns: 1fr; }
.lp-proof[b-u9jj4nsnna] { gap: 22px; }
}
.home-video-sec[b-wywis5g3vp] {
margin-top: 22px;
}
.home-video-sec[b-wywis5g3vp]  .gp-video {
max-width: 780px;
margin: 0 auto;
}
/* 2º vídeo (planejamento do bimestre) + atalho pra página de tutoriais */
.home-video-extra[b-wywis5g3vp] {
margin-top: 28px;
}
.home-video-extra h3[b-wywis5g3vp] {
max-width: 780px;
margin: 0 auto 12px;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
text-align: center;
}
.home-video-todos[b-wywis5g3vp] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px auto 0;
padding: 10px 20px;
max-width: 320px;
border: 1.5px solid var(--gp-linha);
border-radius: 999px;
color: var(--gp-vermelho);
font-size: .86rem;
font-weight: 850;
text-decoration: none;
transition: background .14s ease, border-color .14s ease;
}
.home-video-todos:hover[b-wywis5g3vp] {
background: var(--gp-papel);
border-color: var(--gp-vermelho-fundo);
}
.home-hero[b-wywis5g3vp],
.home-stats[b-wywis5g3vp],
.home-workflow[b-wywis5g3vp],
.home-planos[b-wywis5g3vp],
.home-features[b-wywis5g3vp] {
position: relative;
z-index: 1;
}
/* ===== CTA "Ver planos" — card destacado com degradê azul, no meio da landing ===== */
.home-planos[b-wywis5g3vp] {
margin-top: 22px;
}
.home-planos-card[b-wywis5g3vp] {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 28px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(460px 200px at 50% -40%, var(--gp-capa-alta), transparent 60%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.home-planos-card[b-wywis5g3vp]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent);
pointer-events: none;
}
.home-planos-eyebrow[b-wywis5g3vp] {
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
.home-planos-card h2[b-wywis5g3vp] {
position: relative;
z-index: 1;
margin: 6px 0 0;
color: var(--gp-creme);
font-size: 1.7rem;
font-weight: 900;
line-height: 1.1;
}
.home-planos-card p[b-wywis5g3vp] {
position: relative;
z-index: 1;
margin: 8px 0 0;
color: var(--gp-creme-suave);
font-size: 14px;
}
.home-planos-btn[b-wywis5g3vp] {
position: relative;
z-index: 1;
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 32px;
border-radius: 14px;
color: var(--gp-capa);
background: var(--gp-papel-claro);
text-decoration: none;
font-size: 16px;
font-weight: 900;
box-shadow: 0 12px 28px rgba(18, 12, 50, .28);
transition: transform .16s ease, box-shadow .16s ease;
}
.home-planos-btn:hover[b-wywis5g3vp] {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(18, 12, 50, .34);
}
@media (max-width: 760px) {
.home-planos-card[b-wywis5g3vp] {
padding: 26px 20px;
}
.home-planos-card h2[b-wywis5g3vp] {
font-size: 1.35rem;
}
}
.home-hero[b-wywis5g3vp] {
display: grid;
grid-template-columns: minmax(0, 1.2fr) 340px;
gap: 18px;
padding: 14px 28px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 180px at 90% -30%, var(--gp-capa-alta), transparent 58%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
overflow: hidden;
}
.home-hero[b-wywis5g3vp]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent);
pointer-events: none;
}
.home-hero-copy[b-wywis5g3vp],
.home-hero-aside[b-wywis5g3vp] {
position: relative;
z-index: 1;
}
.home-kicker[b-wywis5g3vp],
.home-eyebrow[b-wywis5g3vp] {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.home-kicker[b-wywis5g3vp] {
color: var(--gp-creme-suave);
}
.home-eyebrow[b-wywis5g3vp] {
color: var(--gp-kicker);
}
.home-hero h1[b-wywis5g3vp],
.home-section-head h2[b-wywis5g3vp] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-weight: 900;
letter-spacing: 0;
}
.home-hero h1[b-wywis5g3vp] { margin: 4px 0 0;
max-width: 640px;
color: var(--gp-creme);
font-size: 2rem;
line-height: 1.02;
}
.home-hero p[b-wywis5g3vp] {
max-width: 620px;
margin: 5px 0 0;
color: var(--gp-creme-suave);
font-size: 14px;
line-height: 1.65;
}
.home-actions[b-wywis5g3vp] {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.home-btn[b-wywis5g3vp] {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 26px;
border-radius: 14px;
text-decoration: none;
font-size: 16px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-btn:hover[b-wywis5g3vp] {
transform: translateY(-1px);
}
.home-btn-primary[b-wywis5g3vp] {
color: var(--gp-capa);
background: var(--gp-papel-claro);
box-shadow: 0 10px 24px rgba(18, 12, 50, .2);
}
.home-btn-secondary[b-wywis5g3vp] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
backdrop-filter: blur(10px);
}
.home-hero-aside[b-wywis5g3vp] {
display: flex;
flex-direction: column;
gap: 10px;
}
.home-mini-stat[b-wywis5g3vp] {
padding: 10px 17px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 16px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(12px);
}
.home-mini-stat span[b-wywis5g3vp],
.home-mini-stat small[b-wywis5g3vp] {
display: block;
color: var(--gp-tinta-fraca);
font-size: 12px;
}
.home-mini-stat strong[b-wywis5g3vp] {
display: block;
margin: 8px 0 4px;
font-size: 29px;
line-height: 1;
font-weight: 900;
}
.home-stats[b-wywis5g3vp] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.home-stat-card[b-wywis5g3vp],
.home-step-card[b-wywis5g3vp],
.home-feature-card[b-wywis5g3vp] {
border: 1px solid rgba(178, 58, 46, .14);
border-radius: 20px;
background: rgba(255,255,255,.9);
box-shadow: 0 14px 34px rgba(40, 30, 90, .08);
}
.home-stat-card[b-wywis5g3vp] {
padding: 18px;
}
.home-stat-card span[b-wywis5g3vp],
.home-stat-card small[b-wywis5g3vp] {
display: block;
}
.home-stat-card span[b-wywis5g3vp] {
color: var(--gp-tinta-media);
font-size: 12px;
font-weight: 800;
}
.home-stat-card strong[b-wywis5g3vp] {
display: block;
margin: 10px 0 4px;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.home-stat-card small[b-wywis5g3vp] {
color: var(--gp-tinta-media);
font-size: 12px;
font-weight: 700;
}
.home-workflow[b-wywis5g3vp],
.home-features[b-wywis5g3vp] {
margin-top: 22px;
}
.home-section-head[b-wywis5g3vp] {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin: 0 4px 14px;
}
.home-section-head h2[b-wywis5g3vp] {
margin-top: 6px;
font-size: 1.4rem;
}
.home-section-head a[b-wywis5g3vp] {
color: var(--gp-vermelho);
text-decoration: none;
font-size: .92rem;
font-weight: 900;
white-space: nowrap;
}
.home-steps[b-wywis5g3vp] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.home-step-card[b-wywis5g3vp] {
padding: 20px;
}
.home-step-number[b-wywis5g3vp] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
color: var(--gp-vermelho-fundo);
background: var(--gp-papel);
font-size: 12px;
font-weight: 900;
}
.home-step-card strong[b-wywis5g3vp],
.home-feature-card strong[b-wywis5g3vp] {
display: block;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.home-step-card strong[b-wywis5g3vp] {
margin-top: 14px;
}
.home-step-card p[b-wywis5g3vp],
.home-feature-card p[b-wywis5g3vp] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13px;
line-height: 1.6;
}
.home-feature-grid[b-wywis5g3vp] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.home-feature-card[b-wywis5g3vp] {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 18px;
}
.home-feature-icon[b-wywis5g3vp] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho));
box-shadow: 0 12px 24px rgba(178, 58, 46, .22);
}
@media (max-width: 1100px) {
.home-hero[b-wywis5g3vp] {
grid-template-columns: 1fr;
}
.home-hero-aside[b-wywis5g3vp],
.home-stats[b-wywis5g3vp],
.home-steps[b-wywis5g3vp],
.home-feature-grid[b-wywis5g3vp] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-hero-aside[b-wywis5g3vp] {
display: grid;
}
}
@media (max-width: 760px) {
.home-hero[b-wywis5g3vp] {
padding: 14px 22px;
}
.home-stats[b-wywis5g3vp],
.home-steps[b-wywis5g3vp],
.home-feature-grid[b-wywis5g3vp] {
grid-template-columns: 1fr;
}
.home-feature-card[b-wywis5g3vp] {
grid-template-columns: 46px minmax(0, 1fr);
}
.home-feature-icon[b-wywis5g3vp] {
width: 46px;
height: 46px;
border-radius: 14px;
font-size: 1.15rem;
}
.home-section-head[b-wywis5g3vp] {
flex-direction: column;
align-items: start;
}
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.home-feature-card[b-wywis5g3vp] {
position: relative;
overflow: hidden;
box-shadow: 0 14px 34px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04);
}
.home-feature-card[b-wywis5g3vp]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo)) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.home-feature-card:hover[b-wywis5g3vp] {
transform: translateY(-5px);
border-color: var(--gp-linha);
box-shadow: 0 26px 54px rgba(178, 58, 46, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.home-feature-card:hover[b-wywis5g3vp]::before {
width: 50%;
height: 50%;
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.home-stat-card[b-wywis5g3vp] {
position: relative;
overflow: hidden;
box-shadow: 0 14px 34px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04);
}
.home-stat-card[b-wywis5g3vp]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo)) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.home-stat-card:hover[b-wywis5g3vp] {
transform: translateY(-5px);
border-color: var(--gp-linha);
box-shadow: 0 26px 54px rgba(178, 58, 46, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.home-stat-card:hover[b-wywis5g3vp]::before {
width: 50%;
height: 50%;
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.home-step-card[b-wywis5g3vp] {
position: relative;
overflow: hidden;
box-shadow: 0 14px 34px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04);
}
.home-step-card[b-wywis5g3vp]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, var(--gp-vermelho), var(--gp-vermelho-fundo)) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.home-step-card:hover[b-wywis5g3vp] {
transform: translateY(-5px);
border-color: var(--gp-linha);
box-shadow: 0 26px 54px rgba(178, 58, 46, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.home-step-card:hover[b-wywis5g3vp]::before {
width: 50%;
height: 50%;
}
/* PALETA CADERNO (08/08/2026): pagina era ESCURA; as variaveis locais abaixo sao
o unico lugar onde a superficie e definida, entao remapea-las vira a pagina
inteira. Texto claro so sobrevive dentro de .hero/.cta-section (a capa). */
.pr-root[b-7n7siwbhov] {
--primary-gradient: linear-gradient(135deg, var(--gp-vermelho) 0%, var(--gp-vermelho-fundo) 100%);
--bg-dark: var(--gp-papel);
--bg-card: var(--gp-papel-claro);
--text-primary: var(--gp-tinta);
--text-secondary: var(--gp-tinta-media);
--text-muted: var(--gp-tinta-fraca);
--border-subtle: var(--gp-linha);
--border-strong: var(--gp-linha);
--purple: var(--gp-vermelho);
--purple-glow: rgba(178, 58, 46, .12);
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.pr-page[b-7n7siwbhov] { max-width: 1180px; margin: 0 auto; padding: 60px 24px; }
/* HERO */
.pr-hero[b-7n7siwbhov] {
background: var(--gp-capa); color: var(--gp-creme); border-radius: 24px;
padding: 56px 48px; position: relative; overflow: hidden;
margin-bottom: 36px; box-shadow: 0 20px 60px rgba(178, 58, 46, 0.25);
}
.pr-hero[b-7n7siwbhov]::before {
content: ''; position: absolute; top: -40%; right: -10%;
width: 480px; height: 480px;
background: radial-gradient(circle, var(--gp-creme-linha) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.pr-hero-tag[b-7n7siwbhov] { color: var(--gp-creme);
display: inline-block; padding: 7px 16px;
background: var(--gp-creme-tenue); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; font-size: 0.78rem; font-weight: 600;
letter-spacing: 2.5px; text-transform: uppercase;
margin-bottom: 22px; position: relative; z-index: 1;
}
.pr-hero h1[b-7n7siwbhov] {
font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800;
line-height: 1.15; margin-bottom: 18px; position: relative; z-index: 1;
}
.pr-hero p[b-7n7siwbhov] { font-size: 1.06rem; line-height: 1.6; opacity: 0.94; max-width: 820px; position: relative; z-index: 1; }
/* NUMBERS */
.pr-numbers[b-7n7siwbhov] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.pr-num-card[b-7n7siwbhov] {
background: var(--bg-card); backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle); border-radius: 18px;
padding: 26px 18px; text-align: center; transition: all .3s;
}
.pr-num-card:hover[b-7n7siwbhov] { transform: translateY(-3px); border-color: var(--purple); box-shadow: 0 12px 32px var(--purple-glow); }
.pr-num-value[b-7n7siwbhov] {
font-family: Georgia, 'Times New Roman', serif;
font-size: 2.6rem; font-weight: 700; line-height: 1;
color: var(--gp-vermelho);
}
.pr-num-plus[b-7n7siwbhov] { font-size: 1.5rem; }
.pr-num-unit[b-7n7siwbhov] { font-size: 0.9rem; color: var(--purple); font-weight: 600; margin-top: 4px; }
.pr-num-label[b-7n7siwbhov] { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; line-height: 1.3; }
/* SECTION */
.pr-section[b-7n7siwbhov] {
background: var(--bg-card); backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle); border-radius: 18px;
padding: 32px 36px; margin-bottom: 24px;
}
.pr-section-head[b-7n7siwbhov] {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle);
}
.pr-section-icon[b-7n7siwbhov] {
width: 42px; height: 42px; border-radius: 11px;
background: var(--primary-gradient); color: var(--gp-creme);
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; flex-shrink: 0; box-shadow: 0 6px 18px var(--purple-glow);
}
.pr-section h2[b-7n7siwbhov] { font-size: 1.35rem; font-weight: 700; color: var(--gp-tinta); margin: 0; }
.pr-section h2 small[b-7n7siwbhov] { display: block; font-size: 0.88rem; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
/* DOWNLOADS */
.pr-dl-grid[b-7n7siwbhov] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pr-dl-card[b-7n7siwbhov] {
border: 1px solid var(--border-subtle); background: var(--gp-linha);
border-radius: 14px; padding: 20px; text-decoration: none; color: var(--gp-tinta);
transition: all .25s; display: flex; flex-direction: column; gap: 6px;
}
.pr-dl-card:hover[b-7n7siwbhov] { border-color: var(--purple); background: rgba(178, 58, 46, 0.08); transform: translateY(-3px); color: var(--gp-tinta); box-shadow: 0 12px 28px var(--purple-glow); }
.pr-dl-icon[b-7n7siwbhov] {
width: 40px; height: 40px; border-radius: 10px;
background: var(--purple-glow); color: var(--purple);
display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 6px;
}
.pr-dl-title[b-7n7siwbhov] { font-weight: 700; font-size: 1rem; }
.pr-dl-desc[b-7n7siwbhov] { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.pr-dl-meta[b-7n7siwbhov] { font-size: 0.72rem; color: var(--purple); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
/* BOILERPLATE */
.pr-boil[b-7n7siwbhov] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pr-boil-full[b-7n7siwbhov] { grid-column: 1 / -1; }
.pr-boil-card[b-7n7siwbhov] { background: var(--gp-linha); border-left: 4px solid var(--purple); border-radius: 0 14px 14px 0; padding: 18px 20px; }
.pr-boil-tag[b-7n7siwbhov] { font-size: 0.72rem; color: var(--purple); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.pr-boil-text[b-7n7siwbhov] { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; position: relative; padding-right: 80px; }
.pr-boil-copy[b-7n7siwbhov] {
position: absolute; top: 0; right: 0;
background: var(--gp-linha); border: 1px solid var(--border-strong);
color: var(--text-secondary); padding: 5px 10px; border-radius: 6px;
font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.pr-boil-copy:hover[b-7n7siwbhov] { background: var(--purple); border-color: var(--purple); color: var(--gp-tinta); }
.pr-boil-copy.ok[b-7n7siwbhov] { background: var(--gp-salvia-forte); border-color: var(--gp-salvia); color: #fff; }
/* DIFFS */
.pr-diffs[b-7n7siwbhov] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.pr-diff[b-7n7siwbhov] { display: flex; gap: 14px; align-items: flex-start; font-size: 0.96rem; line-height: 1.55; color: var(--text-secondary); }
.pr-diff-bul[b-7n7siwbhov] {
width: 26px; height: 26px; border-radius: 50%;
background: var(--primary-gradient); color: var(--gp-creme);
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 800; flex-shrink: 0; margin-top: 1px;
box-shadow: 0 4px 12px var(--purple-glow);
}
.pr-diff strong[b-7n7siwbhov] { color: var(--gp-tinta); }
/* FOUNDER */
.pr-founder[b-7n7siwbhov] {
display: flex; gap: 28px; align-items: center;
background: linear-gradient(135deg, rgba(178, 58, 46, 0.10) 0%, rgba(143, 44, 34, 0.10) 100%);
border: 1px solid var(--border-subtle); border-radius: 16px; padding: 28px 32px;
}
.pr-founder-name[b-7n7siwbhov] { font-size: 1.35rem; font-weight: 700; color: var(--gp-tinta); margin: 0 0 3px; }
.pr-founder-role[b-7n7siwbhov] { font-size: 0.92rem; color: var(--purple); font-weight: 600; margin: 0 0 12px; }
.pr-founder-bio[b-7n7siwbhov] { font-size: 0.96rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
/* CONTACT */
.pr-contact[b-7n7siwbhov] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pr-contact-card[b-7n7siwbhov] { background: var(--gp-linha); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; transition: all .2s; }
.pr-contact-card:hover[b-7n7siwbhov] { border-color: var(--purple); background: rgba(178, 58, 46, 0.06); }
.pr-contact-label[b-7n7siwbhov] { font-size: 0.72rem; color: var(--purple); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.pr-contact-value[b-7n7siwbhov] { font-size: 1.05rem; color: var(--gp-tinta); font-weight: 600; }
.pr-contact-value a[b-7n7siwbhov] { color: var(--gp-tinta); text-decoration: none; }
.pr-contact-value a:hover[b-7n7siwbhov] { color: var(--purple); }
/* COVERAGE EMPTY */
.pr-coverage-empty[b-7n7siwbhov] { text-align: center; padding: 40px 20px; color: var(--text-muted); font-style: italic; }
.pr-coverage-empty i[b-7n7siwbhov] { font-size: 2.2rem; display: block; margin-bottom: 12px; opacity: 0.5; color: var(--purple); }
/* FOOTER */
.pr-foot[b-7n7siwbhov] { margin-top: 40px; padding: 28px 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border-subtle); }
.pr-foot a[b-7n7siwbhov] { color: var(--text-secondary); text-decoration: none; }
.pr-foot a:hover[b-7n7siwbhov] { color: var(--gp-tinta); }
@media (max-width: 768px) {
.pr-hero[b-7n7siwbhov] { padding: 40px 28px; }
.pr-hero h1[b-7n7siwbhov] { font-size: 1.6rem; }
.pr-numbers[b-7n7siwbhov] { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pr-section[b-7n7siwbhov] { padding: 24px 22px; }
.pr-boil[b-7n7siwbhov], .pr-diffs[b-7n7siwbhov] { grid-template-columns: 1fr; }
.pr-founder[b-7n7siwbhov] { flex-direction: column; text-align: center; }
.pr-boil-text[b-7n7siwbhov] { padding-right: 0; }
.pr-boil-copy[b-7n7siwbhov] { position: static; margin-top: 10px; display: inline-block; }
}
.login-shell[b-2k4c00vnjv] {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
background:
radial-gradient(circle at 90% 4%, rgba(255, 255, 255, .22), transparent 20rem),
radial-gradient(circle at 12% 88%, rgba(245, 184, 64, .24), transparent 18rem),
linear-gradient(135deg, #b23a2e 0%, #b23a2e 48%, #8f2c22 100%);
color: #fff;
overflow: hidden;
}
.login-shell[b-2k4c00vnjv]::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px;
}
.login-story[b-2k4c00vnjv],
.login-panel[b-2k4c00vnjv] {
position: relative;
z-index: 1;
}
.login-story[b-2k4c00vnjv] {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
padding: 44px clamp(28px, 6vw, 72px);
}
.login-brand[b-2k4c00vnjv] {
display: inline-flex;
align-items: center;
gap: 12px;
align-self: flex-start;
color: #fff;
text-decoration: none;
font-size: 1.28rem;
font-weight: 900;
}
.login-brand-mark[b-2k4c00vnjv] {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 12px;
color: #b23a2e;
background: #fff;
box-shadow: 0 10px 24px rgba(20, 15, 55, .24);
font-size: .82rem;
font-weight: 900;
}
.login-pill[b-2k4c00vnjv] {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
font-size: .76rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.login-pill span[b-2k4c00vnjv] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #5f7350;
}
.login-story h1[b-2k4c00vnjv] {
max-width: 560px;
margin: 0;
font-size: clamp(2.45rem, 5vw, 4rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.045em;
}
.login-lead[b-2k4c00vnjv] {
max-width: 560px;
margin: 0;
color: rgba(255, 255, 255, .9);
font-size: 1.03rem;
line-height: 1.65;
}
.login-features[b-2k4c00vnjv] {
display: grid;
gap: 12px;
max-width: 540px;
}
.login-feature[b-2k4c00vnjv] {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 15px;
background: rgba(255, 255, 255, .17);
backdrop-filter: blur(12px);
}
.login-feature i[b-2k4c00vnjv] {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #25d366, #128c7e);
box-shadow: 0 8px 18px rgba(20, 15, 55, .2);
}
.login-feature:nth-child(2) i[b-2k4c00vnjv] {
background: linear-gradient(135deg, #ddceb0, #b23a2e);
}
.login-feature:nth-child(3) i[b-2k4c00vnjv] {
background: #b6892a;
}
.login-feature strong[b-2k4c00vnjv] {
display: block;
font-size: .95rem;
}
.login-feature span[b-2k4c00vnjv] {
display: block;
margin-top: 2px;
color: rgba(255, 255, 255, .8);
font-size: .82rem;
}
.login-foot[b-2k4c00vnjv] {
display: flex;
justify-content: space-between;
max-width: 540px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .72);
font-size: .78rem;
}
.login-panel[b-2k4c00vnjv] {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 34px clamp(22px, 4vw, 48px);
}
.login-card[b-2k4c00vnjv] {
width: min(100%, 440px);
padding: 30px;
border-radius: 24px;
color: #241d19;
background: rgba(255, 255, 255, .96);
box-shadow: 0 28px 68px rgba(18, 12, 50, .3);
overflow: hidden;
}
.form-pill[b-2k4c00vnjv] {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 7px 12px;
border-radius: 999px;
color: #8f2c22;
background: #f3ded9;
font-size: .76rem;
font-weight: 900;
}
.login-card h2[b-2k4c00vnjv] {
margin: 0 0 4px;
color: #2b2420;
font-size: 2rem;
line-height: 1;
font-weight: 900;
}
.login-card h2 span[b-2k4c00vnjv] {
color: #7a5a1a;
}
.form-sub[b-2k4c00vnjv] {
margin: 0 0 20px;
color: #78695a;
font-size: .94rem;
}
.login-alert[b-2k4c00vnjv] {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid #e8c4bb;
border-radius: 8px;
color: #8f2c22;
background: #f6e3de;
font-size: .88rem;
font-weight: 700;
}
.login-alert > span[b-2k4c00vnjv] { flex: 1 1 auto; }
/* X de fechar: 8 pessoas clicaram em "Senha incorreta." tentando dispensar
o aviso (Clarity, 7 dias). Agora o clique tem pra onde ir. */
.login-alert-x[b-2k4c00vnjv] {
flex: none;
width: 24px;
height: 24px;
margin: -2px -4px 0 0;
display: grid;
place-items: center;
border: none;
border-radius: 5px;
background: transparent;
color: #8f2c22;
font-size: .72rem;
cursor: pointer;
opacity: .65;
transition: opacity .15s ease, background-color .15s ease;
}
.login-alert-x:hover[b-2k4c00vnjv] { opacity: 1; background: rgba(143, 44, 34, .1); }
/* ===== estado "enviando" (form-enviando.js) =====
O botão precisa PARECER travado, senão o professor clica de novo — foram
30 cliques mortos no "Entrar" em 7 dias, porque a tela não mudava nada
entre o clique e a resposta do servidor. */
.login-submit.is-enviando[b-2k4c00vnjv] {
opacity: .82;
cursor: progress;
}
.login-submit.is-enviando i[b-2k4c00vnjv] { display: none; }
.login-submit.is-enviando[b-2k4c00vnjv]::after {
content: "";
width: 15px;
height: 15px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: login-girando-b-2k4c00vnjv .7s linear infinite;
}
@keyframes login-girando-b-2k4c00vnjv { to { transform: rotate(360deg); } }
.field[b-2k4c00vnjv] {
margin-bottom: 14px;
}
.field label[b-2k4c00vnjv],
.label-row label[b-2k4c00vnjv] {
margin: 0 0 7px;
color: #241d19;
font-size: .86rem;
font-weight: 900;
}
.label-row[b-2k4c00vnjv] {
display: flex;
justify-content: space-between;
gap: 16px;
}
.label-row a[b-2k4c00vnjv] {
color: #b23a2e;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
}
.input-wrap[b-2k4c00vnjv] {
position: relative;
}
.input-wrap i[b-2k4c00vnjv] {
position: absolute;
left: 14px;
top: 50%;
color: #b23a2e;
transform: translateY(-50%);
}
.input-wrap[b-2k4c00vnjv]  .login-input {
width: 100%;
height: 48px;
padding: 0 14px 0 42px;
border: 2px solid #e8dcc0;
border-radius: 13px;
color: #241d19;
background: #fff;
font: inherit;
outline: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.input-wrap[b-2k4c00vnjv]  .login-input:focus {
border-color: #b23a2e;
box-shadow: 0 0 0 4px rgba(91, 62, 234, .15);
}
[b-2k4c00vnjv] .validation-message,
.validation-message[b-2k4c00vnjv] {
display: block;
margin-top: 5px;
color: #b23a2e;
font-size: .78rem;
font-weight: 700;
}
.keep-row[b-2k4c00vnjv] {
display: flex;
align-items: center;
gap: 10px;
margin: 3px 0 16px;
color: #5b5148;
font-size: .86rem;
font-weight: 700;
}
.keep-row input[b-2k4c00vnjv] {
width: 19px;
height: 19px;
accent-color: #b23a2e;
}
.login-submit[b-2k4c00vnjv],
.plans-link[b-2k4c00vnjv],
.google-link[b-2k4c00vnjv] {
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 13px;
font-size: .95rem;
font-weight: 900;
text-decoration: none;
}
.login-submit[b-2k4c00vnjv] {
border: 0;
color: #fff;
background: linear-gradient(135deg, #8f2c22, #b23a2e);
box-shadow: 0 10px 24px rgba(91, 62, 234, .36);
transition: transform .16s ease, box-shadow .16s ease;
}
.login-submit:hover[b-2k4c00vnjv] {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(91, 62, 234, .44);
}
.plans-link[b-2k4c00vnjv] {
margin-top: 10px;
color: #b23a2e;
border: 2px solid #e8dcc0;
background: #fdf8ee;
}
.divider[b-2k4c00vnjv] {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
color: #78695a;
font-size: .72rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.divider[b-2k4c00vnjv]::before,
.divider[b-2k4c00vnjv]::after {
content: "";
height: 1px;
flex: 1;
background: #e8dcc0;
}
.google-link[b-2k4c00vnjv] {
color: #241d19;
border: 2px solid #e8dcc0;
background: #fff;
}
.google-dot[b-2k4c00vnjv] {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
font-size: .76rem;
font-weight: 900;
}
.facebook-link[b-2k4c00vnjv] {
margin-top: 10px;
color: #fff;
border: 0;
background: #1877f2;
}
.facebook-dot[b-2k4c00vnjv] {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: #fff;
font-size: 1.15rem;
line-height: 1;
}
.create-account[b-2k4c00vnjv] {
margin: 17px 0 0;
padding-top: 15px;
border-top: 1px solid #e8dcc0;
color: #78695a;
text-align: center;
font-size: .85rem;
font-weight: 700;
}
.create-account a[b-2k4c00vnjv] {
color: #b23a2e;
font-weight: 900;
text-decoration: none;
}
@media (max-width: 980px) {
.login-shell[b-2k4c00vnjv] {
grid-template-columns: 1fr;
min-height: auto;
overflow: auto;
}
.login-panel[b-2k4c00vnjv] {
order: -1;
min-height: auto;
padding-top: 24px;
}
.login-story[b-2k4c00vnjv] {
min-height: auto;
padding-top: 18px;
}
.login-foot[b-2k4c00vnjv] {
display: none;
}
}
@media (max-width: 520px) {
.login-panel[b-2k4c00vnjv] {
padding: 18px;
}
.login-card[b-2k4c00vnjv] {
padding: 24px 20px;
border-radius: 20px;
}
.login-story[b-2k4c00vnjv] {
padding: 18px;
}
.login-story h1[b-2k4c00vnjv] {
font-size: 2.35rem;
}
}
/* ===== imagem do dia (TbImagemDoDia) no painel lateral ===== */
.login-img-dia[b-2k4c00vnjv] {
margin: 18px 0 14px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .06);
}
.login-img-dia img[b-2k4c00vnjv] {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.login-img-dia figcaption[b-2k4c00vnjv] {
display: grid;
gap: 2px;
padding: 10px 13px;
}
.login-img-dia strong[b-2k4c00vnjv] {
display: flex;
align-items: center;
gap: 7px;
color: #fff;
font-size: .8rem;
}
.login-img-dia small[b-2k4c00vnjv] {
color: rgba(255, 255, 255, .65);
font-size: .68rem;
}
.login-brand-mark img[b-2k4c00vnjv] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.login-card[b-2k4c00vnjv] {
position: relative;
overflow: hidden;
}
.login-card[b-2k4c00vnjv]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: #b23a2e 1;
border-top-right-radius: 24px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.login-card:hover[b-2k4c00vnjv] {
transform: translateY(-5px);
border-color: #ddceb0;
box-shadow: 0 26px 54px rgba(178, 58, 46, .18), 0 6px 16px rgba(43, 36, 32, .08);
}
.login-card:hover[b-2k4c00vnjv]::before {
width: 50%;
height: 50%;
}
/* ===== Entrar sem senha (magic link) ===== */
.magic-info[b-2k4c00vnjv] {
background: #e5ecdc;
color: #3e4c31;
border: 1px solid #c9dcb9;
}
.magic-submit[b-2k4c00vnjv] {
background: linear-gradient(135deg, #3e4c31, #5f7350);
}
.news-status-fundo[b-g92z9yxkbe] {
width: 100%;
min-height: 60vh;
background: #0a0a1a;
display: flex;
align-items: center;
justify-content: center;
}
.news-status-box[b-g92z9yxkbe] {
max-width: 460px;
margin: 0 auto;
padding: 60px 24px;
text-align: center;
color: rgba(255, 255, 255, .85);
}
.news-status-box i[b-g92z9yxkbe] {
font-size: 3rem;
color: #a78bfa;
display: block;
margin-bottom: 16px;
}
.news-status-box h1[b-g92z9yxkbe] {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
}
.news-status-back[b-g92z9yxkbe] {
display: inline-block;
margin-top: 22px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 10px 24px;
border-radius: 10px;
}
.news-status-fundo[b-hzk86sr8r0] {
width: 100%;
min-height: 60vh;
background: #0a0a1a;
display: flex;
align-items: center;
justify-content: center;
}
.news-status-box[b-hzk86sr8r0] {
max-width: 460px;
margin: 0 auto;
padding: 60px 24px;
text-align: center;
color: rgba(255, 255, 255, .85);
}
.news-status-box i[b-hzk86sr8r0] {
font-size: 3rem;
color: #a78bfa;
display: block;
margin-bottom: 16px;
}
.news-status-box h1[b-hzk86sr8r0] {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
}
.news-status-back[b-hzk86sr8r0] {
display: inline-block;
margin-top: 22px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 10px 24px;
border-radius: 10px;
}
/* ===== Consulta de nota do aluno ===== */
.na-fundo[b-50v0enph2v] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at -10% 110%, rgba(59, 130, 246, .3), transparent 60%),
linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.na-card[b-50v0enph2v] {
width: min(460px, 100%);
margin-top: 8vh;
padding: 34px clamp(22px, 5vw, 42px);
border-radius: 20px;
background: #fff;
text-align: center;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: naSubir-b-50v0enph2v .4s ease backwards;
}
@keyframes naSubir-b-50v0enph2v {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.na-logo[b-50v0enph2v] {
width: 60px;
height: 60px;
display: grid;
place-items: center;
margin: 0 auto 14px;
border-radius: 16px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 12px 26px rgba(79, 70, 229, .35);
}
.na-card h1[b-50v0enph2v] {
margin: 0 0 4px;
color: #0f172a;
font-size: 2.2rem;
font-weight: 900;
}
.na-card h1 small[b-50v0enph2v] { color: #94a3b8; font-size: 1.1rem; font-weight: 800; }
.na-sub[b-50v0enph2v] { margin: 0 0 20px; color: #64748b; font-size: .93rem; }
.na-alerta[b-50v0enph2v] {
margin-bottom: 12px;
padding: 11px 14px;
border-radius: 10px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #b91c1c;
font-size: .88rem;
font-weight: 650;
}
.na-codigo[b-50v0enph2v] {
width: 100%;
height: 60px;
padding: 0 16px;
border: 2px solid #e2e8f0;
border-radius: 14px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
letter-spacing: .35em;
text-align: center;
text-transform: uppercase;
outline: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.na-codigo:focus[b-50v0enph2v] {
border-color: #7c3aed;
box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}
.na-botao[b-50v0enph2v] {
width: 100%;
height: 52px;
margin-top: 16px;
border: 0;
border-radius: 13px;
color: #fff;
font-size: 1rem;
font-weight: 850;
background: linear-gradient(120deg, #4f46e5, #7c3aed);
box-shadow: 0 14px 30px rgba(79, 70, 229, .4);
transition: transform .14s ease;
}
.na-botao:hover[b-50v0enph2v] { transform: translateY(-2px); }
.na-botao.secundario[b-50v0enph2v] {
color: #4f46e5;
background: #eef2ff;
box-shadow: none;
}
.na-detalhes[b-50v0enph2v] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin: 18px 0 6px;
}
.na-detalhes > div[b-50v0enph2v] {
padding: 13px 10px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
display: grid;
gap: 2px;
}
.na-detalhes span[b-50v0enph2v] {
color: #64748b;
font-size: .68rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .05em;
}
.na-detalhes strong[b-50v0enph2v] { color: #0f172a; font-size: 1.1rem; font-weight: 900; }
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.na-card[b-50v0enph2v] {
position: relative;
overflow: hidden;
}
.na-card[b-50v0enph2v]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.na-card:hover[b-50v0enph2v] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.na-card:hover[b-50v0enph2v]::before {
width: 50%;
height: 50%;
}
.pr-wrap[b-plirmu989j] {
display: flex;
justify-content: center;
padding: 3rem 1rem;
}
.pr-card[b-plirmu989j] {
max-width: 520px;
text-align: center;
background: var(--bs-body-bg, #fff);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 18px;
padding: 2.5rem 2rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}
.pr-icon[b-plirmu989j] {
font-size: 3.2rem;
color: #16a34a;
display: block;
margin-bottom: .75rem;
}
.pr-card h1[b-plirmu989j] {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: .75rem;
}
.pr-card p[b-plirmu989j] {
color: #64748b;
margin-bottom: 1.25rem;
}
.pr-obs[b-plirmu989j] {
font-size: .85rem;
margin-top: 1rem;
margin-bottom: 0;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-w24jvz3b6s] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-w24jvz3b6s] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-w24jvz3b6s] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-w24jvz3b6s] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-w24jvz3b6s] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-w24jvz3b6s] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-w24jvz3b6s 20s linear infinite;
}
@keyframes particles-b-w24jvz3b6s { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-w24jvz3b6s] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-w24jvz3b6s] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-w24jvz3b6s] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-w24jvz3b6s] { color: var(--gp-latao); }
.hero .subtitle[b-w24jvz3b6s] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-w24jvz3b6s] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-w24jvz3b6s] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-w24jvz3b6s] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-w24jvz3b6s] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-w24jvz3b6s] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-w24jvz3b6s] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-w24jvz3b6s] { text-align: center; }
.proof-number[b-w24jvz3b6s] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-w24jvz3b6s] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-w24jvz3b6s] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-w24jvz3b6s] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-w24jvz3b6s] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-w24jvz3b6s] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-w24jvz3b6s] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-w24jvz3b6s] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-w24jvz3b6s] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-w24jvz3b6s] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-w24jvz3b6s] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-w24jvz3b6s] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-w24jvz3b6s] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-w24jvz3b6s] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-w24jvz3b6s] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-w24jvz3b6s] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-w24jvz3b6s] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-w24jvz3b6s] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-w24jvz3b6s] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-w24jvz3b6s] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-w24jvz3b6s] { max-width: 720px; margin: 0 auto; }
.faq-item[b-w24jvz3b6s] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-w24jvz3b6s] { border-color: var(--gp-vermelho); }
.faq-question[b-w24jvz3b6s] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-w24jvz3b6s]::-webkit-details-marker { display: none; }
.faq-question i[b-w24jvz3b6s] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-w24jvz3b6s] { transform: rotate(180deg); }
.faq-answer[b-w24jvz3b6s] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-w24jvz3b6s] { max-width: 900px; }
.seo-text p[b-w24jvz3b6s] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-w24jvz3b6s] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-w24jvz3b6s]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-w24jvz3b6s] { position: relative; z-index: 1; }
.cta-title[b-w24jvz3b6s] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-w24jvz3b6s] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-w24jvz3b6s] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-w24jvz3b6s] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
.legal[b-apkzrdbnqf] {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.7;
}
.legal h1[b-apkzrdbnqf] {
font-size: 2rem;
font-weight: 800;
margin-bottom: 8px;
color: var(--gp-vermelho);
}
.legal .updated[b-apkzrdbnqf] {
color: var(--gp-tinta-media);
font-size: .85rem;
margin-bottom: 40px;
}
.legal h2[b-apkzrdbnqf] {
font-size: 1.15rem;
font-weight: 700;
color: var(--gp-tinta);
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gp-linha);
}
.legal p[b-apkzrdbnqf],
.legal li[b-apkzrdbnqf] {
font-size: .95rem;
color: var(--gp-tinta-media);
margin-bottom: 12px;
}
.legal ul[b-apkzrdbnqf] {
padding-left: 20px;
margin-bottom: 16px;
}
.legal li[b-apkzrdbnqf] {
margin-bottom: 6px;
}
.legal a[b-apkzrdbnqf] {
color: var(--gp-vermelho);
}
.legal .card[b-apkzrdbnqf] {
background: var(--gp-papel);
border: 1px solid var(--gp-linha);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
/* Página de preços — painel azul vibrante com destaques em amarelo.
Autocontido (funciona dentro do painel logado e do layout público, que já
têm padding próprio): é um "hero" azul arredondado que preenche a coluna. */
.precos-page[b-cx8q531hkw] {
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 56px clamp(20px, 5vw, 64px) 64px;
color: var(--gp-papel);
background:
radial-gradient(1100px 480px at 12% -8%, rgba(250, 204, 21, .20), transparent 60%),
radial-gradient(900px 500px at 108% 12%, rgba(56, 189, 248, .22), transparent 55%),
radial-gradient(700px 600px at 90% 118%, rgba(178, 58, 46, .20), transparent 60%),
linear-gradient(160deg, var(--gp-info) 0%, var(--gp-info) 34%, var(--gp-info) 72%, var(--gp-capa) 100%);
box-shadow: 0 30px 70px -30px rgba(23, 37, 84, .65);
}
/* ---------------- cabeçalho ---------------- */
.precos-head[b-cx8q531hkw] {
text-align: center;
max-width: 720px;
margin: 0 auto 44px;
}
.precos-chip[b-cx8q531hkw] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 999px;
font-size: .82rem;
font-weight: 800;
letter-spacing: .01em;
color: var(--gp-kicker);
background: rgba(250, 204, 21, .12);
border: 1px solid rgba(250, 204, 21, .38);
margin-bottom: 18px;
}
.precos-chip .bi[b-cx8q531hkw] { color: var(--gp-kicker); }
.precos-titulo[b-cx8q531hkw] {
font-size: clamp(1.9rem, 4.2vw, 2.9rem);
font-weight: 900;
line-height: 1.1;
margin: 0 0 14px;
color: var(--gp-tinta);
letter-spacing: -.02em;
}
.precos-hl[b-cx8q531hkw] {
color: var(--gp-latao);
}
.precos-sub[b-cx8q531hkw] {
font-size: 1.06rem;
color: rgba(226, 232, 255, .82);
margin: 0;
}
.precos-aviso[b-cx8q531hkw] {
max-width: 640px;
margin: 0 auto 28px;
padding: 12px 18px;
text-align: center;
border-radius: 14px;
font-weight: 600;
color: var(--gp-papel);
background: rgba(234, 88, 12, .28);
border: 1px solid rgba(251, 146, 60, .5);
}
.precos-carregando[b-cx8q531hkw] {
text-align: center;
color: rgba(226, 232, 255, .8);
}
/* ---------------- grade de planos ---------------- */
.precos-grid[b-cx8q531hkw] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
align-items: stretch;
max-width: 1160px;
margin: 0 auto;
}
.plano-card[b-cx8q531hkw] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding: 30px 24px 26px;
border-radius: 22px;
background: var(--gp-papel-claro);
border: 1px solid rgba(255, 255, 255, .6);
box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .55);
transition: transform .18s ease, box-shadow .18s ease;
}
.plano-card:hover[b-cx8q531hkw] {
transform: translateY(-6px);
box-shadow: 0 26px 54px -22px rgba(15, 23, 42, .6);
}
/* plano herói (o "Mais popular"): anel dourado, leve escala e brilho */
.plano-card.is-hero[b-cx8q531hkw] {
border: 2px solid transparent;
background:
linear-gradient(var(--gp-papel-claro), var(--gp-papel-claro)) padding-box,
linear-gradient(140deg, var(--gp-latao), var(--gp-latao)) border-box;
box-shadow: 0 26px 60px -20px rgba(245, 158, 11, .55);
transform: translateY(-10px) scale(1.02);
z-index: 1;
}
.plano-card.is-hero:hover[b-cx8q531hkw] {
transform: translateY(-14px) scale(1.02);
}
.plano-badge[b-cx8q531hkw] {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
padding: 6px 16px;
border-radius: 999px;
font-size: .74rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(100deg, var(--gp-info), var(--gp-info));
box-shadow: 0 6px 16px -6px rgba(70, 97, 143, .55);
}
/* variedade de cor por coluna (1=azul, 2=dourado/herói, 3=violeta) */
.plano-card:nth-child(1) .plano-badge[b-cx8q531hkw] {
background: linear-gradient(100deg, var(--gp-info), var(--gp-info));
box-shadow: 0 6px 16px -6px rgba(8, 145, 178, .55);
}
.plano-card:nth-child(3) .plano-badge[b-cx8q531hkw] {
background: linear-gradient(100deg, var(--gp-vermelho), var(--gp-vermelho-fundo));
box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .55);
}
.plano-card.is-hero .plano-badge[b-cx8q531hkw] {
color: var(--gp-kicker);
background: linear-gradient(100deg, var(--gp-latao), var(--gp-latao));
box-shadow: 0 6px 18px -4px rgba(245, 158, 11, .65);
}
.plano-nome[b-cx8q531hkw] {
font-size: 1.12rem;
font-weight: 800;
color: var(--gp-tinta);
margin-top: 6px;
}
.plano-preco[b-cx8q531hkw] {
font-size: 2.5rem;
font-weight: 900;
line-height: 1.05;
margin: 6px 0 2px;
letter-spacing: -.03em;
color: var(--gp-info);
}
.plano-card.is-hero .plano-preco[b-cx8q531hkw] {
color: var(--gp-latao);
}
.plano-periodo[b-cx8q531hkw] {
font-size: .82rem;
color: var(--gp-tinta-fraca);
margin-bottom: 14px;
}
.plano-frase[b-cx8q531hkw] {
font-size: .84rem;
color: var(--gp-tinta-media);
margin-bottom: 16px;
min-height: 1.2em;
}
.plano-feats[b-cx8q531hkw] {
list-style: none;
padding: 0;
margin: 4px 0 22px;
text-align: left;
display: flex;
flex-direction: column;
gap: 10px;
}
.plano-feats li[b-cx8q531hkw] {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: .9rem;
color: var(--gp-tinta);
line-height: 1.35;
}
.plano-feats .bi[b-cx8q531hkw] {
color: var(--gp-salvia-forte);
font-size: 1rem;
flex-shrink: 0;
margin-top: 1px;
}
.plano-card.is-hero .plano-feats .bi[b-cx8q531hkw] { color: var(--gp-kicker); }
/* ---------------- botões ---------------- */
.plano-cta[b-cx8q531hkw] {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 9px;
}
.plano-cta form[b-cx8q531hkw] { display: grid; margin: 0; }
.pbtn[b-cx8q531hkw] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
border: none;
border-radius: 12px;
font-size: .94rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.pbtn:hover[b-cx8q531hkw] { transform: translateY(-2px); }
.pbtn:active[b-cx8q531hkw] { transform: translateY(0); }
.pbtn-azul[b-cx8q531hkw] {
color: #fff;
background: linear-gradient(120deg, var(--gp-info), var(--gp-info));
box-shadow: 0 12px 24px -10px rgba(70, 97, 143, .7);
}
.pbtn-amarelo[b-cx8q531hkw] {
color: var(--gp-kicker);
background: linear-gradient(100deg, var(--gp-latao), var(--gp-latao));
box-shadow: 0 12px 24px -8px rgba(245, 158, 11, .65);
}
.pbtn-ghost[b-cx8q531hkw] {
padding: 9px 16px;
font-size: .85rem;
font-weight: 700;
color: var(--gp-info);
background: transparent;
border: 1.5px solid rgba(70, 97, 143, .35);
}
.pbtn-ghost:hover[b-cx8q531hkw] {
background: rgba(70, 97, 143, .07);
border-color: rgba(70, 97, 143, .6);
}
.pbtn-mute[b-cx8q531hkw] {
color: var(--gp-tinta-media);
background: var(--gp-papel);
border: 1px solid var(--gp-linha);
cursor: default;
}
.pbtn-mute:hover[b-cx8q531hkw] { transform: none; }
@media (max-width: 560px) {
.precos-page[b-cx8q531hkw] { padding: 40px 16px 48px; border-radius: 22px; }
.plano-card.is-hero[b-cx8q531hkw] { transform: none; }
.plano-card.is-hero:hover[b-cx8q531hkw] { transform: translateY(-6px); }
}
/* Selo de satisfação — mesma nota do aggregateRating (auditoria SEO 08/08).
Precisa ficar VISÍVEL: marcação de avaliação que o usuário não vê é violação. */
.precos-nota[b-cx8q531hkw] {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin: 14px 0 0;
padding: 7px 14px;
border: 1px solid var(--gp-linha);
border-radius: 999px;
background: var(--gp-papel-claro);
font-size: .95rem;
color: var(--gp-tinta-media);
}
.precos-nota i[b-cx8q531hkw] {
color: var(--gp-latao);
font-size: .9rem;
}
.precos-nota strong[b-cx8q531hkw] {
font-size: 1.12rem;
font-weight: 800;
color: var(--gp-ink);
}
.precos-nota-qtd[b-cx8q531hkw] {
font-size: .88rem;
color: var(--gp-tinta-fraca);
}
@media (max-width: 560px) {
.precos-nota[b-cx8q531hkw] { font-size: .88rem; }
.precos-nota-qtd[b-cx8q531hkw] { width: 100%; }
}
/* PALETA CADERNO (08/08/2026): pagina era ESCURA; as variaveis locais abaixo sao
o unico lugar onde a superficie e definida, entao remapea-las vira a pagina
inteira. Texto claro so sobrevive dentro de .hero/.cta-section (a capa). */
.pd-root[b-8qc39irx7r] {
--primary-gradient: linear-gradient(135deg, var(--gp-vermelho) 0%, var(--gp-vermelho-fundo) 100%);
--bg-dark: var(--gp-papel);
--bg-card: var(--gp-papel-claro);
--text-primary: var(--gp-tinta);
--text-secondary: var(--gp-tinta-media);
--text-muted: var(--gp-tinta-fraca);
--border-subtle: var(--gp-linha);
--purple: var(--gp-vermelho);
--purple-glow: rgba(178, 58, 46, .12);
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.pd-page[b-8qc39irx7r] { max-width: 1080px; margin: 0 auto; padding: 60px 24px; }
.pd-section[b-8qc39irx7r] { margin-bottom: 56px; }
/* HERO */
.pd-hero[b-8qc39irx7r] { text-align: center; padding: 40px 0 20px; }
.pd-hero-tag[b-8qc39irx7r] {
display: inline-block; padding: 7px 16px;
background: rgba(178, 58, 46, .14); border: 1px solid rgba(178, 58, 46, .3);
border-radius: 50px; font-size: .82rem; font-weight: 600;
letter-spacing: 1px; margin-bottom: 22px; color: var(--purple);
}
.pd-hero h1[b-8qc39irx7r] { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.12; margin-bottom: 20px; }
.pd-hero .lead[b-8qc39irx7r] { font-size: 1.1rem; color: var(--text-secondary); max-width: 760px; margin: 0 auto 30px; line-height: 1.65; }
.pd-hero-ctas[b-8qc39irx7r] { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pd-btn[b-8qc39irx7r] {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px; border-radius: 50px; font-weight: 700;
text-decoration: none; transition: all .25s; font-size: 1rem;
}
.pd-btn-primary[b-8qc39irx7r] { background: var(--primary-gradient); color: #fff; box-shadow: 0 10px 30px var(--purple-glow); }
.pd-btn-primary:hover[b-8qc39irx7r] { transform: translateY(-2px); color: #fff; }
.pd-btn-ghost[b-8qc39irx7r] { background: var(--gp-linha); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.pd-btn-ghost:hover[b-8qc39irx7r] { background: var(--gp-linha); color: var(--gp-tinta); }
/* NUMBERS */
.pd-numbers[b-8qc39irx7r] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pd-num-card[b-8qc39irx7r] {
background: var(--bg-card); backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle); border-radius: 18px;
padding: 28px 18px; text-align: center; transition: all .3s;
}
.pd-num-card:hover[b-8qc39irx7r] { transform: translateY(-3px); border-color: var(--purple); box-shadow: 0 12px 32px var(--purple-glow); }
.pd-num-value[b-8qc39irx7r] {
font-size: 2rem; font-weight: 800; line-height: 1.1;
color: var(--gp-vermelho);
}
.pd-num-label[b-8qc39irx7r] { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; line-height: 1.3; }
/* SECTION HEAD */
.pd-section-head[b-8qc39irx7r] { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pd-section-head-center[b-8qc39irx7r] { justify-content: center; }
.pd-section-icon[b-8qc39irx7r] {
width: 46px; height: 46px; border-radius: 12px;
background: var(--primary-gradient); color: var(--gp-tinta);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 6px 18px var(--purple-glow);
}
.pd-section-head h2[b-8qc39irx7r] { font-size: 1.6rem; font-weight: 800; color: var(--gp-tinta); margin: 0; }
.pd-section-head h2 small[b-8qc39irx7r] { display: block; font-size: .9rem; color: var(--text-muted); font-weight: 500; margin-top: 4px; }
/* FEATURES */
.pd-features[b-8qc39irx7r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pd-feature[b-8qc39irx7r] {
background: var(--bg-card); border: 1px solid var(--border-subtle);
border-radius: 16px; padding: 26px; transition: all .3s;
}
.pd-feature:hover[b-8qc39irx7r] { transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 12px 30px var(--purple-glow); }
.pd-feature-ico[b-8qc39irx7r] {
width: 48px; height: 48px; border-radius: 12px;
background: var(--purple-glow); color: var(--purple);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; margin-bottom: 16px;
}
.pd-feature h3[b-8qc39irx7r] { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.pd-feature p[b-8qc39irx7r] { color: var(--text-secondary); font-size: .95rem; margin: 0; line-height: 1.6; }
/* STEPS */
.pd-steps[b-8qc39irx7r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pd-step[b-8qc39irx7r] {
background: var(--bg-card); border: 1px solid var(--border-subtle);
border-radius: 16px; padding: 28px; text-align: center;
}
.pd-step-num[b-8qc39irx7r] {
width: 52px; height: 52px; border-radius: 50%;
background: var(--primary-gradient); color: var(--gp-tinta);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; font-weight: 800; margin: 0 auto 16px;
box-shadow: 0 6px 20px var(--purple-glow);
}
.pd-step h3[b-8qc39irx7r] { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.pd-step p[b-8qc39irx7r] { color: var(--text-secondary); font-size: .95rem; margin: 0; line-height: 1.6; }
/* PRICING */
.pd-pricing[b-8qc39irx7r] {
background: linear-gradient(135deg, rgba(178, 58, 46, 0.10) 0%, rgba(143, 44, 34, 0.10) 100%);
border: 1px solid var(--border-subtle); border-radius: 20px;
padding: 44px 32px; text-align: center;
}
.pd-pricing .preco[b-8qc39irx7r] {
font-size: 3rem; font-weight: 800; margin: 10px 0;
color: var(--gp-vermelho);
}
.pd-pricing .preco small[b-8qc39irx7r] { font-size: 1rem; color: var(--text-muted); -webkit-text-fill-color: initial; }
.pd-pricing p[b-8qc39irx7r] { color: var(--text-secondary); max-width: 560px; margin: 0 auto 24px; line-height: 1.6; }
@media (max-width: 768px) {
.pd-numbers[b-8qc39irx7r] { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Captura de prova física (celular) ===== */
.cap-fundo[b-i7584ac1la] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(16, 185, 129, .3), transparent 60%),
linear-gradient(135deg, #0f766e 0%, #059669 100%);
}
.cap-card[b-i7584ac1la] {
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-i7584ac1la .4s ease backwards;
}
@keyframes capSubir-b-i7584ac1la {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.cap-logo[b-i7584ac1la] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #0f766e, #059669);
box-shadow: 0 12px 26px rgba(5, 150, 105, .35);
}
.cap-card h1[b-i7584ac1la] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-i7584ac1la] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-i7584ac1la] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #0f766e, #10b981);
box-shadow: 0 14px 30px rgba(5, 150, 105, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-i7584ac1la] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-i7584ac1la] { opacity: .6; cursor: wait; }
.cap-botao-foto[b-i7584ac1la]  input[type="file"] {
display: none;
}
.cap-progresso[b-i7584ac1la] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #047857;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-i7584ac1la] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(5, 150, 105, .25);
border-top-color: #059669;
animation: capGirar-b-i7584ac1la .8s linear infinite;
}
@keyframes capGirar-b-i7584ac1la {
to { transform: rotate(360deg); }
}
.cap-resultado[b-i7584ac1la] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 10px;
padding: 11px 14px;
border-radius: 11px;
font-size: .87rem;
font-weight: 700;
}
.cap-resultado.ok[b-i7584ac1la] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.cap-resultado.erro[b-i7584ac1la] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cap-resultado i[b-i7584ac1la] { margin-top: 1px; }
/* ===== gabarito reconhecido (captura pelo celular) ===== */
.cap-gab-ok[b-i7584ac1la] {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #ddd6fe;
text-align: left;
}
.cap-gab-ok > strong[b-i7584ac1la] { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .95rem; }
.cap-gab-ok ul[b-i7584ac1la] { margin: 10px 0; padding-left: 18px; display: grid; gap: 3px; color: #334155; font-size: .88rem; }
.cap-gab-ok .cap-sub[b-i7584ac1la] { margin: 4px 0 0; }
/* ===== multi-página ===== */
.cap-paginas[b-i7584ac1la] {
display: grid;
gap: 10px;
margin-top: 14px;
padding: 13px 15px;
border-radius: 12px;
background: #f0fdfa;
border: 1px solid #99f6e4;
color: #115e59;
font-size: .88rem;
font-weight: 750;
}
.cap-concluir[b-i7584ac1la] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
border: 0;
border-radius: 12px;
color: #fff;
font-size: .95rem;
font-weight: 900;
background: linear-gradient(120deg, #0f766e, #10b981);
box-shadow: 0 10px 24px rgba(5, 150, 105, .35);
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.cap-card[b-i7584ac1la] {
position: relative;
overflow: hidden;
}
.cap-card[b-i7584ac1la]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-i7584ac1la] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.cap-card:hover[b-i7584ac1la]::before {
width: 50%;
height: 50%;
}
/* "preparando o envio" (07/08): honesto — o input é nativo e a foto tirada antes
da conexão fica guardada (sessionStorage) e sobe quando o circuito arma. */
.cap-conectando[b-i7584ac1la] {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 0;
color: #475569;
font-size: .82rem;
font-weight: 600;
}
/* ===== Prova Online — tela do aluno (mobile-first, visual SaaS) ===== */
.po-fundo[b-lycn31avnt] {
min-height: 100vh;
padding: 20px 14px 120px;
background:
radial-gradient(1000px 500px at 110% -10%, rgba(124, 58, 237, .35), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(59, 130, 246, .3), transparent 60%),
linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
/* ---------- cartões (entrada / resultado / erro) ---------- */
.po-card[b-lycn31avnt] {
width: min(560px, 100%);
margin: 6vh auto 0;
padding: 34px clamp(22px, 5vw, 44px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: poSubir-b-lycn31avnt .4s ease both;
}
@keyframes poSubir-b-lycn31avnt {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.po-logo[b-lycn31avnt] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 16px;
border-radius: 15px;
color: #fff;
font-weight: 900;
font-size: 1.15rem;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 12px 26px rgba(79, 70, 229, .35);
}
.po-logo.erro[b-lycn31avnt] {
background: linear-gradient(135deg, #dc2626, #b91c1c);
box-shadow: 0 12px 26px rgba(220, 38, 38, .3);
}
.po-card h1[b-lycn31avnt] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.02em;
}
.po-sub[b-lycn31avnt] {
margin: 0 0 20px;
color: #64748b;
font-size: .95rem;
}
.po-entrada label[b-lycn31avnt] {
display: block;
margin: 14px 0 6px;
color: #0f172a;
font-size: .85rem;
font-weight: 800;
}
.po-entrada input[b-lycn31avnt] {
width: 100%;
height: 48px;
padding: 0 15px;
border: 2px solid #e2e8f0;
border-radius: 12px;
color: #0f172a;
font: inherit;
outline: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.po-entrada input:focus[b-lycn31avnt] {
border-color: #7c3aed;
box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}
.po-alerta[b-lycn31avnt] {
margin-bottom: 6px;
padding: 11px 14px;
border-radius: 10px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #b91c1c;
font-size: .88rem;
font-weight: 650;
}
.po-botao[b-lycn31avnt] {
width: 100%;
height: 52px;
margin-top: 22px;
border: 0;
border-radius: 13px;
color: #fff;
font-size: 1rem;
font-weight: 850;
background: linear-gradient(120deg, #4f46e5, #7c3aed);
box-shadow: 0 14px 30px rgba(79, 70, 229, .4);
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.po-botao:hover:not(:disabled)[b-lycn31avnt] {
transform: translateY(-2px);
filter: brightness(1.05);
}
.po-botao:disabled[b-lycn31avnt] {
opacity: .65;
}
/* ---------- prova: topo fixo ---------- */
.po-topo[b-lycn31avnt] {
position: sticky;
top: 10px;
z-index: 10;
width: min(760px, 100%);
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 18px;
border-radius: 15px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 14px 36px rgba(15, 23, 42, .25);
backdrop-filter: blur(10px);
}
.po-topo-titulo[b-lycn31avnt] {
display: grid;
min-width: 0;
}
.po-topo-titulo strong[b-lycn31avnt] {
color: #0f172a;
font-size: .98rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.po-topo-titulo span[b-lycn31avnt] {
color: #64748b;
font-size: .78rem;
font-weight: 700;
}
.po-timer[b-lycn31avnt] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 999px;
color: #4f46e5;
background: rgba(79, 70, 229, .1);
font-weight: 900;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.po-timer.urgente[b-lycn31avnt] {
color: #fff;
background: linear-gradient(120deg, #dc2626, #b91c1c);
animation: poPulsar-b-lycn31avnt 1s ease infinite;
}
@keyframes poPulsar-b-lycn31avnt {
50% { transform: scale(1.05); }
}
/* ---------- progresso ---------- */
.po-progresso[b-lycn31avnt] {
width: min(760px, 100%);
margin: 0 auto 16px;
display: flex;
align-items: center;
gap: 12px;
color: #eef2ff;
font-size: .82rem;
font-weight: 800;
}
.po-progresso-barra[b-lycn31avnt] {
flex: 1;
height: 9px;
border-radius: 99px;
background: rgba(255, 255, 255, .25);
overflow: hidden;
}
.po-progresso-barra > div[b-lycn31avnt] {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #34d399, #10b981);
transition: width .3s ease;
}
/* ---------- questões ---------- */
.po-questoes[b-lycn31avnt] {
width: min(760px, 100%);
margin: 0 auto;
display: grid;
gap: 14px;
}
.po-questao[b-lycn31avnt] {
padding: 20px;
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.po-questao-cab[b-lycn31avnt] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.po-qnum[b-lycn31avnt] {
padding: 4px 11px;
border-radius: 999px;
background: rgba(79, 70, 229, .1);
color: #4f46e5;
font-size: .74rem;
font-weight: 900;
}
.po-respondida[b-lycn31avnt] {
display: inline-flex;
align-items: center;
gap: 5px;
color: #059669;
font-size: .78rem;
font-weight: 850;
}
.po-enunciado[b-lycn31avnt] {
margin-bottom: 14px;
color: #1e293b;
font-size: .96rem;
line-height: 1.55;
}
.po-questao textarea[b-lycn31avnt] {
width: 100%;
padding: 12px 14px;
border: 2px solid #e2e8f0;
border-radius: 12px;
color: #0f172a;
font: inherit;
resize: vertical;
outline: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.po-questao textarea:focus[b-lycn31avnt] {
border-color: #7c3aed;
box-shadow: 0 0 0 4px rgba(124, 58, 237, .13);
}
.po-alternativas[b-lycn31avnt] {
display: grid;
gap: 8px;
}
.po-alt[b-lycn31avnt] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 13px;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: #fff;
color: #1e293b;
text-align: left;
font-size: .92rem;
transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.po-alt:hover[b-lycn31avnt] {
border-color: #a5b4fc;
transform: translateX(2px);
}
.po-alt.marcada[b-lycn31avnt] {
border-color: #4f46e5;
background: rgba(79, 70, 229, .07);
}
.po-letra[b-lycn31avnt] {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 9px;
background: #eef2ff;
color: #4f46e5;
font-weight: 900;
font-size: .85rem;
}
.po-alt.marcada .po-letra[b-lycn31avnt] {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
}
/* ---------- rodapé fixo ---------- */
.po-rodape[b-lycn31avnt] {
position: fixed;
inset: auto 0 0 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px clamp(14px, 4vw, 28px);
background: rgba(255, 255, 255, .97);
box-shadow: 0 -12px 34px rgba(15, 23, 42, .2);
backdrop-filter: blur(10px);
color: #475569;
font-size: .85rem;
font-weight: 800;
}
.po-finalizar[b-lycn31avnt] {
width: auto;
height: 46px;
margin: 0;
padding: 0 22px;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(120deg, #059669, #10b981);
box-shadow: 0 10px 24px rgba(5, 150, 105, .35);
}
/* ---------- resultado ---------- */
.po-resultado[b-lycn31avnt] {
text-align: center;
}
.po-resultado-icone[b-lycn31avnt] {
width: 74px;
height: 74px;
display: grid;
place-items: center;
margin: 0 auto 14px;
border-radius: 50%;
color: #fff;
font-size: 2rem;
background: linear-gradient(135deg, #f59e0b, #f97316);
box-shadow: 0 16px 36px rgba(245, 158, 11, .4);
}
.po-stats[b-lycn31avnt] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin: 20px 0;
}
.po-stats > div[b-lycn31avnt] {
padding: 14px 10px;
border-radius: 13px;
background: #f8fafc;
border: 1px solid #e2e8f0;
display: grid;
gap: 2px;
}
.po-stats strong[b-lycn31avnt] {
color: #0f172a;
font-size: 1.25rem;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.po-stats span[b-lycn31avnt] {
color: #64748b;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.po-aviso-ia[b-lycn31avnt] {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0 14px;
padding: 12px 15px;
border-radius: 12px;
background: rgba(79, 70, 229, .08);
color: #4338ca;
font-size: .86rem;
font-weight: 700;
text-align: left;
}
.po-spinner[b-lycn31avnt] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(79, 70, 229, .25);
border-top-color: #4f46e5;
animation: poGirar-b-lycn31avnt .8s linear infinite;
}
@keyframes poGirar-b-lycn31avnt {
to { transform: rotate(360deg); }
}
/* ---------- gabarito ---------- */
.po-gabarito[b-lycn31avnt] {
margin-top: 10px;
text-align: left;
}
.po-gabarito h2[b-lycn31avnt] {
margin: 14px 0 12px;
color: #0f172a;
font-size: 1.05rem;
font-weight: 900;
}
.po-gq[b-lycn31avnt] {
margin-bottom: 12px;
padding: 16px;
border-radius: 13px;
border: 1px solid #e2e8f0;
border-left-width: 4px;
background: #fff;
}
.po-gq.certa[b-lycn31avnt] { border-left-color: #10b981; }
.po-gq.errada[b-lycn31avnt] { border-left-color: #ef4444; }
.po-gq.diss[b-lycn31avnt] { border-left-color: #8b5cf6; }
.po-gq-cab[b-lycn31avnt] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
color: #64748b;
font-size: .78rem;
font-weight: 900;
}
.po-tag[b-lycn31avnt] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
font-size: .72rem;
font-weight: 900;
}
.po-tag.certa[b-lycn31avnt] { background: #d1fae5; color: #047857; }
.po-tag.errada[b-lycn31avnt] { background: #fee2e2; color: #b91c1c; }
.po-tag.diss[b-lycn31avnt] { background: #ede9fe; color: #6d28d9; }
.po-gq-linha[b-lycn31avnt] {
margin: 5px 0 0;
color: #334155;
font-size: .88rem;
}
.po-gq-feedback[b-lycn31avnt] {
margin: 8px 0 0;
padding: 10px 13px;
border-radius: 10px;
background: #f5f3ff;
color: #5b21b6;
font-size: .85rem;
}
.po-pendente[b-lycn31avnt] {
color: #92400e;
font-style: italic;
}
@media (max-width: 560px) {
.po-card[b-lycn31avnt] { margin-top: 3vh; }
.po-stats[b-lycn31avnt] { grid-template-columns: 1fr 1fr; }
}
.po-logo img[b-lycn31avnt] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.po-card[b-lycn31avnt] {
position: relative;
overflow: hidden;
}
.po-card[b-lycn31avnt]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.po-card:hover[b-lycn31avnt] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.po-card:hover[b-lycn31avnt]::before {
width: 50%;
height: 50%;
}
/* Figura do enunciado (QuestaoImagem via /api/questao-img) — ENEM etc. */
.q-imagem[b-lycn31avnt] {
display: block;
max-width: 100%;
max-height: 340px;
margin: .5rem auto .65rem;
border-radius: 8px;
object-fit: contain;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-ci0aubkfuv] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-ci0aubkfuv] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-ci0aubkfuv] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-ci0aubkfuv] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-ci0aubkfuv] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-ci0aubkfuv] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-ci0aubkfuv 20s linear infinite;
}
@keyframes particles-b-ci0aubkfuv { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-ci0aubkfuv] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-ci0aubkfuv] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-ci0aubkfuv] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-ci0aubkfuv] { color: var(--gp-latao); }
.hero .subtitle[b-ci0aubkfuv] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-ci0aubkfuv] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-ci0aubkfuv] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-ci0aubkfuv] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-ci0aubkfuv] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-ci0aubkfuv] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-ci0aubkfuv] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-ci0aubkfuv] { text-align: center; }
.proof-number[b-ci0aubkfuv] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-ci0aubkfuv] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-ci0aubkfuv] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-ci0aubkfuv] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-ci0aubkfuv] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-ci0aubkfuv] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-ci0aubkfuv] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-ci0aubkfuv] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-ci0aubkfuv] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-ci0aubkfuv] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-ci0aubkfuv] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-ci0aubkfuv] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-ci0aubkfuv] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-ci0aubkfuv] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-ci0aubkfuv] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-ci0aubkfuv] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-ci0aubkfuv] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-ci0aubkfuv] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-ci0aubkfuv] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-ci0aubkfuv] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-ci0aubkfuv] { max-width: 720px; margin: 0 auto; }
.faq-item[b-ci0aubkfuv] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-ci0aubkfuv] { border-color: var(--gp-vermelho); }
.faq-question[b-ci0aubkfuv] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-ci0aubkfuv]::-webkit-details-marker { display: none; }
.faq-question i[b-ci0aubkfuv] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-ci0aubkfuv] { transform: rotate(180deg); }
.faq-answer[b-ci0aubkfuv] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-ci0aubkfuv] { max-width: 900px; }
.seo-text p[b-ci0aubkfuv] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-ci0aubkfuv] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-ci0aubkfuv]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-ci0aubkfuv] { position: relative; z-index: 1; }
.cta-title[b-ci0aubkfuv] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-ci0aubkfuv] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-ci0aubkfuv] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-ci0aubkfuv] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
/* Exclusivos desta landing. O badge de aviso era âmbar; no caderno o aviso é o
latão — mesma família do dourado, e sobre a capa ele lê. */
.hero-badge-warn[b-ci0aubkfuv] { background: var(--gp-latao); border-color: var(--gp-latao); color: var(--gp-capa); }
.subtitle-tight[b-ci0aubkfuv] { margin-bottom: 14px; }
.subtitle-small[b-ci0aubkfuv] { font-size: .95em; opacity: .85; }
/* ===== Captura de prova física (celular) ===== */
.cap-fundo[b-v2bp7pd8lg] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(16, 185, 129, .3), transparent 60%),
linear-gradient(135deg, #0f766e 0%, #059669 100%);
}
.cap-card[b-v2bp7pd8lg] {
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-v2bp7pd8lg .4s ease backwards;
}
@keyframes capSubir-b-v2bp7pd8lg {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.cap-logo[b-v2bp7pd8lg] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #0f766e, #059669);
box-shadow: 0 12px 26px rgba(5, 150, 105, .35);
}
.cap-card h1[b-v2bp7pd8lg] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-v2bp7pd8lg] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-v2bp7pd8lg] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #0f766e, #10b981);
box-shadow: 0 14px 30px rgba(5, 150, 105, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-v2bp7pd8lg] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-v2bp7pd8lg] { opacity: .6; cursor: wait; }
.cap-botao-foto[b-v2bp7pd8lg]  input[type="file"] {
display: none;
}
.cap-progresso[b-v2bp7pd8lg] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #047857;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-v2bp7pd8lg] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(5, 150, 105, .25);
border-top-color: #059669;
animation: capGirar-b-v2bp7pd8lg .8s linear infinite;
}
@keyframes capGirar-b-v2bp7pd8lg {
to { transform: rotate(360deg); }
}
.cap-resultado[b-v2bp7pd8lg] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 10px;
padding: 11px 14px;
border-radius: 11px;
font-size: .87rem;
font-weight: 700;
}
.cap-resultado.ok[b-v2bp7pd8lg] { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.cap-resultado.erro[b-v2bp7pd8lg] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cap-resultado i[b-v2bp7pd8lg] { margin-top: 1px; }
/* ===== gabarito reconhecido (captura pelo celular) ===== */
.cap-gab-ok[b-v2bp7pd8lg] {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #ddd6fe;
text-align: left;
}
.cap-gab-ok > strong[b-v2bp7pd8lg] { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .95rem; }
.cap-gab-ok ul[b-v2bp7pd8lg] { margin: 10px 0; padding-left: 18px; display: grid; gap: 3px; color: #334155; font-size: .88rem; }
.cap-gab-ok .cap-sub[b-v2bp7pd8lg] { margin: 4px 0 0; }
/* ===== multi-página ===== */
.cap-paginas[b-v2bp7pd8lg] {
display: grid;
gap: 10px;
margin-top: 14px;
padding: 13px 15px;
border-radius: 12px;
background: #f0fdfa;
border: 1px solid #99f6e4;
color: #115e59;
font-size: .88rem;
font-weight: 750;
}
.cap-concluir[b-v2bp7pd8lg] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
border: 0;
border-radius: 12px;
color: #fff;
font-size: .95rem;
font-weight: 900;
background: linear-gradient(120deg, #0f766e, #10b981);
box-shadow: 0 10px 24px rgba(5, 150, 105, .35);
}
/* ===== card padrão do site: grampo arredondado + elevação no hover ===== */
.cap-card[b-v2bp7pd8lg] {
position: relative;
overflow: hidden;
}
.cap-card[b-v2bp7pd8lg]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-v2bp7pd8lg] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.cap-card:hover[b-v2bp7pd8lg]::before {
width: 50%;
height: 50%;
}
/* "preparando o envio" (07/08): honesto — o input é nativo e a foto tirada antes
da conexão fica guardada (sessionStorage) e sobe quando o circuito arma. */
.cap-conectando[b-v2bp7pd8lg] {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 0;
color: #475569;
font-size: .82rem;
font-weight: 600;
}
/* ===== cabeçalho lido na tela do celular (módulo Prova por foto) ===== */
.cap-cab[b-v2bp7pd8lg] {
margin-top: 14px;
padding: 12px 14px;
border: 1px solid #ddceb0;
border-left: 4px solid #46618f;
border-radius: 4px 12px 12px 4px;
background: #e7edf6;
text-align: left;
}
.cap-cab strong[b-v2bp7pd8lg] {
display: flex;
align-items: center;
gap: 7px;
color: #46618f;
font-size: .88rem;
}
.cap-cab ul[b-v2bp7pd8lg] {
margin: 7px 0 0;
padding-left: 18px;
color: #5b5148;
font-size: .85rem;
line-height: 1.6;
}
/* "preparando o envio": honesto — a foto tirada antes espera na fila */
.cap-conectando[b-v2bp7pd8lg] {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0 0;
color: #5b5148;
font-size: .82rem;
font-weight: 600;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-topnu1x4mf] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-topnu1x4mf] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-topnu1x4mf]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-topnu1x4mf] {
position: relative;
z-index: 1;
}
.lp-badge[b-topnu1x4mf] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-topnu1x4mf] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-topnu1x4mf] {
color: var(--gp-latao);
}
.lp-sub[b-topnu1x4mf] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-topnu1x4mf] { color: var(--gp-creme); }
.lp-sub.small[b-topnu1x4mf] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-topnu1x4mf] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-topnu1x4mf] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-topnu1x4mf] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-topnu1x4mf] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-topnu1x4mf] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-topnu1x4mf] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-topnu1x4mf] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-topnu1x4mf] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-topnu1x4mf] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-topnu1x4mf] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-topnu1x4mf] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-topnu1x4mf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-topnu1x4mf] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-topnu1x4mf]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-topnu1x4mf] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-topnu1x4mf]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-topnu1x4mf] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-topnu1x4mf] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-topnu1x4mf] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-topnu1x4mf] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-topnu1x4mf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-topnu1x4mf] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-topnu1x4mf] {
padding: 24px;
}
.lp-step-num[b-topnu1x4mf] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-topnu1x4mf] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-topnu1x4mf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-topnu1x4mf] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-topnu1x4mf] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-topnu1x4mf] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-topnu1x4mf] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-topnu1x4mf] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-topnu1x4mf] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-topnu1x4mf] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-topnu1x4mf]::-webkit-details-marker { display: none; }
.lp-faq summary[b-topnu1x4mf]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-topnu1x4mf]::after { transform: rotate(180deg); }
.lp-faq p[b-topnu1x4mf] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-topnu1x4mf] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-topnu1x4mf] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-topnu1x4mf] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-topnu1x4mf] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-topnu1x4mf] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-topnu1x4mf] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-topnu1x4mf] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-topnu1x4mf] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-topnu1x4mf],
.lp-steps[b-topnu1x4mf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-topnu1x4mf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-topnu1x4mf] { padding: 24px 22px; }
.lp-hero h1[b-topnu1x4mf] { font-size: 1.7rem; }
.lp-features[b-topnu1x4mf],
.lp-steps[b-topnu1x4mf],
.lp-stats[b-topnu1x4mf] { grid-template-columns: 1fr; }
.lp-proof[b-topnu1x4mf] { gap: 22px; }
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-ku9tnalq21] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-ku9tnalq21] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-ku9tnalq21]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-ku9tnalq21] {
position: relative;
z-index: 1;
}
.lp-badge[b-ku9tnalq21] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-ku9tnalq21] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-ku9tnalq21] {
color: var(--gp-latao);
}
.lp-sub[b-ku9tnalq21] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-ku9tnalq21] { color: var(--gp-creme); }
.lp-sub.small[b-ku9tnalq21] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-ku9tnalq21] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-ku9tnalq21] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-ku9tnalq21] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-ku9tnalq21] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-ku9tnalq21] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-ku9tnalq21] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-ku9tnalq21] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-ku9tnalq21] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-ku9tnalq21] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-ku9tnalq21] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-ku9tnalq21] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-ku9tnalq21] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-ku9tnalq21] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-ku9tnalq21]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-ku9tnalq21] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-ku9tnalq21]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-ku9tnalq21] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-ku9tnalq21] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-ku9tnalq21] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-ku9tnalq21] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-ku9tnalq21] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-ku9tnalq21] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-ku9tnalq21] {
padding: 24px;
}
.lp-step-num[b-ku9tnalq21] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-ku9tnalq21] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-ku9tnalq21] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-ku9tnalq21] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-ku9tnalq21] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-ku9tnalq21] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-ku9tnalq21] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-ku9tnalq21] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-ku9tnalq21] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-ku9tnalq21] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-ku9tnalq21]::-webkit-details-marker { display: none; }
.lp-faq summary[b-ku9tnalq21]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-ku9tnalq21]::after { transform: rotate(180deg); }
.lp-faq p[b-ku9tnalq21] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-ku9tnalq21] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-ku9tnalq21] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-ku9tnalq21] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-ku9tnalq21] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-ku9tnalq21] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-ku9tnalq21] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-ku9tnalq21] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-ku9tnalq21] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-ku9tnalq21],
.lp-steps[b-ku9tnalq21] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-ku9tnalq21] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-ku9tnalq21] { padding: 24px 22px; }
.lp-hero h1[b-ku9tnalq21] { font-size: 1.7rem; }
.lp-features[b-ku9tnalq21],
.lp-steps[b-ku9tnalq21],
.lp-stats[b-ku9tnalq21] { grid-template-columns: 1fr; }
.lp-proof[b-ku9tnalq21] { gap: 22px; }
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-qggth4jryc] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-qggth4jryc] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-qggth4jryc]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-qggth4jryc] {
position: relative;
z-index: 1;
}
.lp-badge[b-qggth4jryc] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-qggth4jryc] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-qggth4jryc] {
color: var(--gp-latao);
}
.lp-sub[b-qggth4jryc] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-qggth4jryc] { color: var(--gp-creme); }
.lp-sub.small[b-qggth4jryc] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-qggth4jryc] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-qggth4jryc] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-qggth4jryc] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-qggth4jryc] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-qggth4jryc] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-qggth4jryc] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-qggth4jryc] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-qggth4jryc] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-qggth4jryc] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-qggth4jryc] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-qggth4jryc] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-qggth4jryc] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-qggth4jryc] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-qggth4jryc]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-qggth4jryc] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-qggth4jryc]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-qggth4jryc] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-qggth4jryc] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-qggth4jryc] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-qggth4jryc] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-qggth4jryc] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-qggth4jryc] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-qggth4jryc] {
padding: 24px;
}
.lp-step-num[b-qggth4jryc] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-qggth4jryc] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-qggth4jryc] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-qggth4jryc] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-qggth4jryc] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-qggth4jryc] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-qggth4jryc] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-qggth4jryc] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-qggth4jryc] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-qggth4jryc] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-qggth4jryc]::-webkit-details-marker { display: none; }
.lp-faq summary[b-qggth4jryc]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-qggth4jryc]::after { transform: rotate(180deg); }
.lp-faq p[b-qggth4jryc] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-qggth4jryc] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-qggth4jryc] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-qggth4jryc] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-qggth4jryc] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-qggth4jryc] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-qggth4jryc] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-qggth4jryc] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-qggth4jryc] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-qggth4jryc],
.lp-steps[b-qggth4jryc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-qggth4jryc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-qggth4jryc] { padding: 24px 22px; }
.lp-hero h1[b-qggth4jryc] { font-size: 1.7rem; }
.lp-features[b-qggth4jryc],
.lp-steps[b-qggth4jryc],
.lp-stats[b-qggth4jryc] { grid-template-columns: 1fr; }
.lp-proof[b-qggth4jryc] { gap: 22px; }
}
/* ===== Captura de redação (celular do aluno) — tema roxo ===== */
.cap-fundo[b-ivfj5qoot2] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(147, 51, 234, .3), transparent 60%),
linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
}
.cap-card[b-ivfj5qoot2] {
position: relative;
overflow: hidden;
width: min(520px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
animation: capSubir-b-ivfj5qoot2 .4s ease backwards;
}
/* ===== esteira: concluir e emendar a próxima redação ===== */
.cap-proxima[b-ivfj5qoot2] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 52px;
margin-top: 12px;
border: 0;
border-radius: 13px;
background: linear-gradient(135deg, #16a34a, #14532d);
color: #fff;
font-weight: 900;
font-size: .95rem;
cursor: pointer;
}
.cap-proxima:disabled[b-ivfj5qoot2] { opacity: .6; }
@keyframes capSubir-b-ivfj5qoot2 {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.cap-logo[b-ivfj5qoot2] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #9333ea, #3b0764);
box-shadow: 0 12px 26px rgba(124, 58, 237, .35);
}
.cap-card h1[b-ivfj5qoot2] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.5rem;
font-weight: 900;
}
.cap-sub[b-ivfj5qoot2] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.cap-botao-foto[b-ivfj5qoot2] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #7c3aed, #9333ea);
box-shadow: 0 14px 30px rgba(124, 58, 237, .4);
transition: transform .14s ease;
}
.cap-botao-foto:hover:not(.desabilitado)[b-ivfj5qoot2] { transform: translateY(-2px); }
.cap-botao-foto.desabilitado[b-ivfj5qoot2] { opacity: .6; cursor: wait; }
.cap-botao-foto[b-ivfj5qoot2]  input[type="file"] { display: none; }
.cap-progresso[b-ivfj5qoot2] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #faf5ff;
border: 1px solid #ddd6fe;
color: #6d28d9;
font-size: .88rem;
font-weight: 750;
}
.cap-spinner[b-ivfj5qoot2] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(124, 58, 237, .25);
border-top-color: #7c3aed;
animation: capGirar-b-ivfj5qoot2 .8s linear infinite;
}
@keyframes capGirar-b-ivfj5qoot2 {
to { transform: rotate(360deg); }
}
.cap-gab-ok[b-ivfj5qoot2] {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #ddd6fe;
text-align: left;
}
.cap-gab-ok > strong[b-ivfj5qoot2] { display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .95rem; }
.cap-gab-ok .cap-sub[b-ivfj5qoot2] { margin: 6px 0 0; }
.cap-erro[b-ivfj5qoot2] {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 11px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .87rem;
font-weight: 700;
}
.cap-card[b-ivfj5qoot2]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #9333ea, #3b0764) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.cap-card:hover[b-ivfj5qoot2]::before { width: 50%; height: 50%; }
/* Destino do link do e-mail. Mesma casca visual da /esqueci-senha — o CSS isolado
do Blazor é por componente, então as duas telas repetem o estilo de propósito. */
.es-shell[b-b049svciww] {
min-height: 60vh;
display: grid;
place-items: center;
padding: 24px 16px;
}
.es-card[b-b049svciww] {
width: min(520px, 100%);
display: grid;
gap: 14px;
padding: 30px 28px;
border: 1px solid #e2e8f0;
border-radius: 20px;
background: #fff;
box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
text-align: center;
position: relative;
overflow: hidden;
}
.es-card[b-b049svciww]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1;
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.es-card:hover[b-b049svciww] {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 26px 54px rgba(79, 70, 229, .18), 0 6px 16px rgba(15, 23, 42, .08);
}
.es-card:hover[b-b049svciww]::before {
width: 50%;
height: 50%;
}
.es-icone[b-b049svciww] {
width: 62px;
height: 62px;
display: grid;
place-items: center;
margin: 0 auto;
border-radius: 18px;
color: #fff;
font-size: 1.6rem;
background: linear-gradient(135deg, #3b82f6, #7c3aed);
}
.es-card h1[b-b049svciww] { margin: 0; color: #0f172a; font-size: 1.35rem; font-weight: 950; }
.es-sub[b-b049svciww] { margin: 0; color: #475569; font-size: .9rem; line-height: 1.5; }
.es-field[b-b049svciww] { text-align: left; }
.es-field label[b-b049svciww] {
display: block;
color: #475569;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
}
.es-input-wrap[b-b049svciww] {
position: relative;
display: flex;
align-items: center;
}
.es-input-wrap i[b-b049svciww] {
position: absolute;
left: 12px;
color: #94a3b8;
font-size: .95rem;
}
/* ::deep obrigatório: o <input> vem do <InputText>, e o escopo do CSS isolado não
é carimbado em elemento renderizado por componente filho. Mesmo padrão do Login. */
.es-input-wrap[b-b049svciww]  .es-input {
width: 100%;
padding: 11px 13px 11px 36px;
border: 1px solid #cbd5e1;
border-radius: 11px;
font-size: .93rem;
color: #0f172a;
background: #fff;
}
.es-input-wrap[b-b049svciww]  .es-input:focus {
outline: none;
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(129, 140, 248, .18);
}
[b-b049svciww] .validation-message,
.validation-message[b-b049svciww] {
display: block;
margin-top: 5px;
color: #dc2626;
font-size: .78rem;
font-weight: 700;
}
.es-submit[b-b049svciww] {
width: 100%;
margin-top: 14px;
padding: 12px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
font-weight: 800;
font-size: .95rem;
cursor: pointer;
}
.es-submit:hover[b-b049svciww] { filter: brightness(1.05); }
.es-submit-link[b-b049svciww] { text-decoration: none; }
.es-alerta[b-b049svciww] {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 14px;
border-radius: 11px;
background: #ecfdf5;
color: #065f46;
font-size: .87rem;
text-align: left;
line-height: 1.45;
}
.es-alerta.erro[b-b049svciww] { background: #fef2f2; color: #991b1b; }
.es-voltar[b-b049svciww] {
justify-self: center;
display: inline-flex;
align-items: center;
gap: 7px;
color: #4f46e5;
font-size: .86rem;
font-weight: 800;
text-decoration: none;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex aqui: toda cor vem dos tokens de
wwwroot/app.css. Este arquivo é COMPARTILHADO por 10 landings (cópias idênticas
byte a byte) — mexeu aqui, replicar nas outras 9.
Hero e CTA usam a CAPA (superfície escura), então o texto continua claro sobre
fundo escuro: é de propósito, e é o que evita o texto invisível que aparece
quando se troca só o fundo pra papel e o color:#fff fica pra trás. */
.lp[b-icqshje3nf] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 22px;
}
/* ===== HERO ===== */
.lp-hero[b-icqshje3nf] {
position: relative;
overflow: hidden;
padding: 30px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(420px 200px at 88% -20%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
/* Pauta do caderno por cima da capa (era grade quadriculada branca). */
.lp-hero[b-icqshje3nf]::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--gp-creme-tenue) 1px, transparent 1px),
linear-gradient(90deg, var(--gp-creme-tenue) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent);
pointer-events: none;
}
.lp-hero > *[b-icqshje3nf] {
position: relative;
z-index: 1;
}
.lp-badge[b-icqshje3nf] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
background: var(--gp-creme-tenue);
border: 1px solid var(--gp-creme-linha);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.lp-hero h1[b-icqshje3nf] {
max-width: 780px;
margin: 14px 0 0;
color: var(--gp-creme);
font-size: 2.1rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -.01em;
}
/* O destaque do título era gradiente dourado recortado no texto. Sobre a capa o
latão já lê sozinho, e cor sólida não corre o risco do -webkit-text-fill-color
deixar a palavra transparente onde o background-clip não pega. */
.lp-hero h1 .hl[b-icqshje3nf] {
color: var(--gp-latao);
}
.lp-sub[b-icqshje3nf] {
max-width: 700px;
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
line-height: 1.7;
}
.lp-sub strong[b-icqshje3nf] { color: var(--gp-creme); }
.lp-sub.small[b-icqshje3nf] { font-size: 13.5px; opacity: .85; }
.lp-actions[b-icqshje3nf] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.lp-btn[b-icqshje3nf] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border-radius: 13px;
text-decoration: none;
font-size: 14.5px;
font-weight: 900;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp-btn:hover[b-icqshje3nf] { transform: translateY(-2px); }
/* Vermelho da caneta é a ação primária do produto — o mesmo do botão de cadastro
na barra do topo. Sobre a capa vale o --gp-vermelho (mais claro); o
-vermelho-fundo existe pra quando o botão fica sobre papel. */
.lp-btn-primary[b-icqshje3nf] {
color: #fff;
background: var(--gp-vermelho);
box-shadow: 0 12px 30px rgba(178, 58, 46, .42);
}
.lp-btn-ghost[b-icqshje3nf] {
color: var(--gp-creme);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
}
.lp-proof[b-icqshje3nf] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 26px;
}
.lp-proof-item span[b-icqshje3nf] {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: var(--gp-latao);
line-height: 1;
}
.lp-proof-item small[b-icqshje3nf] {
display: block;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gp-creme-suave);
}
/* ===== SECTION HEAD ===== */
.lp-sec-head[b-icqshje3nf] {
text-align: center;
margin: 0 auto 6px;
max-width: 640px;
}
/* --gp-kicker, não --gp-latao: o latão é filete/ícone e REPROVA em AA como texto
sobre papel. Aqui o dourado precisa ser lido. */
.lp-eyebrow[b-icqshje3nf] {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gp-kicker);
}
.lp-sec-head h2[b-icqshje3nf] {
margin: 8px 0 0;
color: var(--gp-tinta);
font-size: 1.55rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-sec-head p[b-icqshje3nf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 14px;
}
/* ===== CARD BASE ===== */
.lp-card[b-icqshje3nf] {
position: relative;
overflow: hidden;
border: 1px solid var(--gp-linha);
border-radius: 20px;
background: var(--gp-papel-claro);
box-shadow: 0 14px 34px rgba(43, 36, 32, .08), 0 2px 6px rgba(43, 36, 32, .04);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lp-card[b-icqshje3nf]::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: var(--gp-latao);
border-top-right-radius: 20px;
transition: width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.lp-card:hover[b-icqshje3nf] {
transform: translateY(-5px);
border-color: var(--gp-vermelho);
box-shadow: 0 26px 54px rgba(178, 58, 46, .16), 0 6px 16px rgba(43, 36, 32, .08);
}
.lp-card:hover[b-icqshje3nf]::before {
width: 50%;
height: 50%;
}
/* ===== FEATURES ===== */
.lp-features[b-icqshje3nf] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-feature[b-icqshje3nf] {
padding: 24px;
}
/* Ícone: quadrado vermelho com glifo branco. Sobre cartão claro o fundo tem que
ser o -vermelho-fundo, senão a letra branca não passa AA. */
.lp-feature-icon[b-icqshje3nf] {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 16px;
color: #fff;
font-size: 1.35rem;
background: var(--gp-vermelho-fundo);
box-shadow: 0 12px 24px rgba(143, 44, 34, .22);
}
.lp-feature h3[b-icqshje3nf] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1.05rem;
font-weight: 900;
}
.lp-feature p[b-icqshje3nf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.6;
}
/* ===== STEPS ===== */
.lp-steps[b-icqshje3nf] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.lp-step[b-icqshje3nf] {
padding: 24px;
}
.lp-step-num[b-icqshje3nf] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
font-size: 1.15rem;
font-weight: 900;
background: var(--gp-vermelho-fundo);
box-shadow: 0 8px 20px rgba(143, 44, 34, .3);
}
.lp-step h4[b-icqshje3nf] {
margin: 16px 0 0;
color: var(--gp-tinta);
font-size: 1rem;
font-weight: 900;
}
.lp-step p[b-icqshje3nf] {
margin: 8px 0 0;
color: var(--gp-tinta-media);
font-size: 13.5px;
line-height: 1.55;
}
/* ===== STATS ===== */
.lp-stats[b-icqshje3nf] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.lp-stat[b-icqshje3nf] {
padding: 22px;
text-align: center;
}
.lp-stat strong[b-icqshje3nf] {
display: block;
color: var(--gp-vermelho);
font-size: 2rem;
line-height: 1;
font-weight: 900;
letter-spacing: -.04em;
}
.lp-stat span[b-icqshje3nf] {
display: block;
margin-top: 8px;
color: var(--gp-tinta-fraca);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}
/* ===== FAQ ===== */
.lp-faq[b-icqshje3nf] {
max-width: 760px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.lp-faq details[b-icqshje3nf] {
border: 1px solid var(--gp-linha);
border-radius: 14px;
background: var(--gp-papel-claro);
box-shadow: 0 8px 20px rgba(43, 36, 32, .05);
overflow: hidden;
}
.lp-faq summary[b-icqshje3nf] {
list-style: none;
cursor: pointer;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
color: var(--gp-tinta);
font-size: 15px;
font-weight: 800;
}
.lp-faq summary[b-icqshje3nf]::-webkit-details-marker { display: none; }
.lp-faq summary[b-icqshje3nf]::after {
content: "\F282";
font-family: "bootstrap-icons";
font-size: 13px;
color: var(--gp-vermelho);
transition: transform .25s ease;
}
.lp-faq details[open] summary[b-icqshje3nf]::after { transform: rotate(180deg); }
.lp-faq p[b-icqshje3nf] {
margin: 0;
padding: 0 22px 18px;
color: var(--gp-tinta-media);
font-size: 14px;
line-height: 1.7;
}
/* ===== SEO TEXT ===== */
.lp-seo[b-icqshje3nf] {
max-width: 900px;
margin: 0 auto;
padding: 30px;
width: 100%;
}
.lp-seo h2[b-icqshje3nf] {
margin: 0;
color: var(--gp-tinta);
font-size: 1.4rem;
font-weight: 900;
}
.lp-seo p[b-icqshje3nf] {
margin: 14px 0 0;
color: var(--gp-tinta-media);
font-size: 14.5px;
line-height: 1.75;
}
.lp-seo p.lead[b-icqshje3nf] {
color: var(--gp-tinta-media);
font-size: 15px;
}
/* ===== CTA ===== */
.lp-cta[b-icqshje3nf] {
position: relative;
overflow: hidden;
text-align: center;
padding: 44px 32px;
border-radius: 24px;
color: var(--gp-creme);
background:
radial-gradient(400px 200px at 50% 0%, var(--gp-capa-alta), transparent 62%),
var(--gp-capa);
box-shadow: 0 28px 62px rgba(36, 29, 25, .28);
}
.lp-cta h2[b-icqshje3nf] {
margin: 0;
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -.01em;
}
.lp-cta p[b-icqshje3nf] {
margin: 12px 0 0;
color: var(--gp-creme-suave);
font-size: 15px;
}
.lp-cta .lp-actions[b-icqshje3nf] { justify-content: center; margin-top: 22px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
.lp-features[b-icqshje3nf],
.lp-steps[b-icqshje3nf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-stats[b-icqshje3nf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.lp-hero[b-icqshje3nf] { padding: 24px 22px; }
.lp-hero h1[b-icqshje3nf] { font-size: 1.7rem; }
.lp-features[b-icqshje3nf],
.lp-steps[b-icqshje3nf],
.lp-stats[b-icqshje3nf] { grid-template-columns: 1fr; }
.lp-proof[b-icqshje3nf] { gap: 22px; }
}
.sb-page[b-o48ig6yj2g] {
max-width: 780px;
margin: 0 auto;
padding: 26px 14px 60px;
display: grid;
gap: 26px;
}
/* ===== resumo / nota ===== */
.sb-resumo[b-o48ig6yj2g] {
text-align: center;
padding: 36px 22px;
border-radius: 18px;
color: #fff;
background:
radial-gradient(circle at 15% 20%, rgba(253, 230, 138, .18), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(56, 189, 248, .22), transparent 45%),
linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #0f766e 130%);
box-shadow: 0 24px 48px rgba(76, 29, 149, .25);
display: grid;
gap: 14px;
justify-items: center;
}
.sb-kicker[b-o48ig6yj2g] {
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
font-size: .74rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.sb-nota[b-o48ig6yj2g] {
display: flex;
align-items: baseline;
gap: 6px;
}
.sb-nota strong[b-o48ig6yj2g] {
font-size: 4rem;
font-weight: 900;
line-height: 1;
}
.sb-nota span[b-o48ig6yj2g] {
font-size: 1.3rem;
font-weight: 700;
color: rgba(255, 255, 255, .8);
}
.sb-nota-aviso[b-o48ig6yj2g] {
max-width: 480px;
font-size: .82rem;
color: rgba(255, 255, 255, .88);
line-height: 1.5;
}
.sb-stats[b-o48ig6yj2g] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 26px;
margin-top: 4px;
}
.sb-stats > div[b-o48ig6yj2g] {
display: grid;
gap: 2px;
}
.sb-stats strong[b-o48ig6yj2g] {
font-size: 1.7rem;
font-weight: 900;
}
.sb-stats strong span[b-o48ig6yj2g] {
font-size: 1rem;
font-weight: 700;
color: rgba(255, 255, 255, .78);
}
.sb-stats small[b-o48ig6yj2g] {
font-size: .76rem;
color: rgba(255, 255, 255, .82);
}
.sb-compartilhar[b-o48ig6yj2g] {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 11px 22px;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 999px;
background: rgba(255, 255, 255, .14);
color: #fff;
font-weight: 800;
font-size: .92rem;
cursor: pointer;
transition: background .15s ease;
}
.sb-compartilhar:hover[b-o48ig6yj2g] {
background: rgba(255, 255, 255, .26);
}
/* ===== upsell ===== */
.sb-upsell h2[b-o48ig6yj2g] {
text-align: center;
font-size: 1.3rem;
font-weight: 900;
color: #1e293b;
margin-bottom: 16px;
}
.sb-upsell-cards[b-o48ig6yj2g] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.sb-upsell-card[b-o48ig6yj2g] {
display: grid;
gap: 8px;
justify-items: center;
text-align: center;
padding: 24px 20px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 16px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}
.sb-upsell-icone[b-o48ig6yj2g] {
font-size: 1.9rem;
}
.sb-upsell-card strong[b-o48ig6yj2g] {
font-size: 1.05rem;
font-weight: 900;
color: #1e293b;
}
.sb-upsell-card p[b-o48ig6yj2g] {
font-size: .86rem;
color: #64748b;
line-height: 1.45;
}
.sb-upsell-preco[b-o48ig6yj2g] {
font-size: 1.4rem;
font-weight: 900;
color: #0f766e;
}
.sb-upsell-btn[b-o48ig6yj2g] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
border-radius: 10px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-weight: 800;
font-size: .9rem;
text-decoration: none;
box-shadow: 0 8px 18px rgba(124, 58, 237, .28);
}
.sb-upsell-btn:hover[b-o48ig6yj2g] {
color: #fff;
transform: translateY(-1px);
}
/* ===== gabarito ===== */
.sb-gabarito h2[b-o48ig6yj2g] {
font-size: 1.3rem;
font-weight: 900;
color: #1e293b;
margin-bottom: 2px;
}
.sb-gabarito-sub[b-o48ig6yj2g] {
font-size: .88rem;
color: #64748b;
margin-bottom: 16px;
}
.sb-gq[b-o48ig6yj2g] {
padding: 20px 18px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-left: 5px solid #cbd5e1;
border-radius: 14px;
margin-bottom: 14px;
box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.sb-gq.certa[b-o48ig6yj2g] {
border-left-color: #16a34a;
}
.sb-gq.errada[b-o48ig6yj2g] {
border-left-color: #dc2626;
}
.sb-gq-cab[b-o48ig6yj2g] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.sb-gq-num[b-o48ig6yj2g] {
font-weight: 900;
color: #7c3aed;
font-size: .95rem;
}
.sb-gq-materia[b-o48ig6yj2g] {
font-size: .78rem;
color: #94a3b8;
flex: 1;
min-width: 0;
}
.sb-tag[b-o48ig6yj2g] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
}
.sb-tag.certa[b-o48ig6yj2g] {
background: #dcfce7;
color: #166534;
}
.sb-tag.errada[b-o48ig6yj2g] {
background: #fee2e2;
color: #b91c1c;
}
.sb-tag.branco[b-o48ig6yj2g] {
background: #f1f5f9;
color: #64748b;
}
.sb-enunciado[b-o48ig6yj2g] {
color: #1e293b;
font-size: .96rem;
line-height: 1.55;
/* Mesma correcao da prova: enunciado e texto puro com \n. */
white-space: pre-wrap;
}
.sb-enunciado :deep(p)[b-o48ig6yj2g] {
margin: 0 0 8px;
}
.sb-img[b-o48ig6yj2g] {
display: block;
max-width: 100%;
height: auto;
margin: 10px 0;
border-radius: 8px;
}
.sb-alternativas[b-o48ig6yj2g] {
display: grid;
gap: 7px;
margin-top: 12px;
}
.sb-alt[b-o48ig6yj2g] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: .9rem;
color: #475569;
}
.sb-alt.correta[b-o48ig6yj2g] {
border-color: #86efac;
background: #f0fdf4;
color: #166534;
font-weight: 600;
}
.sb-alt.marcada-errada[b-o48ig6yj2g] {
border-color: #fca5a5;
background: #fef2f2;
color: #b91c1c;
}
.sb-letra[b-o48ig6yj2g] {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: #eef2ff;
color: #4338ca;
font-weight: 800;
font-size: .82rem;
}
.sb-alt.correta .sb-letra[b-o48ig6yj2g] {
background: #16a34a;
color: #fff;
}
.sb-alt.marcada-errada .sb-letra[b-o48ig6yj2g] {
background: #dc2626;
color: #fff;
}
.sb-alt-texto[b-o48ig6yj2g] {
flex: 1;
white-space: pre-wrap;
}
.sb-alt-texto :deep(p)[b-o48ig6yj2g] {
margin: 0;
}
.sb-alt-flag[b-o48ig6yj2g] {
font-size: .72rem;
font-weight: 800;
white-space: nowrap;
}
.sb-alt-flag.correta[b-o48ig6yj2g] {
color: #16a34a;
}
.sb-alt-flag.marcada[b-o48ig6yj2g] {
color: #dc2626;
}
.sb-explicacao[b-o48ig6yj2g] {
margin-top: 12px;
padding: 11px 13px;
border-radius: 9px;
background: #f8fafc;
color: #334155;
font-size: .88rem;
line-height: 1.5;
}
.sb-dica[b-o48ig6yj2g] {
margin-top: 8px;
padding: 10px 13px;
border-radius: 9px;
background: #fffbeb;
color: #92400e;
font-size: .85rem;
line-height: 1.5;
}
.sb-dica i[b-o48ig6yj2g] {
color: #d97706;
margin-right: 5px;
}
.sb-gq-rodape[b-o48ig6yj2g] {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 12px;
font-size: .76rem;
color: #94a3b8;
}
.sb-gq-rodape i[b-o48ig6yj2g] {
margin-right: 4px;
}
.sb-conceito[b-o48ig6yj2g] {
color: #7c3aed;
font-weight: 700;
}
/* ===== cartao vazio ===== */
.sb-cartao[b-o48ig6yj2g] {
text-align: center;
max-width: 480px;
margin: 40px auto;
padding: 36px 26px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
display: grid;
gap: 12px;
justify-items: center;
}
.sb-cartao-icone[b-o48ig6yj2g] {
display: grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #eef2ff;
color: #4338ca;
font-size: 1.6rem;
}
.sb-cartao h1[b-o48ig6yj2g] {
font-size: 1.4rem;
font-weight: 900;
color: #1e293b;
}
.sb-cartao p[b-o48ig6yj2g] {
color: #475569;
font-size: .94rem;
line-height: 1.5;
}
/* ===== marca no topo ===== */
.sb-marca[b-o48ig6yj2g] {
display: flex;
justify-content: center;
}
.sb-marca-link[b-o48ig6yj2g] {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #1e293b;
}
.sb-marca-link img[b-o48ig6yj2g] {
width: 38px;
height: 38px;
border-radius: 9px;
}
.sb-marca-link span[b-o48ig6yj2g] {
display: flex;
flex-direction: column;
font-weight: 900;
font-size: 1.05rem;
line-height: 1.1;
}
.sb-marca-link small[b-o48ig6yj2g] {
font-weight: 700;
font-size: .72rem;
color: #6366f1;
}
/* Endereco dentro do cartao da nota (vai junto no print do aluno). */
.sb-resumo-marca[b-o48ig6yj2g] {
margin: 0;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
}
.sb-resumo-marca strong[b-o48ig6yj2g] {
color: #fff;
}
/* ===== fecho com chamada real ===== */
.sb-final[b-o48ig6yj2g] {
text-align: center;
padding: 30px 22px;
border-radius: 18px;
background: linear-gradient(135deg, #f5f3ff, #eef2ff);
border: 1px solid #ddd6fe;
display: grid;
justify-items: center;
gap: 10px;
}
.sb-final-logo[b-o48ig6yj2g] {
width: 46px;
height: 46px;
border-radius: 11px;
}
.sb-final h2[b-o48ig6yj2g] {
margin: 0;
font-size: 1.25rem;
color: #1e293b;
}
.sb-final p[b-o48ig6yj2g] {
margin: 0;
color: #475569;
font-size: .93rem;
max-width: 460px;
}
.sb-final-btns[b-o48ig6yj2g] {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 4px;
}
.sb-final-btn[b-o48ig6yj2g] {
display: inline-flex;
align-items: center;
padding: 11px 20px;
border-radius: 11px;
font-weight: 800;
font-size: .92rem;
text-decoration: none;
color: #4338ca;
background: #fff;
border: 1px solid #c7d2fe;
}
.sb-final-btn.primario[b-o48ig6yj2g] {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
}
.sb-final-marca a[b-o48ig6yj2g] {
color: #6366f1;
font-weight: 800;
font-size: .84rem;
text-decoration: none;
}
@media (max-width: 560px) {
.sb-upsell-cards[b-o48ig6yj2g] {
grid-template-columns: 1fr;
}
.sb-nota strong[b-o48ig6yj2g] {
font-size: 3.2rem;
}
}
/* explicacao por alternativa (raio-x: por que cada uma esta certa/errada) */
.sb-alt-explic[b-o48ig6yj2g] {
flex-basis: 100%;
width: 100%;
margin-top: 8px;
padding: 8px 12px;
border-radius: 8px;
background: rgba(15, 23, 42, .04);
border-left: 3px solid rgba(100, 116, 139, .5);
font-size: .86rem;
line-height: 1.5;
color: #475569;
}
.sb-alt.correta .sb-alt-explic[b-o48ig6yj2g] {
background: rgba(5, 150, 105, .09);
border-left-color: #059669;
color: #065f46;
}
.sb-alt.marcada-errada .sb-alt-explic[b-o48ig6yj2g] {
background: rgba(220, 38, 38, .08);
border-left-color: #dc2626;
color: #991b1b;
}
/* ===== raio-x por materia ===== */
.sb-raiox[b-o48ig6yj2g] { background:#fff; border:1px solid rgba(15,23,42,.1); border-radius:16px; padding:24px 22px; box-shadow:0 12px 30px rgba(15,23,42,.07); }
.sb-raiox h2[b-o48ig6yj2g] { margin:0; font-size:1.3rem; font-weight:900; color:#1e293b; }
.sb-raiox-sub[b-o48ig6yj2g] { margin:4px 0 16px; color:#64748b; font-size:.92rem; }
.sb-raiox-lista[b-o48ig6yj2g] { display:grid; gap:12px; }
.sb-raiox-item[b-o48ig6yj2g] { display:grid; gap:6px; }
.sb-raiox-topo[b-o48ig6yj2g] { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.sb-raiox-mat[b-o48ig6yj2g] { font-weight:800; color:#1e293b; font-size:.95rem; }
.sb-raiox-pct[b-o48ig6yj2g] { font-weight:800; font-size:.88rem; color:#475569; white-space:nowrap; }
.sb-raiox-barra[b-o48ig6yj2g] { height:10px; border-radius:999px; background:rgba(15,23,42,.08); overflow:hidden; }
.sb-raiox-barra span[b-o48ig6yj2g] { display:block; height:100%; border-radius:999px; background:#94a3b8; transition:width .3s ease; }
.sb-raiox-item.fraco .sb-raiox-barra span[b-o48ig6yj2g] { background:#dc2626; }
.sb-raiox-item.medio .sb-raiox-barra span[b-o48ig6yj2g] { background:#f59e0b; }
.sb-raiox-item.forte .sb-raiox-barra span[b-o48ig6yj2g] { background:#059669; }
.sb-raiox-item.fraco .sb-raiox-pct[b-o48ig6yj2g] { color:#dc2626; }
.sb-raiox-item.forte .sb-raiox-pct[b-o48ig6yj2g] { color:#059669; }
.sb-w-0[b-o48ig6yj2g]{width:0}.sb-w-10[b-o48ig6yj2g]{width:10%}.sb-w-20[b-o48ig6yj2g]{width:20%}.sb-w-30[b-o48ig6yj2g]{width:30%}.sb-w-40[b-o48ig6yj2g]{width:40%}.sb-w-50[b-o48ig6yj2g]{width:50%}.sb-w-60[b-o48ig6yj2g]{width:60%}.sb-w-70[b-o48ig6yj2g]{width:70%}.sb-w-80[b-o48ig6yj2g]{width:80%}.sb-w-90[b-o48ig6yj2g]{width:90%}.sb-w-100[b-o48ig6yj2g]{width:100%}
.sb-raiox-foco[b-o48ig6yj2g] { margin-top:16px; padding:12px 16px; border-radius:10px; font-size:.92rem; line-height:1.5; }
.sb-raiox-foco.fraco[b-o48ig6yj2g] { background:rgba(220,38,38,.08); color:#991b1b; border:1px solid rgba(220,38,38,.2); }
.sb-raiox-foco.forte[b-o48ig6yj2g] { background:rgba(5,150,105,.08); color:#065f46; border:1px solid rgba(5,150,105,.2); margin-top:10px; }
.sb-raiox-foco i[b-o48ig6yj2g] { margin-right:6px; }
/* botao "atualizar agora" no card de espera */
.sb-cartao-btn[b-o48ig6yj2g] {
display:inline-block; margin-top:14px; padding:11px 22px; border-radius:10px;
background:#4f46e5; color:#fff; text-decoration:none; font-weight:800; font-size:.95rem;
}
.sb-cartao-btn:hover[b-o48ig6yj2g] { background:#4338ca; color:#fff; }
.se-page[b-ecljqjv59h] {
max-width: 760px;
margin: 0 auto;
padding: 28px 16px 60px;
display: grid;
gap: 26px;
}
.se-carregando[b-ecljqjv59h] {
text-align: center;
color: #64748b;
padding: 60px 0;
display: grid;
gap: 12px;
justify-items: center;
}
/* ===== hero ===== */
.se-hero[b-ecljqjv59h] {
text-align: center;
padding: 40px 22px;
border-radius: 18px;
color: #fff;
box-shadow: 0 24px 48px rgba(76, 29, 149, .25);
background:
radial-gradient(circle at 15% 20%, rgba(253, 230, 138, .18), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(56, 189, 248, .22), transparent 45%),
linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #0f766e 130%);
}
.se-hero.encerrado[b-ecljqjv59h] {
background: linear-gradient(135deg, #475569 0%, #334155 100%);
box-shadow: 0 24px 48px rgba(15, 23, 42, .2);
}
.se-kicker[b-ecljqjv59h] {
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
font-size: .74rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.se-hero h1[b-ecljqjv59h] {
margin: 14px auto 0;
max-width: 620px;
font-size: clamp(1.7rem, 4.6vw, 2.55rem);
font-weight: 900;
line-height: 1.14;
}
.se-sub[b-ecljqjv59h] {
max-width: 540px;
margin: 12px auto 0;
font-size: 1rem;
color: rgba(255, 255, 255, .92);
}
/* ===== contagem regressiva ===== */
.se-contagem[b-ecljqjv59h] {
margin-top: 22px;
display: grid;
gap: 8px;
justify-items: center;
}
.se-contagem-rotulo[b-ecljqjv59h] {
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #fde68a;
}
.se-relogio[b-ecljqjv59h] {
display: flex;
gap: 10px;
}
.se-relogio > div[b-ecljqjv59h] {
min-width: 62px;
padding: 10px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .22);
display: grid;
gap: 2px;
}
.se-relogio strong[b-ecljqjv59h] {
font-size: 1.7rem;
font-weight: 900;
line-height: 1;
}
.se-relogio span[b-ecljqjv59h] {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .04em;
color: rgba(255, 255, 255, .82);
}
.se-janela[b-ecljqjv59h] {
font-size: .88rem;
color: rgba(255, 255, 255, .85);
}
.se-aberto[b-ecljqjv59h],
.se-encerrado-aviso[b-ecljqjv59h] {
margin-top: 20px;
display: grid;
gap: 8px;
justify-items: center;
}
.se-badge-aberto[b-ecljqjv59h],
.se-badge-encerrado[b-ecljqjv59h] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 16px;
border-radius: 999px;
font-weight: 800;
font-size: .9rem;
}
.se-badge-aberto[b-ecljqjv59h] {
background: #dcfce7;
color: #166534;
}
.se-badge-encerrado[b-ecljqjv59h] {
background: rgba(255, 255, 255, .16);
color: #fff;
border: 1px solid rgba(255, 255, 255, .3);
}
/* ===== moldura (o que o aluno leva) ===== */
.se-moldura[b-ecljqjv59h] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 22px;
}
.se-moldura-item[b-ecljqjv59h] {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .9rem;
font-weight: 700;
color: #334155;
}
.se-moldura-item i[b-ecljqjv59h] {
color: #7c3aed;
}
/* ===== formulario ===== */
.se-form[b-ecljqjv59h] {
display: grid;
gap: 14px;
padding: 26px 24px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 16px;
box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.se-form h2[b-ecljqjv59h] {
margin: 0;
font-size: 1.25rem;
font-weight: 900;
color: #1e293b;
}
.se-form-nota[b-ecljqjv59h] {
margin: -6px 0 4px;
font-size: .9rem;
color: #64748b;
}
.se-campo[b-ecljqjv59h] {
display: grid;
gap: 5px;
}
.se-campo > span[b-ecljqjv59h] {
font-size: .88rem;
font-weight: 700;
color: #334155;
}
.se-campo > span em[b-ecljqjv59h] {
font-style: normal;
color: #7c3aed;
font-weight: 700;
}
.se-campo input[b-ecljqjv59h] {
padding: 11px 13px;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-size: .96rem;
}
.se-campo input:focus[b-ecljqjv59h] {
outline: none;
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.se-dica[b-ecljqjv59h] {
font-size: .78rem;
color: #64748b;
}
.se-linha[b-ecljqjv59h] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.se-check[b-ecljqjv59h] {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: .88rem;
color: #475569;
line-height: 1.4;
cursor: pointer;
}
.se-check input[b-ecljqjv59h] {
margin-top: 2px;
width: 17px;
height: 17px;
flex-shrink: 0;
accent-color: #7c3aed;
}
.se-check em[b-ecljqjv59h] {
font-style: normal;
color: #94a3b8;
}
.se-btn[b-ecljqjv59h] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding: 14px 20px;
border: none;
border-radius: 11px;
background: linear-gradient(135deg, #7c3aed, #4f46e5);
color: #fff;
font-size: 1rem;
font-weight: 850;
cursor: pointer;
box-shadow: 0 10px 22px rgba(124, 58, 237, .3);
transition: transform .15s ease;
}
.se-btn:hover:not(:disabled)[b-ecljqjv59h] {
transform: translateY(-2px);
}
/* Desabilitado aqui e SEMPRE "carregando" (circuito subindo ou inscricao em voo),
nunca "indisponivel" — por isso o gradiente fica e o cursor e de espera. */
.se-btn:disabled[b-ecljqjv59h] {
opacity: .7;
cursor: progress;
}
.se-legal[b-ecljqjv59h] {
margin: 2px 0 0;
font-size: .78rem;
color: #94a3b8;
line-height: 1.5;
}
.se-legal a[b-ecljqjv59h] {
color: #7c3aed;
font-weight: 700;
}
.se-erro[b-ecljqjv59h] {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-radius: 10px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .9rem;
font-weight: 600;
}
.se-info[b-ecljqjv59h] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-radius: 10px;
background: #f1f5f9;
color: #475569;
font-size: .9rem;
}
@media (max-width: 560px) {
.se-linha[b-ecljqjv59h] {
grid-template-columns: 1fr;
}
.se-relogio > div[b-ecljqjv59h] {
min-width: 54px;
}
.se-relogio strong[b-ecljqjv59h] {
font-size: 1.4rem;
}
}
/* ===== secoes de cards grandes (landing do evento) ===== */
.se-secao[b-ecljqjv59h] { text-align: center; display: grid; gap: 6px; }
.se-secao-titulo[b-ecljqjv59h] { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 900; color: #1e293b; margin: 0; }
.se-secao-sub[b-ecljqjv59h] { color: #64748b; font-size: 1rem; margin: 0 0 6px; }
.se-cards[b-ecljqjv59h] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.se-cards-4[b-ecljqjv59h] { grid-template-columns: repeat(2, 1fr); }
.se-card[b-ecljqjv59h] {
text-align: left; padding: 26px 24px; border-radius: 18px; background: #fff;
border: 1px solid rgba(15, 23, 42, .1); box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
display: grid; gap: 8px; align-content: start; transition: transform .16s ease, box-shadow .16s ease;
}
.se-card:hover[b-ecljqjv59h] { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(15, 23, 42, .13); }
.se-card h3[b-ecljqjv59h] { margin: 0; font-size: 1.2rem; font-weight: 800; color: #1e293b; }
.se-card p[b-ecljqjv59h] { margin: 0; color: #475569; font-size: .95rem; line-height: 1.5; }
.se-card-num[b-ecljqjv59h] {
display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, #6d28d9, #4f46e5); color: #fff; font-size: 1.2rem; font-weight: 900;
}
.se-card-area[b-ecljqjv59h] { text-align: center; justify-items: center; }
.se-area-ico[b-ecljqjv59h] { font-size: 2.4rem; }
@media (max-width: 680px) { .se-cards[b-ecljqjv59h], .se-cards-4[b-ecljqjv59h] { grid-template-columns: 1fr; } }
/* aviso de retomada (fechou aba / caiu energia) */
.se-retomar[b-ecljqjv59h] {
margin: 2px 0 0;
padding: 10px 13px;
border-radius: 10px;
background: #eef2ff;
border: 1px solid #c7d2fe;
color: #3730a3;
font-size: .82rem;
line-height: 1.5;
}
.se-retomar i[b-ecljqjv59h] { margin-right: 5px; }
/* ---- boletim de exemplo: "PDF aberto em parte" (teaser do resultado) ---- */
.se-boletim-wrap[b-ecljqjv59h] {
position: relative; max-width: 560px; margin: 18px auto 0;
/* corta a folha: so a parte de cima aparece, como documento espiado */
max-height: 430px; overflow: hidden; border-radius: 14px 14px 0 0;
}
.se-boletim-doc[b-ecljqjv59h] {
background: #fff; border: 1px solid rgba(15, 23, 42, .12); border-bottom: 0;
border-radius: 14px 14px 0 0; box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
padding: 22px 26px 40px; text-align: left; transform: rotate(-.4deg);
}
.se-bd-topo[b-ecljqjv59h] { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #4f46e5; padding-bottom: 10px; }
.se-bd-logo[b-ecljqjv59h] { font-weight: 900; color: #4f46e5; font-size: 1.05rem; }
.se-bd-tag[b-ecljqjv59h] { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #64748b; }
.se-bd-aluno[b-ecljqjv59h] { display: grid; gap: 2px; margin-top: 12px; }
.se-bd-aluno strong[b-ecljqjv59h] { font-size: 1.05rem; color: #1e293b; }
.se-bd-aluno span[b-ecljqjv59h] { font-size: .8rem; color: #64748b; }
.se-bd-notas[b-ecljqjv59h] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.se-bd-nota[b-ecljqjv59h] { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 6px; text-align: center; display: grid; gap: 2px; }
.se-bd-nota-num[b-ecljqjv59h] { font-size: 1.45rem; font-weight: 900; color: #4f46e5; line-height: 1; }
.se-bd-nota-num em[b-ecljqjv59h] { font-style: normal; font-size: .85rem; color: #94a3b8; }
.se-bd-nota-rot[b-ecljqjv59h] { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #64748b; text-transform: uppercase; }
.se-bd-sec[b-ecljqjv59h] { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #94a3b8; margin: 16px 0 8px; }
.se-bd-barra[b-ecljqjv59h] { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 8px; margin-top: 6px; }
.se-bd-barra span[b-ecljqjv59h] { font-size: .8rem; color: #334155; font-weight: 600; }
.se-bd-barra em[b-ecljqjv59h] { font-style: normal; font-size: .75rem; color: #64748b; text-align: right; }
.se-bd-trilho[b-ecljqjv59h] { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.se-bd-trilho i[b-ecljqjv59h] { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6d28d9, #4f46e5); }
.se-bd-trilho i.fraco[b-ecljqjv59h] { background: linear-gradient(90deg, #f59e0b, #f97316); }
.se-bd-gabarito p[b-ecljqjv59h] { margin: 6px 0 0; font-size: .8rem; color: #475569; line-height: 1.5; }
.se-boletim-fade[b-ecljqjv59h] {
position: absolute; inset: auto 0 0 0; height: 150px; pointer-events: none;
/* funde com o fundo da secao — a folha "some" como pagina dobrada */
background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, #f8fafc 88%);
}
.se-boletim-legenda[b-ecljqjv59h] { margin: 10px 0 0; font-size: .78rem; color: #64748b; text-align: center; }
@media (max-width: 680px) {
.se-boletim-wrap[b-ecljqjv59h] { max-height: 400px; }
.se-boletim-doc[b-ecljqjv59h] { padding: 16px 16px 34px; }
.se-bd-barra[b-ecljqjv59h] { grid-template-columns: 78px 1fr 34px; }
}
/* ===== marca no topo (fundador 23/07: landing nao tinha logo nem link) ===== */
.se-marca[b-ecljqjv59h] {
display: flex;
justify-content: center;
margin-bottom: 4px;
}
.se-marca-link[b-ecljqjv59h] {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #1e293b;
}
.se-marca-link img[b-ecljqjv59h] {
width: 38px;
height: 38px;
border-radius: 9px;
}
.se-marca-link span[b-ecljqjv59h] {
display: flex;
flex-direction: column;
font-weight: 900;
font-size: 1.05rem;
line-height: 1.1;
}
.se-marca-link small[b-ecljqjv59h] {
font-weight: 700;
font-size: .72rem;
color: #6366f1;
}
/* ===== rodape com saidas pro GeraProva ===== */
.se-rodape[b-ecljqjv59h] {
text-align: center;
padding: 34px 22px;
border-radius: 18px;
background: linear-gradient(135deg, #f5f3ff, #eef2ff);
border: 1px solid #ddd6fe;
display: grid;
justify-items: center;
gap: 8px;
}
.se-rodape-logo[b-ecljqjv59h] {
width: 48px;
height: 48px;
border-radius: 12px;
}
.se-rodape-nome[b-ecljqjv59h] {
margin: 0;
font-weight: 900;
font-size: 1.15rem;
color: #1e293b;
}
.se-rodape-txt[b-ecljqjv59h] {
margin: 0;
max-width: 440px;
color: #475569;
font-size: .9rem;
}
.se-rodape-links[b-ecljqjv59h] {
display: flex;
flex-wrap: wrap;
gap: 9px;
justify-content: center;
margin-top: 6px;
}
.se-rodape-links a[b-ecljqjv59h] {
padding: 10px 18px;
border-radius: 10px;
background: #fff;
border: 1px solid #c7d2fe;
color: #4338ca;
font-weight: 800;
font-size: .88rem;
text-decoration: none;
}
.se-rodape-links a:first-child[b-ecljqjv59h] {
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
}
.se-rodape-legal[b-ecljqjv59h] {
display: flex;
gap: 14px;
justify-content: center;
margin-top: 6px;
}
.se-rodape-legal a[b-ecljqjv59h] {
color: #64748b;
font-size: .8rem;
text-decoration: underline;
}
.se-rodape-marca a[b-ecljqjv59h] {
color: #6366f1;
font-weight: 800;
font-size: .84rem;
text-decoration: none;
}
.legal[b-uuirf0xcae] {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.7;
}
.legal h1[b-uuirf0xcae] {
font-size: 2rem;
font-weight: 800;
margin-bottom: 8px;
color: var(--gp-vermelho);
}
.legal .updated[b-uuirf0xcae] {
color: var(--gp-tinta-media);
font-size: .85rem;
margin-bottom: 40px;
}
.legal h2[b-uuirf0xcae] {
font-size: 1.15rem;
font-weight: 700;
color: var(--gp-tinta);
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gp-linha);
}
.legal p[b-uuirf0xcae],
.legal li[b-uuirf0xcae] {
font-size: .95rem;
color: var(--gp-tinta-media);
margin-bottom: 12px;
}
.legal ul[b-uuirf0xcae] {
padding-left: 20px;
margin-bottom: 16px;
}
.legal li[b-uuirf0xcae] {
margin-bottom: 6px;
}
.legal a[b-uuirf0xcae] {
color: var(--gp-vermelho);
}
.legal .card[b-uuirf0xcae] {
background: var(--gp-papel);
border: 1px solid var(--gp-linha);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
.sp-page[b-3zgn0lqqlr] {
max-width: 780px;
margin: 0 auto;
padding: 18px 14px 70px;
display: grid;
gap: 16px;
}
/* ===== escolha da area ===== */
.sp-escolha-cab[b-3zgn0lqqlr] {
text-align: center;
padding: 24px 12px 6px;
}
.sp-escolha-cab h1[b-3zgn0lqqlr] {
font-size: clamp(1.5rem, 4vw, 2.1rem);
font-weight: 900;
color: #1e293b;
}
.sp-escolha-cab p[b-3zgn0lqqlr] {
max-width: 520px;
margin: 10px auto 0;
color: #475569;
font-size: .96rem;
}
.sp-areas[b-3zgn0lqqlr] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sp-area[b-3zgn0lqqlr] {
display: grid;
gap: 4px;
justify-items: center;
text-align: center;
padding: 24px 18px;
border: 2px solid #e2e8f0;
border-radius: 16px;
background: #fff;
cursor: pointer;
box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sp-area:hover:not(:disabled)[b-3zgn0lqqlr] {
transform: translateY(-3px);
border-color: #7c3aed;
box-shadow: 0 16px 34px rgba(124, 58, 237, .16);
}
.sp-area:disabled[b-3zgn0lqqlr] {
opacity: .7;
cursor: default;
}
.sp-area-icone[b-3zgn0lqqlr] {
font-size: 2.1rem;
}
.sp-area strong[b-3zgn0lqqlr] {
font-size: 1.1rem;
font-weight: 900;
color: #1e293b;
}
.sp-area small[b-3zgn0lqqlr] {
font-size: .8rem;
color: #64748b;
line-height: 1.35;
}
/* ===== topo com timer ===== */
.sp-topo[b-3zgn0lqqlr] {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.sp-topo-info[b-3zgn0lqqlr] {
display: grid;
gap: 1px;
min-width: 0;
}
.sp-topo-info strong[b-3zgn0lqqlr] {
font-size: 1rem;
font-weight: 900;
color: #1e293b;
}
.sp-topo-info span[b-3zgn0lqqlr] {
font-size: .8rem;
color: #64748b;
}
.sp-timer[b-3zgn0lqqlr] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 999px;
background: #eef2ff;
color: #4338ca;
font-weight: 900;
font-variant-numeric: tabular-nums;
font-size: 1.05rem;
white-space: nowrap;
}
.sp-timer.urgente[b-3zgn0lqqlr] {
background: #fef2f2;
color: #dc2626;
animation: sp-pisca-b-3zgn0lqqlr 1s ease-in-out infinite;
}
@keyframes sp-pisca-b-3zgn0lqqlr {
50% { opacity: .55; }
}
/* ===== progresso ===== */
.sp-progresso[b-3zgn0lqqlr] {
display: flex;
align-items: center;
gap: 12px;
font-size: .82rem;
color: #64748b;
}
.sp-progresso-barra[b-3zgn0lqqlr] {
flex: 1;
height: 8px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.sp-progresso-barra > div[b-3zgn0lqqlr] {
height: 100%;
background: linear-gradient(90deg, #7c3aed, #4f46e5);
transition: width .25s ease;
}
/* ===== questao ===== */
.sp-questao[b-3zgn0lqqlr] {
padding: 22px 20px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}
.sp-questao-cab[b-3zgn0lqqlr] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.sp-qnum[b-3zgn0lqqlr] {
font-weight: 900;
color: #7c3aed;
font-size: .92rem;
}
.sp-materia[b-3zgn0lqqlr] {
font-size: .78rem;
color: #94a3b8;
text-align: right;
}
.sp-enunciado[b-3zgn0lqqlr] {
color: #1e293b;
font-size: 1rem;
line-height: 1.6;
/* Texto_questao e texto PURO com \n (98% do acervo, zero tag HTML): sem
pre-wrap o enunciado colapsa num paredao ilegivel. Mesma regra da
CriarProva (.q-texto). */
white-space: pre-wrap;
}
.sp-enunciado :deep(p)[b-3zgn0lqqlr] {
margin: 0 0 10px;
}
.sp-img[b-3zgn0lqqlr] {
display: block;
max-width: 100%;
height: auto;
margin: 12px 0;
border-radius: 8px;
}
.sp-alternativas[b-3zgn0lqqlr] {
display: grid;
gap: 10px;
margin-top: 16px;
}
.sp-alt[b-3zgn0lqqlr] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 15px;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: #fff;
text-align: left;
cursor: pointer;
font-size: .96rem;
color: #334155;
transition: border-color .12s ease, background .12s ease;
}
.sp-alt:hover[b-3zgn0lqqlr] {
border-color: #c4b5fd;
background: #faf5ff;
}
.sp-alt.marcada[b-3zgn0lqqlr] {
border-color: #7c3aed;
background: #f3e8ff;
font-weight: 600;
}
.sp-letra[b-3zgn0lqqlr] {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: #eef2ff;
color: #4338ca;
font-weight: 900;
font-size: .9rem;
}
.sp-alt.marcada .sp-letra[b-3zgn0lqqlr] {
background: #7c3aed;
color: #fff;
}
.sp-alt-texto :deep(p)[b-3zgn0lqqlr] {
margin: 0;
}
/* Alternativas tambem vem como texto puro. */
.sp-alt-texto[b-3zgn0lqqlr] {
white-space: pre-wrap;
}
/* ===== navegacao ===== */
.sp-navegacao[b-3zgn0lqqlr] {
display: flex;
justify-content: space-between;
gap: 12px;
}
.sp-nav-btn[b-3zgn0lqqlr] {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 18px;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #fff;
color: #334155;
font-weight: 700;
font-size: .92rem;
cursor: pointer;
}
.sp-nav-btn:hover:not(:disabled)[b-3zgn0lqqlr] {
border-color: #7c3aed;
color: #4338ca;
}
.sp-nav-btn:disabled[b-3zgn0lqqlr] {
opacity: .45;
cursor: default;
}
/* ===== mapa de questoes ===== */
.sp-mapa[b-3zgn0lqqlr] {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 14px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 12px;
}
.sp-mapa-item[b-3zgn0lqqlr] {
width: 36px;
height: 36px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #64748b;
font-weight: 700;
font-size: .82rem;
cursor: pointer;
}
.sp-mapa-item.ok[b-3zgn0lqqlr] {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.sp-mapa-item.atual[b-3zgn0lqqlr] {
border-color: #7c3aed;
box-shadow: 0 0 0 2px rgba(124, 58, 237, .3);
color: #4338ca;
}
/* ===== rodape ===== */
.sp-rodape[b-3zgn0lqqlr] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.sp-rodape > span[b-3zgn0lqqlr] {
font-size: .85rem;
color: #64748b;
}
.sp-enviar[b-3zgn0lqqlr] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border: none;
border-radius: 11px;
background: linear-gradient(135deg, #16a34a, #15803d);
color: #fff;
font-weight: 850;
font-size: .98rem;
cursor: pointer;
box-shadow: 0 10px 22px rgba(22, 163, 74, .28);
}
.sp-enviar:disabled[b-3zgn0lqqlr] {
opacity: .7;
cursor: default;
}
/* ===== cartoes de estado (tempo esgotado / erro) ===== */
.sp-cartao[b-3zgn0lqqlr] {
text-align: center;
max-width: 460px;
margin: 40px auto;
padding: 36px 26px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
display: grid;
gap: 12px;
justify-items: center;
}
.sp-cartao h1[b-3zgn0lqqlr] {
font-size: 1.5rem;
font-weight: 900;
color: #1e293b;
}
.sp-cartao p[b-3zgn0lqqlr] {
color: #475569;
}
.sp-cartao-icone[b-3zgn0lqqlr] {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
font-size: 1.8rem;
font-weight: 900;
}
.sp-cartao-icone.tempo[b-3zgn0lqqlr] {
background: #fef3c7;
color: #d97706;
}
.sp-cartao-icone.erro[b-3zgn0lqqlr] {
background: #fee2e2;
color: #dc2626;
}
/* ===== erro inline ===== */
.sp-erro[b-3zgn0lqqlr] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 15px;
border-radius: 10px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .9rem;
font-weight: 600;
}
@media (max-width: 560px) {
.sp-areas[b-3zgn0lqqlr] {
grid-template-columns: 1fr;
}
.sp-mapa-item[b-3zgn0lqqlr] {
width: 32px;
height: 32px;
}
}
/* estado de retomada automatica (tem prova em andamento) */
.sp-retomando[b-3zgn0lqqlr] {
text-align: center;
display: grid;
gap: 12px;
justify-items: center;
padding: 70px 20px;
color: #475569;
}
.sp-retomando h1[b-3zgn0lqqlr] { margin: 6px 0 0; font-size: 1.5rem; font-weight: 900; color: #1e293b; }
.sp-retomando p[b-3zgn0lqqlr] { margin: 0; font-size: .95rem; max-width: 420px; }
.sp-retomando .spinner-border[b-3zgn0lqqlr] { color: #4f46e5; width: 2.2rem; height: 2.2rem; }
/* ---- escolha de tamanho da prova (db/150) ---- */
.sp-tamanhos[b-3zgn0lqqlr] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 640px;
margin: 0 auto;
}
.sp-tamanho[b-3zgn0lqqlr] {
display: grid;
gap: 2px;
justify-items: center;
text-align: center;
padding: 22px 10px;
border: 2px solid #e2e8f0;
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.sp-tamanho:hover:not(:disabled)[b-3zgn0lqqlr] {
transform: translateY(-3px);
border-color: #6d28d9;
box-shadow: 0 14px 30px rgba(76, 29, 149, .16);
}
.sp-tamanho:disabled[b-3zgn0lqqlr] { opacity: .6; cursor: wait; }
.sp-tamanho-qtd[b-3zgn0lqqlr] { font-size: 2rem; font-weight: 900; color: #4f46e5; line-height: 1; }
.sp-tamanho strong[b-3zgn0lqqlr] { font-size: .8rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
.sp-tamanho small[b-3zgn0lqqlr] { color: #64748b; font-size: .85rem; font-weight: 600; margin-top: 4px; }
.sp-voltar-area[b-3zgn0lqqlr] {
display: block;
margin: 16px auto 0;
background: none;
border: 0;
color: #6d28d9;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
}
.sp-voltar-area:hover[b-3zgn0lqqlr] { text-decoration: underline; }
@media (max-width: 560px) {
.sp-tamanhos[b-3zgn0lqqlr] { grid-template-columns: repeat(2, 1fr); }
}
.legal[b-zjhyah9vah] {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.7;
}
.legal h1[b-zjhyah9vah] {
font-size: 2rem;
font-weight: 800;
margin-bottom: 8px;
color: #667eea;
}
.legal .updated[b-zjhyah9vah] {
color: #6b7280;
font-size: .85rem;
margin-bottom: 40px;
}
.legal h2[b-zjhyah9vah] {
font-size: 1.15rem;
font-weight: 700;
color: #1f2937;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.legal p[b-zjhyah9vah],
.legal li[b-zjhyah9vah] {
font-size: .95rem;
color: #374151;
margin-bottom: 12px;
}
.legal ul[b-zjhyah9vah] {
padding-left: 20px;
margin-bottom: 16px;
}
.legal li[b-zjhyah9vah] {
margin-bottom: 6px;
}
.legal a[b-zjhyah9vah] {
color: #667eea;
}
.legal .card[b-zjhyah9vah] {
background: #f8f9fc;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
.legal .card.destaque[b-zjhyah9vah] {
background: #fef6f6;
border-color: #f5c2c2;
}
/* ===== Resposta de simulado pelo aluno (celular) — mesma linguagem visual do painel de captura ===== */
.sr-fundo[b-bc6gb8vnwo] {
min-height: 100vh;
display: grid;
place-items: start center;
padding: 24px 14px;
background:
radial-gradient(900px 460px at 110% -10%, rgba(129, 140, 248, .3), transparent 60%),
linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.sr-card[b-bc6gb8vnwo] {
width: min(480px, 100%);
margin-top: 4vh;
padding: 32px clamp(20px, 5vw, 40px);
border-radius: 20px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
text-align: center;
}
.sr-logo[b-bc6gb8vnwo] {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin: 0 auto 14px;
border-radius: 15px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 12px 26px rgba(79, 70, 229, .35);
}
.sr-card h1[b-bc6gb8vnwo] {
margin: 0 0 4px;
color: #0f172a;
font-size: 1.4rem;
font-weight: 900;
}
.sr-sub[b-bc6gb8vnwo] {
margin: 0 0 20px;
color: #64748b;
font-size: .93rem;
line-height: 1.5;
}
.sr-alerta[b-bc6gb8vnwo] {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 11px 14px;
border-radius: 11px;
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
font-size: .87rem;
font-weight: 700;
text-align: left;
}
.sr-botao-foto[b-bc6gb8vnwo] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 62px;
border-radius: 15px;
color: #fff;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #4f46e5, #7c3aed);
box-shadow: 0 14px 30px rgba(79, 70, 229, .4);
transition: transform .14s ease;
}
.sr-botao-foto:hover:not(.desabilitado)[b-bc6gb8vnwo] { transform: translateY(-2px); }
.sr-botao-foto.desabilitado[b-bc6gb8vnwo] { opacity: .6; cursor: wait; }
.sr-botao-foto[b-bc6gb8vnwo]  input[type="file"] { display: none; }
.sr-progresso[b-bc6gb8vnwo] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 16px;
padding: 13px 15px;
border-radius: 12px;
background: #eef2ff;
border: 1px solid #c7d2fe;
color: #4338ca;
font-size: .88rem;
font-weight: 750;
}
.sr-spinner[b-bc6gb8vnwo] {
flex: 0 0 auto;
width: 17px;
height: 17px;
border-radius: 50%;
border: 3px solid rgba(79, 70, 229, .25);
border-top-color: #4f46e5;
animation: srGirar-b-bc6gb8vnwo .8s linear infinite;
}
@keyframes srGirar-b-bc6gb8vnwo {
to { transform: rotate(360deg); }
}
/* ===== resultado ===== */
.sr-titulo-resultado[b-bc6gb8vnwo] { font-size: 1.2rem; }
.sr-nota[b-bc6gb8vnwo] {
margin: 6px 0 4px;
font-size: 2.6rem;
font-weight: 900;
}
.sr-nota small[b-bc6gb8vnwo] {
font-size: 1rem;
font-weight: 700;
color: #94a3b8;
margin-left: 4px;
}
.sr-acertos[b-bc6gb8vnwo] {
margin: 0 0 10px;
color: #475569;
font-size: .88rem;
font-weight: 650;
}
.sr-bar[b-bc6gb8vnwo] {
height: 8px;
margin-bottom: 16px;
border-radius: 99px;
background: #f1f5f9;
overflow: hidden;
}
.sr-bar i[b-bc6gb8vnwo] { display: block; height: 100%; border-radius: 99px; }
.sr-rev[b-bc6gb8vnwo] {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 18px;
padding: 12px 14px;
border-radius: 12px;
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
font-size: .85rem;
line-height: 1.5;
text-align: left;
}
.sr-grid[b-bc6gb8vnwo] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
gap: 8px;
margin-bottom: 22px;
}
.sr-q[b-bc6gb8vnwo] {
display: grid;
gap: 2px;
padding: 8px 4px;
border-radius: 10px;
font-size: .95rem;
font-weight: 900;
text-align: center;
}
.sr-q .n[b-bc6gb8vnwo] {
font-size: .62rem;
font-weight: 700;
opacity: .65;
}
.sr-q.ok[b-bc6gb8vnwo] { background: #ecfdf5; color: #047857; }
.sr-q.no[b-bc6gb8vnwo] { background: #fef2f2; color: #b91c1c; }
.sr-q.rev[b-bc6gb8vnwo] { background: #fffbeb; color: #92400e; }
.sr-again[b-bc6gb8vnwo] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 50px;
border: 0;
border-radius: 12px;
color: #fff;
font-size: .95rem;
font-weight: 900;
cursor: pointer;
background: linear-gradient(120deg, #4f46e5, #7c3aed);
box-shadow: 0 10px 24px rgba(79, 70, 229, .35);
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-8jc0sl5pnq] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-8jc0sl5pnq] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-8jc0sl5pnq] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-8jc0sl5pnq] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-8jc0sl5pnq] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-8jc0sl5pnq] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-8jc0sl5pnq 20s linear infinite;
}
@keyframes particles-b-8jc0sl5pnq { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-8jc0sl5pnq] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-8jc0sl5pnq] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-8jc0sl5pnq] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-8jc0sl5pnq] { color: var(--gp-latao); }
.hero .subtitle[b-8jc0sl5pnq] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-8jc0sl5pnq] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-8jc0sl5pnq] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-8jc0sl5pnq] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-8jc0sl5pnq] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-8jc0sl5pnq] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-8jc0sl5pnq] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-8jc0sl5pnq] { text-align: center; }
.proof-number[b-8jc0sl5pnq] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-8jc0sl5pnq] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-8jc0sl5pnq] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-8jc0sl5pnq] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-8jc0sl5pnq] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-8jc0sl5pnq] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-8jc0sl5pnq] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-8jc0sl5pnq] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-8jc0sl5pnq] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-8jc0sl5pnq] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-8jc0sl5pnq] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-8jc0sl5pnq] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-8jc0sl5pnq] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-8jc0sl5pnq] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-8jc0sl5pnq] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-8jc0sl5pnq] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-8jc0sl5pnq] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-8jc0sl5pnq] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-8jc0sl5pnq] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-8jc0sl5pnq] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-8jc0sl5pnq] { max-width: 720px; margin: 0 auto; }
.faq-item[b-8jc0sl5pnq] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-8jc0sl5pnq] { border-color: var(--gp-vermelho); }
.faq-question[b-8jc0sl5pnq] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-8jc0sl5pnq]::-webkit-details-marker { display: none; }
.faq-question i[b-8jc0sl5pnq] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-8jc0sl5pnq] { transform: rotate(180deg); }
.faq-answer[b-8jc0sl5pnq] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-8jc0sl5pnq] { max-width: 900px; }
.seo-text p[b-8jc0sl5pnq] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-8jc0sl5pnq] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-8jc0sl5pnq]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-8jc0sl5pnq] { position: relative; z-index: 1; }
.cta-title[b-8jc0sl5pnq] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-8jc0sl5pnq] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-8jc0sl5pnq] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-8jc0sl5pnq] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
/* Paleta caderno (08/08): hero = CAPA escura com creme, corpo = papel com tinta.
Tokens de wwwroot/app.css — nada de cor chumbada aqui. */
.sb-root[b-ce8n04dwzh] {
background: var(--gp-papel);
color: var(--gp-tinta);
padding-bottom: 72px;
}
.sb-page[b-ce8n04dwzh] {
width: min(820px, 100% - 32px);
margin: 0 auto;
}
/* ---------- Hero: capa ---------- */
.sb-hero[b-ce8n04dwzh] {
background: var(--gp-capa);
color: var(--gp-creme);
border-radius: 0 0 22px 22px;
padding: 56px clamp(20px, 5vw, 48px) 48px;
margin: 0 calc(-1 * clamp(20px, 5vw, 48px)) 40px;
}
.sb-tag[b-ce8n04dwzh] {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--gp-latao);
border: 1px solid var(--gp-creme-linha);
background: var(--gp-creme-tenue);
border-radius: 999px;
padding: 5px 13px;
margin-bottom: 18px;
}
.sb-hero h1[b-ce8n04dwzh] {
font-size: clamp(1.7rem, 4.2vw, 2.6rem);
font-weight: 800;
line-height: 1.18;
margin: 0 0 16px;
color: var(--gp-creme);
}
.sb-lead[b-ce8n04dwzh] {
font-size: clamp(1rem, 2.1vw, 1.12rem);
line-height: 1.65;
margin: 0;
color: var(--gp-creme-suave);
}
/* ---------- Números ---------- */
.sb-numeros[b-ce8n04dwzh] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 44px;
}
.sb-num[b-ce8n04dwzh] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha);
border-radius: 14px;
padding: 20px 18px;
}
.sb-num strong[b-ce8n04dwzh] {
display: block;
font-size: 1.65rem;
font-weight: 800;
color: var(--gp-ink);
margin-bottom: 6px;
}
.sb-num span[b-ce8n04dwzh] {
font-size: .92rem;
line-height: 1.5;
color: var(--gp-tinta-media);
}
/* ---------- Blocos de texto ---------- */
.sb-bloco[b-ce8n04dwzh] {
margin-bottom: 38px;
}
.sb-bloco h2[b-ce8n04dwzh] {
font-size: clamp(1.2rem, 2.6vw, 1.45rem);
font-weight: 800;
color: var(--gp-ink);
margin: 0 0 14px;
}
.sb-bloco p[b-ce8n04dwzh] {
font-size: 1.02rem;
line-height: 1.72;
margin: 0 0 14px;
color: var(--gp-tinta);
}
.sb-contato[b-ce8n04dwzh] {
padding-top: 6px;
font-weight: 600;
}
.sb-contato a[b-ce8n04dwzh] {
color: var(--gp-indigo);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Links do rodapé da página ---------- */
.sb-links[b-ce8n04dwzh] {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding-top: 26px;
border-top: 1px solid var(--gp-linha);
}
.sb-links a[b-ce8n04dwzh] {
font-size: .95rem;
font-weight: 600;
color: var(--gp-tinta-media);
text-decoration: none;
}
.sb-links a:hover[b-ce8n04dwzh] {
color: var(--gp-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 560px) {
.sb-hero[b-ce8n04dwzh] { padding-top: 40px; padding-bottom: 36px; }
}
.legal[b-ohqk2h83u5] {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px 80px;
line-height: 1.7;
}
.legal h1[b-ohqk2h83u5] {
font-size: 2rem;
font-weight: 800;
margin-bottom: 8px;
color: var(--gp-vermelho);
}
.legal .updated[b-ohqk2h83u5] {
color: var(--gp-tinta-media);
font-size: .85rem;
margin-bottom: 40px;
}
.legal h2[b-ohqk2h83u5] {
font-size: 1.15rem;
font-weight: 700;
color: var(--gp-tinta);
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gp-linha);
}
.legal p[b-ohqk2h83u5],
.legal li[b-ohqk2h83u5] {
font-size: .95rem;
color: var(--gp-tinta-media);
margin-bottom: 12px;
}
.legal ul[b-ohqk2h83u5] {
padding-left: 20px;
margin-bottom: 16px;
}
.legal li[b-ohqk2h83u5] {
margin-bottom: 6px;
}
.legal a[b-ohqk2h83u5] {
color: var(--gp-vermelho);
}
.legal .card[b-ohqk2h83u5] {
background: var(--gp-papel);
border: 1px solid var(--gp-linha);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
/* PALETA CADERNO (08/08/2026). Nenhum hex de paleta aqui: toda cor vem dos tokens
de wwwroot/app.css. Arquivo COMPARTILHADO por 6 landings (cópias idênticas) —
mexeu aqui, replicar nas outras 5.
ATENÇÃO AO CONVERTER: esta família era uma página INTEIRAMENTE ESCURA — o
.seo-page pintava fundo preto e color:#fff, e MUITO elemento não declarava cor
própria, só herdava esse branco. Ao virar papel, cada herança dessas viraria
texto branco no claro. Por isso todo bloco que continua escuro (hero, CTA) agora
declara color EXPLÍCITO, e todo glifo sobre botão vermelho (.feature-icon,
.step-number) declara color:#fff em vez de contar com a herança. */
.seo-page[b-ys6e1c4qcn] {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--gp-papel);
color: var(--gp-tinta);
line-height: 1.6;
display: block;
overflow-x: hidden;
}
.seo-page .container[b-ys6e1c4qcn] { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.seo-page .text-center[b-ys6e1c4qcn] { text-align: center; }
/* HERO — a capa do fichário */
.hero[b-ys6e1c4qcn] {
min-height: 82vh; position: relative; display: flex;
align-items: center; justify-content: center; overflow: hidden;
color: var(--gp-creme);
background: var(--gp-capa);
}
.hero-background[b-ys6e1c4qcn] {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, var(--gp-capa-alta) 0%, transparent 52%),
radial-gradient(circle at 80% 20%, var(--gp-capa-alta) 0%, transparent 52%),
var(--gp-capa);
}
.particles-bg[b-ys6e1c4qcn] {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 40px 70px, var(--gp-creme-tenue), transparent),
radial-gradient(1px 1px at 90px 40px, var(--gp-creme-linha), transparent),
radial-gradient(1px 1px at 130px 80px, var(--gp-creme-tenue), transparent),
radial-gradient(2px 2px at 160px 30px, var(--gp-creme-tenue), transparent);
background-size: 200px 100px;
animation: particles-b-ys6e1c4qcn 20s linear infinite;
}
@keyframes particles-b-ys6e1c4qcn { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
.hero-content[b-ys6e1c4qcn] {
position: relative; z-index: 2; text-align: center;
max-width: 960px; padding: 80px 20px 40px;
}
.hero-badge[b-ys6e1c4qcn] {
display: inline-block; background: var(--gp-creme-tenue);
backdrop-filter: blur(20px); border: 1px solid var(--gp-creme-linha);
border-radius: 50px; padding: 8px 24px; font-size: 0.85rem;
color: var(--gp-creme);
font-weight: 600; margin-bottom: 28px; letter-spacing: 0.5px;
}
.hero h1[b-ys6e1c4qcn] {
font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 900;
line-height: 1.08; margin-bottom: 24px; color: var(--gp-creme);
}
/* Era gradiente dourado recortado no texto. Cor sólida não corre o risco do
-webkit-text-fill-color deixar a palavra transparente. */
.hero h1 .highlight[b-ys6e1c4qcn] { color: var(--gp-latao); }
.hero .subtitle[b-ys6e1c4qcn] {
font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--gp-creme-suave);
margin: 0 auto 40px; max-width: 640px; font-weight: 400; line-height: 1.7;
}
.hero-actions[b-ys6e1c4qcn] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary-glow[b-ys6e1c4qcn] {
background: var(--gp-vermelho); color: #fff;
border: none; padding: 16px 36px; font-size: 1.05rem; font-weight: 800;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
box-shadow: 0 8px 30px rgba(178, 58, 46, .42); letter-spacing: 0.3px; display: inline-block;
}
.btn-primary-glow:hover[b-ys6e1c4qcn] { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(178, 58, 46, .58); }
.btn-secondary-glass[b-ys6e1c4qcn] {
background: var(--gp-creme-tenue); backdrop-filter: blur(20px);
border: 1px solid var(--gp-creme-linha); color: var(--gp-creme);
padding: 16px 32px; font-size: 1.05rem; font-weight: 600;
border-radius: 50px; text-decoration: none; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary-glass:hover[b-ys6e1c4qcn] { color: var(--gp-creme); background: var(--gp-creme-linha); transform: translateY(-3px); }
.social-proof[b-ys6e1c4qcn] { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 20px 0; }
.proof-item[b-ys6e1c4qcn] { text-align: center; }
.proof-number[b-ys6e1c4qcn] { font-size: 1.6rem; font-weight: 900; color: var(--gp-latao); display: block; }
.proof-label[b-ys6e1c4qcn] { font-size: 0.78rem; color: var(--gp-creme-suave); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
/* Daqui pra baixo a página é PAPEL: título em tinta, apoio em tinta-media. */
.section-title[b-ys6e1c4qcn] { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--gp-tinta); margin-bottom: 12px; }
.section-subtitle[b-ys6e1c4qcn] { color: var(--gp-tinta-media); font-size: 1.1rem; font-weight: 400; margin-bottom: 50px; }
.glass-section[b-ys6e1c4qcn] {
background: var(--gp-papel-claro);
border-top: 1px solid var(--gp-linha); padding: 90px 0;
}
.feature-cards-container[b-ys6e1c4qcn] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.feature-card[b-ys6e1c4qcn] {
background: var(--gp-papel-claro);
border: 1px solid var(--gp-linha); border-radius: 20px;
padding: 36px; transition: all 0.4s ease;
}
.feature-card:hover[b-ys6e1c4qcn] { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(43, 36, 32, .12); border-color: var(--gp-vermelho); }
/* color:#fff EXPLÍCITO: o glifo herdava o branco da página escura; sem isto ele
viraria tinta escura sobre o vermelho. */
.feature-icon[b-ys6e1c4qcn] {
width: 64px; height: 64px; background: var(--gp-vermelho-fundo); color: #fff;
border-radius: 16px; display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(143, 44, 34, .3);
}
.feature-card h3[b-ys6e1c4qcn] { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--gp-tinta); }
.feature-card p[b-ys6e1c4qcn] { color: var(--gp-tinta-media); line-height: 1.6; margin: 0; font-size: 0.95rem; }
.how-section[b-ys6e1c4qcn] { background: var(--gp-papel); padding: 90px 0; }
.steps-container[b-ys6e1c4qcn] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; }
.step-item[b-ys6e1c4qcn] { flex: 1; min-width: 200px; text-align: center; padding: 30px 20px; }
/* mesmo motivo do .feature-icon: color explícito, não herdado */
.step-number[b-ys6e1c4qcn] {
width: 56px; height: 56px; border-radius: 50%; background: var(--gp-vermelho-fundo); color: #fff;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
font-size: 1.3rem; font-weight: 900; box-shadow: 0 6px 20px rgba(143, 44, 34, .35);
}
.step-item h4[b-ys6e1c4qcn] { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-tinta); }
.step-item p[b-ys6e1c4qcn] { font-size: 0.88rem; color: var(--gp-tinta-media); line-height: 1.5; }
.step-arrow[b-ys6e1c4qcn] { display: none; }
@media (min-width: 769px) {
.step-arrow[b-ys6e1c4qcn] { display: flex; align-items: center; font-size: 1.5rem; color: var(--gp-linha); padding: 0 4px; }
}
.faq-section[b-ys6e1c4qcn] { background: var(--gp-papel-claro); border-top: 1px solid var(--gp-linha); padding: 90px 0; }
.faq-container[b-ys6e1c4qcn] { max-width: 720px; margin: 0 auto; }
.faq-item[b-ys6e1c4qcn] {
background: var(--gp-papel-claro); border: 1px solid var(--gp-linha);
border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease;
}
.faq-item:hover[b-ys6e1c4qcn] { border-color: var(--gp-vermelho); }
.faq-question[b-ys6e1c4qcn] {
padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between;
align-items: center; font-weight: 600; font-size: 1rem; list-style: none;
color: var(--gp-tinta);
}
.faq-question[b-ys6e1c4qcn]::-webkit-details-marker { display: none; }
.faq-question i[b-ys6e1c4qcn] { transition: transform 0.3s ease; font-size: 0.9rem; color: var(--gp-vermelho); }
.faq-item[open] .faq-question i[b-ys6e1c4qcn] { transform: rotate(180deg); }
.faq-answer[b-ys6e1c4qcn] { padding: 0 24px 20px; color: var(--gp-tinta-media); line-height: 1.7; font-size: 0.95rem; }
.seo-text[b-ys6e1c4qcn] { max-width: 900px; }
.seo-text p[b-ys6e1c4qcn] { color: var(--gp-tinta-media); margin-bottom: 14px; line-height: 1.7; }
/* CTA volta pra capa — color EXPLÍCITO porque o .cta-title não declara o dele. */
.cta-section[b-ys6e1c4qcn] { background: var(--gp-capa); color: var(--gp-creme); padding: 90px 0; text-align: center; position: relative; }
.cta-section[b-ys6e1c4qcn]::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, var(--gp-capa-alta) 0%, transparent 70%);
}
.cta-content[b-ys6e1c4qcn] { position: relative; z-index: 1; }
.cta-title[b-ys6e1c4qcn] { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 16px; color: var(--gp-creme); }
.cta-subtitle[b-ys6e1c4qcn] { font-size: 1.1rem; color: var(--gp-creme-suave); margin: 0 auto 36px; max-width: 550px; }
.seo-footer[b-ys6e1c4qcn] { background: var(--gp-papel); padding: 40px 0; text-align: center; border-top: 1px solid var(--gp-linha); }
.seo-footer p[b-ys6e1c4qcn] { color: var(--gp-tinta-fraca); font-size: 0.82rem; margin: 0; }
.bsa[b-6uo3cx8boz] {
padding: 22px 16px 4px;
}
.bsa-card[b-6uo3cx8boz] {
max-width: 1080px;
margin: 0 auto;
padding: 34px 32px;
border-radius: 22px;
color: #fff;
text-align: center;
background:
radial-gradient(circle at 12% 18%, rgba(253, 224, 71, .22), transparent 40%),
radial-gradient(circle at 88% 82%, rgba(56, 189, 248, .28), transparent 46%),
linear-gradient(125deg, #4338ca 0%, #6d28d9 48%, #0ea5e9 120%);
box-shadow: 0 24px 60px rgba(67, 56, 202, .34);
border: 1px solid rgba(255, 255, 255, .12);
}
.bsa-tag[b-6uo3cx8boz] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .28);
font-size: .8rem;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
color: #fde68a;
}
.bsa-titulo[b-6uo3cx8boz] {
margin: 16px auto 0;
max-width: 720px;
font-size: clamp(1.7rem, 4.4vw, 2.9rem);
font-weight: 900;
line-height: 1.1;
color: #fff;
}
.bsa-titulo strong[b-6uo3cx8boz] {
color: #fde68a;
}
.bsa-sub[b-6uo3cx8boz] {
max-width: 680px;
margin: 14px auto 0;
font-size: clamp(.95rem, 1.6vw, 1.1rem);
line-height: 1.5;
color: rgba(255, 255, 255, .93);
}
.bsa-chips[b-6uo3cx8boz] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 14px;
margin: 22px auto 0;
max-width: 780px;
}
.bsa-chips span[b-6uo3cx8boz] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
font-size: .9rem;
font-weight: 700;
}
.bsa-chips i[b-6uo3cx8boz] {
color: #fde68a;
}
.bsa-acoes[b-6uo3cx8boz] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 16px;
margin-top: 28px;
}
.bsa-btn[b-6uo3cx8boz] {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 15px 34px;
border-radius: 12px;
background: #fde047;
color: #422006;
font-size: 1.08rem;
font-weight: 900;
text-decoration: none;
box-shadow: 0 12px 28px rgba(253, 224, 71, .38);
transition: transform .15s ease;
}
.bsa-btn:hover[b-6uo3cx8boz] {
transform: translateY(-2px);
color: #422006;
}
.bsa-btn2[b-6uo3cx8boz] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 28px;
border-radius: 12px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .35);
color: #fff;
font-size: 1.02rem;
font-weight: 800;
text-decoration: none;
transition: background .15s ease;
}
.bsa-btn2:hover[b-6uo3cx8boz] {
background: rgba(255, 255, 255, .24);
color: #fff;
}
@media (max-width: 560px) {
.bsa-card[b-6uo3cx8boz] { padding: 26px 18px; border-radius: 18px; }
.bsa-acoes[b-6uo3cx8boz] { flex-direction: column; }
.bsa-btn[b-6uo3cx8boz], .bsa-btn2[b-6uo3cx8boz] { width: 100%; justify-content: center; }
}
.gq-card[b-li4fik1vh5] {
height: 100%;
padding: 18px;
border: 1px solid rgba(139, 92, 246, .14);
border-radius: 20px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 14px 32px rgba(40, 30, 90, .08);
}
.gq-card-top[b-li4fik1vh5] {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
}
.gq-badges[b-li4fik1vh5] {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.gq-badge[b-li4fik1vh5] {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.gq-badge.is-discipline[b-li4fik1vh5] {
color: #4338ca;
background: #eef2ff;
}
.gq-badge.is-bncc[b-li4fik1vh5] {
color: #0f766e;
background: #ecfeff;
}
.gq-badge.is-bloom[b-li4fik1vh5] {
color: #92400e;
background: #fef3c7;
}
.gq-badge.is-difficulty[b-li4fik1vh5] {
color: #475569;
background: #f8fafc;
}
.gq-favorite[b-li4fik1vh5] {
width: 42px;
height: 42px;
flex: 0 0 auto;
border: 1px solid #e5e7eb;
border-radius: 14px;
color: #94a3b8;
background: #fff;
font-size: 18px;
transition: all .18s ease;
}
.gq-favorite.is-on[b-li4fik1vh5] {
color: #f59e0b;
border-color: #fde68a;
background: #fff7ed;
}
.gq-text[b-li4fik1vh5] {
margin: 16px 0 0;
color: #0f172a;
font-size: 14px;
line-height: 1.65;
}
.gq-meta[b-li4fik1vh5] {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
color: #64748b;
font-size: 12px;
font-weight: 700;
}
.gq-meta span[b-li4fik1vh5] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.gq-meta .is-fresh[b-li4fik1vh5] {
color: #059669;
}
.gq-note-box[b-li4fik1vh5],
.gq-note-editor[b-li4fik1vh5] {
margin-top: 16px;
padding: 14px;
border: 1px solid #ede9fe;
border-radius: 14px;
background: linear-gradient(180deg, #faf9ff, #fff);
}
.gq-note-box.is-empty[b-li4fik1vh5] {
background: #fcfcff;
}
.gq-note-trigger[b-li4fik1vh5] {
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
padding: 0;
color: #5b21b6;
background: transparent;
font-size: 13px;
font-weight: 800;
}
.gq-note-content strong[b-li4fik1vh5] {
display: inline-flex;
align-items: center;
gap: 7px;
color: #5b21b6;
font-size: 12px;
font-weight: 900;
}
.gq-note-content p[b-li4fik1vh5] {
margin: 8px 0 0;
color: #475569;
font-size: 13px;
line-height: 1.6;
}
.gq-note-edit[b-li4fik1vh5] {
margin-top: 10px;
border: 0;
padding: 0;
color: #4f46e5;
background: transparent;
font-size: 12px;
font-weight: 900;
}
.gq-note-editor label[b-li4fik1vh5] {
display: block;
margin-bottom: 8px;
color: #334155;
font-size: 12px;
font-weight: 900;
}
.gq-note-editor textarea[b-li4fik1vh5] {
width: 100%;
border: 1px solid #d8d3f4;
border-radius: 12px;
padding: 10px 12px;
color: #0f172a;
font: inherit;
line-height: 1.55;
resize: vertical;
min-height: 92px;
background: #fff;
}
.gq-note-editor textarea:focus[b-li4fik1vh5] {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}
.gq-note-actions[b-li4fik1vh5] {
display: flex;
gap: 8px;
margin-top: 12px;
}
.gq-btn-primary[b-li4fik1vh5],
.gq-btn-secondary[b-li4fik1vh5] {
min-height: 40px;
padding: 0 14px;
border-radius: 12px;
font-size: 13px;
font-weight: 900;
font-family: inherit;
}
.gq-btn-primary[b-li4fik1vh5] {
border: 0;
color: #fff;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.gq-btn-secondary[b-li4fik1vh5] {
border: 1px solid #ddd6fe;
color: #4338ca;
background: #fff;
}
.share-bar[b-8tl4nmewqo] {
max-width: 740px;
margin: 10px auto 0;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.share-bar > span[b-8tl4nmewqo] {
font-size: .95rem;
color: #64748b;
font-weight: 600;
}
.share-btn[b-8tl4nmewqo] {
width: 42px;
height: 42px;
border-radius: 10px;
border: 1px solid rgba(79, 70, 229, .18);
background: #fff;
color: #4f46e5;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
text-decoration: none;
font-size: 1.15rem;
}
.share-btn:hover[b-8tl4nmewqo] {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(102, 126, 234, .3);
}
/* CTA de estudante — banner de funil pro /aluno nas páginas SEO de questão. */
.cta-aluno[b-ibkdgr0zxo] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: 1100px;
margin: 18px auto;
padding: 20px 24px;
background: linear-gradient(120deg, #059669 0%, #0d9488 55%, #4f46e5 130%);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(5, 150, 105, .28);
color: #fff;
}
.cta-aluno-info[b-ibkdgr0zxo] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.cta-aluno-tag[b-ibkdgr0zxo] {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
font-size: .8rem;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
background: rgba(255, 255, 255, .18);
padding: 4px 10px;
border-radius: 999px;
}
.cta-aluno-titulo[b-ibkdgr0zxo] {
font-size: 1.35rem;
font-weight: 800;
line-height: 1.2;
}
.cta-aluno-sub[b-ibkdgr0zxo] {
font-size: .95rem;
line-height: 1.45;
color: rgba(255, 255, 255, .92);
}
.cta-aluno-sub strong[b-ibkdgr0zxo] {
color: #fff;
font-weight: 800;
}
.cta-aluno-btn[b-ibkdgr0zxo] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
background: #fde047;
color: #1e293b;
font-weight: 800;
font-size: 1.05rem;
text-decoration: none;
border-radius: 12px;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
transition: transform .12s ease, box-shadow .12s ease;
}
.cta-aluno-btn:hover[b-ibkdgr0zxo] {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}
@media (max-width: 720px) {
.cta-aluno[b-ibkdgr0zxo] {
flex-direction: column;
align-items: stretch;
text-align: left;
padding: 18px;
}
.cta-aluno-btn[b-ibkdgr0zxo] {
justify-content: center;
}
}
.dyn-controls[b-vmlgksw72y] {
display: grid;
gap: 10px;
}
.dyn-field[b-vmlgksw72y] {
display: grid;
gap: 7px;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.dyn-label-row[b-vmlgksw72y] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dyn-label-row span[b-vmlgksw72y] {
color: #334155;
font-size: .78rem;
font-weight: 900;
letter-spacing: .03em;
text-transform: uppercase;
}
.dyn-label-row small[b-vmlgksw72y] {
color: #64748b;
font-size: .72rem;
font-weight: 800;
}
.dyn-chip-grid[b-vmlgksw72y] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dyn-chip[b-vmlgksw72y],
.dyn-switch[b-vmlgksw72y] {
min-height: 34px;
border: 1px solid #dbe4ef;
border-radius: 6px;
background: #f8fafc;
color: #334155;
font-size: .82rem;
font-weight: 800;
transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dyn-chip[b-vmlgksw72y] {
padding: 0 10px;
}
.dyn-chip:hover[b-vmlgksw72y],
.dyn-switch:hover[b-vmlgksw72y] {
border-color: #a5b4fc;
transform: translateY(-1px);
}
.dyn-chip.is-on[b-vmlgksw72y] {
border-color: #4f46e5;
color: #3730a3;
background: #e0e7ff;
box-shadow: 0 8px 16px rgba(79, 70, 229, .12);
}
.dyn-switch[b-vmlgksw72y] {
width: 100%;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 6px 10px;
text-align: left;
}
.dyn-switch span[b-vmlgksw72y] {
position: relative;
width: 36px;
height: 20px;
border-radius: 999px;
background: #cbd5e1;
transition: background-color .18s ease;
}
.dyn-switch span[b-vmlgksw72y]::after {
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
content: "";
transition: transform .18s ease;
}
.dyn-switch strong[b-vmlgksw72y] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dyn-switch.is-on[b-vmlgksw72y] {
border-color: #10b981;
color: #065f46;
background: #ecfdf5;
}
.dyn-switch.is-on span[b-vmlgksw72y] {
background: #10b981;
}
.dyn-switch.is-on span[b-vmlgksw72y]::after {
transform: translateX(16px);
}
.dyn-input[b-vmlgksw72y] {
width: 100%;
min-height: 38px;
padding: 0 10px;
border: 1.6px solid #b4a3e6;
border-radius: 6px;
background: #fff;
color: #0f172a;
font-size: .88rem;
outline: none;
box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08), inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.dyn-input:focus[b-vmlgksw72y] {
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
/* ===== IdentificarEntrega — componente único de identificação (espec 14/07) ===== */
.ie-wrap[b-wujbfzqz12] { display: grid; gap: 12px; }
/* entrada de material */
.ie-entrada[b-wujbfzqz12] { display: flex; gap: 10px; flex-wrap: wrap; }
.ie-botao[b-wujbfzqz12] {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 16px; border-radius: 13px; font-weight: 800; cursor: pointer;
border: 2px dashed transparent; transition: filter .13s ease; font-size: .9rem;
}
.ie-botao.off[b-wujbfzqz12] { opacity: .5; pointer-events: none; }
.ie-botao:hover[b-wujbfzqz12] { filter: brightness(.96); }
.ie-botao[b-wujbfzqz12]  input[type="file"] { display: none; }
.ie-botao i[b-wujbfzqz12] { font-size: 1.2rem; }
.ie-botao.foto[b-wujbfzqz12] { flex: 1 1 240px; background: linear-gradient(120deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 10px 22px rgba(37, 99, 235, .3); }
.ie-botao.word[b-wujbfzqz12] { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.ie-botao.pdf[b-wujbfzqz12]  { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.ie-botao.qr[b-wujbfzqz12]   { background: #faf5ff; border-color: #ddd6fe; color: #7c3aed; border-style: dashed; border-width: 2px; }
/* QR do celular */
.ie-qrcel[b-wujbfzqz12] {
display: flex; gap: 14px; align-items: center; padding: 12px;
border: 1px solid #ddd6fe; border-radius: 13px; background: #faf5ff;
}
.ie-qrcel img[b-wujbfzqz12] { width: 132px; height: 132px; border-radius: 9px; background: #fff; padding: 5px; flex: 0 0 auto; }
.ie-qrcel > div[b-wujbfzqz12] { display: flex; flex-direction: column; gap: 7px; }
.ie-qrcel strong[b-wujbfzqz12] { display: flex; align-items: center; gap: 7px; color: #6d28d9; font-size: .88rem; }
.ie-qrcel span[b-wujbfzqz12] { color: #7c3aed; font-weight: 750; font-size: .82rem; }
.ie-qrcel-acoes[b-wujbfzqz12] { display: flex; gap: 8px; flex-wrap: wrap; }
.ie-mini[b-wujbfzqz12] { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #3b82f6; font-weight: 700; font-size: .78rem; cursor: pointer; }
.ie-mini.ghost[b-wujbfzqz12] { color: #94a3b8; }
.ie-mini:disabled[b-wujbfzqz12] { opacity: .5; cursor: default; }
/* material pronto + CTA */
.ie-material[b-wujbfzqz12] {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
}
.ie-material > span[b-wujbfzqz12] { display: flex; align-items: center; gap: 6px; color: #475569; font-weight: 700; font-size: .85rem; }
.ie-cta[b-wujbfzqz12] {
margin-left: auto; padding: 11px 20px; border: none; border-radius: 12px;
background: linear-gradient(120deg, #7c3aed, #9333ea); color: #fff; font-weight: 850; cursor: pointer;
box-shadow: 0 10px 22px rgba(124, 58, 237, .3);
}
.ie-cta:disabled[b-wujbfzqz12] { opacity: .55; cursor: wait; }
.ie-cta.grande[b-wujbfzqz12] { width: 100%; padding: 14px; font-size: 1rem; margin-left: 0; }
.ie-progresso[b-wujbfzqz12] { display: flex; align-items: center; gap: 10px; color: #7c3aed; font-weight: 700; font-size: .9rem; }
.ie-aviso[b-wujbfzqz12] { padding: 10px 14px; border-radius: 11px; background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; font-weight: 700; font-size: .85rem; }
.ie-aviso.erro[b-wujbfzqz12] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
/* folhas reconhecidas */
.ie-folhas[b-wujbfzqz12] { display: flex; gap: 8px; flex-wrap: wrap; }
.ie-folha[b-wujbfzqz12] { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-weight: 750; font-size: .78rem; }
.ie-folha.ok[b-wujbfzqz12] { background: #dcfce7; color: #15803d; }
.ie-folha.falta[b-wujbfzqz12] { background: #fee2e2; color: #b91c1c; }
.ie-folha.semqr[b-wujbfzqz12] { background: #fef9c3; color: #a16207; }
/* candidato */
.ie-confirma[b-wujbfzqz12] { display: grid; gap: 12px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.ie-candidato[b-wujbfzqz12] { display: flex; align-items: center; gap: 12px; }
.ie-cand-icone[b-wujbfzqz12] {
width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font-size: 1.3rem; flex: 0 0 auto;
}
.ie-candidato.semid .ie-cand-icone[b-wujbfzqz12] { background: linear-gradient(135deg, #f59e0b, #b45309); }
.ie-cand-info[b-wujbfzqz12] { display: flex; flex-direction: column; gap: 2px; }
.ie-cand-rotulo[b-wujbfzqz12] { color: #64748b; font-size: .82rem; }
.ie-cand-info strong[b-wujbfzqz12] { color: #0f172a; font-size: 1.05rem; }
.ie-cand-score[b-wujbfzqz12] { font-weight: 800; font-size: .78rem; }
.ie-cand-score.alto[b-wujbfzqz12] { color: #15803d; }
.ie-cand-score.medio[b-wujbfzqz12] { color: #a16207; }
.ie-cand-score.baixo[b-wujbfzqz12] { color: #b91c1c; }
/* empate / homônimos — a IA NÃO escolhe; o professor desempata */
.ie-candidato.empate .ie-cand-icone[b-wujbfzqz12] { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.ie-empate-lista[b-wujbfzqz12] { display: grid; gap: 8px; }
.ie-empate-item[b-wujbfzqz12] {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 11px 14px; border: 2px solid #fecaca; border-radius: 12px; background: #fef2f2;
cursor: pointer; transition: background .13s ease;
}
.ie-empate-item:hover[b-wujbfzqz12] { background: #fee2e2; border-color: #fca5a5; }
.ie-emp-nome[b-wujbfzqz12] { font-weight: 800; color: #0f172a; font-size: .92rem; }
.ie-emp-mat[b-wujbfzqz12] { color: #b91c1c; font-weight: 700; font-size: .8rem; }
.ie-emp-score[b-wujbfzqz12] { margin-left: auto; color: #94a3b8; font-weight: 700; font-size: .8rem; }
.ie-cand-sub[b-wujbfzqz12] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ie-cand-mat[b-wujbfzqz12] { color: #64748b; font-weight: 700; font-size: .78rem; }
.ie-alternativas[b-wujbfzqz12] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: #64748b; }
.ie-alt small[b-wujbfzqz12] { color: #94a3b8; font-weight: 600; margin-left: 4px; }
.ie-alt[b-wujbfzqz12] {
padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc;
color: #334155; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.ie-alt:hover[b-wujbfzqz12] { background: #eef2ff; border-color: #c7d2fe; }
.ie-alt em[b-wujbfzqz12] { font-style: normal; color: #94a3b8; margin-left: 5px; }
/* escolha manual */
.ie-escolha[b-wujbfzqz12] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ie-escolha label[b-wujbfzqz12] { display: block; font-size: .78rem; font-weight: 750; color: #64748b; margin-bottom: 4px; }
.ie-escolha select[b-wujbfzqz12], .ie-escolha input[b-wujbfzqz12] {
width: 100%; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 10px;
font-size: .88rem; background: #fff; color: #0f172a;
}
.ie-ok[b-wujbfzqz12] { display: grid; gap: 6px; }
.ie-ok small[b-wujbfzqz12] { color: #94a3b8; font-size: .78rem; text-align: center; }
@media (max-width: 640px) {
.ie-qrcel[b-wujbfzqz12] { flex-direction: column; text-align: center; }
.ie-cta[b-wujbfzqz12] { margin-left: 0; width: 100%; }
}
/* PALETA CADERNO (08/08/2026). O rodapé tinha ficado para trás na migração: era
índigo escuro com links roxos, e o "© 2026 GeraProva" saía em índigo sobre esse
fundo — 2,54:1 de contraste, medido no navegador. Reprova AA (mínimo 4,5) e na
prática some. Agora é a capa do fichário com creme por cima, igual ao hero. */
.rodape-gp[b-q9k6ezuw7m] {
background: var(--gp-capa);
padding: 8px 16px;
margin-top: 40px;
border-top: 1px solid var(--gp-capa-alta);
max-height: 54px;
overflow-y: auto;
overflow-x: hidden;
}
.rodape-links[b-q9k6ezuw7m] {
display: flex;
flex-wrap: wrap;
gap: 2px 14px;
justify-content: center;
align-items: center;
font-size: .66rem;
line-height: 1.7;
}
.rodape-links a[b-q9k6ezuw7m] {
color: var(--gp-creme-suave);
text-decoration: none;
}
.rodape-links a:hover[b-q9k6ezuw7m] {
color: var(--gp-creme);
}
.rodape-link-landing[b-q9k6ezuw7m] {
color: var(--gp-creme-suave) !important;
}
.rodape-link-legal[b-q9k6ezuw7m] {
color: var(--gp-creme-suave) !important;
}
.rodape-dpo[b-q9k6ezuw7m] {
color: var(--gp-creme-suave);
font-size: .6rem;
}
.rodape-copy[b-q9k6ezuw7m] {
color: var(--gp-creme-suave);
font-size: .58rem;
}
.seo-nav[b-gttyubpwqd] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 16px 0;
background: rgba(10, 10, 26, .85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, .08);
font-family: 'Plus Jakarta Sans', sans-serif;
}
.seo-nav-inner[b-gttyubpwqd] {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.seo-nav-brand[b-gttyubpwqd] {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.seo-nav-brand-text[b-gttyubpwqd] {
font-size: 1.2rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.seo-nav-links[b-gttyubpwqd] {
list-style: none;
display: flex;
gap: 28px;
margin: 0;
padding: 0;
}
.seo-nav-links a[b-gttyubpwqd] {
color: rgba(255, 255, 255, .7);
font-size: .9rem;
font-weight: 500;
text-decoration: none;
}
.seo-nav-links a:hover[b-gttyubpwqd] {
color: #fff;
}
.seo-nav-cta[b-gttyubpwqd] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff !important;
padding: 9px 22px;
border-radius: 10px;
font-weight: 700;
font-size: .88rem;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
}
.seo-nav-cta:hover[b-gttyubpwqd] {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(102, 126, 234, .4);
}
@@media (max-width: 768px) {
.seo-nav-links[b-gttyubpwqd] {
display: none;
}
}
.sa-linha[b-ofls7g3u79] {
margin: 6px 0 0;
text-align: center;
color: var(--gp-tinta-fraca);
font-size: .8rem;
}
.sa-linha a[b-ofls7g3u79] {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--gp-salvia-forte);
font-weight: 800;
text-decoration: none;
}
.sa-linha a:hover[b-ofls7g3u79] {
text-decoration: underline;
color: var(--gp-salvia-forte);
}
.topicos-pop-block[b-ezia97xgfz] {
position: relative;
overflow: hidden;
max-width: 1100px;
margin: 40px auto 10px;
width: 100%;
padding: 32px 26px;
border-radius: 24px;
color: #fff;
background:
radial-gradient(420px 200px at 88% -20%, rgba(255, 255, 255, 0.22), transparent 60%),
linear-gradient(120deg, #4f46e5 0%, #7c3aed 100%);
box-shadow: 0 28px 62px rgba(91, 62, 234, 0.22);
}
.topicos-pop-titulo[b-ezia97xgfz] {
margin: 0;
text-align: center;
color: #fff;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: -.01em;
}
.topicos-pop-sub[b-ezia97xgfz] {
margin: 8px 0 22px;
text-align: center;
color: rgba(255, 255, 255, .82);
font-size: .92rem;
}
.topicos-pop-grid[b-ezia97xgfz] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.topicos-pop-item[b-ezia97xgfz] {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
text-decoration: none;
color: #fff;
transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.topicos-pop-item:hover[b-ezia97xgfz] {
background: rgba(255, 255, 255, .2);
border-color: rgba(255, 226, 138, .6);
transform: translateY(-2px);
color: #fff;
text-decoration: none;
}
.topicos-pop-mat[b-ezia97xgfz] {
font-size: .7rem;
color: #ffe28a;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
}
.topicos-pop-ass[b-ezia97xgfz] {
font-size: .92rem;
font-weight: 600;
color: rgba(255, 255, 255, .95);
line-height: 1.35;
}
.topicos-pop-qtd[b-ezia97xgfz] {
font-size: .78rem;
color: rgba(255, 255, 255, .65);
}
@media (max-width: 600px) {
.topicos-pop-grid[b-ezia97xgfz] {
grid-template-columns: 1fr;
}
}
.gp-video-local[b-zgug0pu2mu] {
position: relative;
width: 100%;
border-radius: 18px;
overflow: hidden;
background: #000;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.gp-video-local video[b-zgug0pu2mu] {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.gp-video-local-legenda[b-zgug0pu2mu] {
display: block;
padding: 12px 16px;
font-size: 0.85rem;
color: rgba(255,255,255,0.65);
background: rgba(255,255,255,0.03);
}
.gp-video[b-ife44310ek] {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
background: #0b0b14;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.gp-video-thumb[b-ife44310ek] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gp-video-play[b-ife44310ek] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #fff;
background: linear-gradient(180deg, rgba(76,29,149,.15), rgba(30,64,175,.35));
transition: transform .15s ease, background .15s ease;
}
.gp-video:hover .gp-video-play[b-ife44310ek],
.gp-video:focus-visible .gp-video-play[b-ife44310ek] {
transform: scale(1.08);
background: linear-gradient(180deg, rgba(76,29,149,.3), rgba(30,64,175,.5));
}
.gp-video-legenda[b-ife44310ek] {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: .6rem 1rem;
font-size: .9rem;
color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.gp-video iframe[b-ife44310ek] {
width: 100%;
height: 100%;
border: 0;
}