/* ==========================================================================
   Páginas de solução do portal adv.diacordo.com.br
   (/calculadora-trabalhista e /organizador-de-documentos)

   Mesma gramática visual da /sobre do portal: seção numerada + kicker azul,
   cartão branco sobre #F0F4FA, DM Sans nos títulos e Inter no corpo. Os
   primitivos são redeclarados com prefixo .sol- em vez de reaproveitar os
   .about- da sobre-adv.css de propósito: as duas folhas carregam em páginas
   diferentes e nenhuma delas deve poder quebrar a outra ao ser ajustada.

   As telas dos programas são RECONSTRUÍDAS em HTML/CSS, não capturadas. A
   calculadora só abre autenticada e trabalha com dados reais de leads; uma
   captura publicada aqui exporia nome e telefone de gente de verdade. O
   mockup mostra o mesmo desenho com um caso fictício, fica nítido em
   qualquer tela e acompanha a página quando a ferramenta mudar.
   ========================================================================== */

.sol-adv { overflow: hidden; background: #fff; }
.sol-adv p { color: rgba(9, 49, 52, .74); font-size: 15.5px; line-height: 1.72; }

/* A .page-adv encolhe a tipografia do portal inteiro em 25% por variável.
   Estas páginas têm escala própria, então os seletores precisam do .page-adv
   na frente pra vencer a especificidade daquelas regras. */
.page-adv .sol-adv h1 { max-width: 780px; margin-bottom: 22px; font-size: clamp(35px, 4.3vw, 55px); line-height: 1.04; letter-spacing: -.8px; }
.page-adv .sol-adv h2 { margin-bottom: 20px; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.09; letter-spacing: -.6px; }
.page-adv .sol-adv h3 { font-size: 19px; }
.page-adv .sol-adv h4 { font-size: 16px; }

/* ------------------------- primitivos da página ------------------------- */
.sol-kicker { display: block; margin-bottom: 16px; color: #1b66d4; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sol-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 34px; margin-bottom: 20px; background: #e8f0fe; color: #1b66d4; border-radius: 999px; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 800; }
.sol-lead { color: #23424b !important; font-size: 18px !important; font-weight: 600; }
.sol-emphasis { color: #052629 !important; font-family: "DM Sans", sans-serif; font-size: 17px !important; font-weight: 700; }
.sol-list-intro { color: #052629 !important; font-family: "DM Sans", sans-serif; font-weight: 700; }

.sol-section { padding: 90px 0; }
.sol-section--blue { background: #f0f4fa; }
.sol-heading { display: grid; grid-template-columns: 70px minmax(0, 860px); gap: 28px; align-items: start; margin-bottom: 42px; }
.sol-heading .sol-number { margin-top: 4px; }
.sol-heading p { max-width: 780px; margin: 0 0 12px; }
.sol-heading p:last-child { margin-bottom: 0; }

.sol-wide-copy { max-width: 900px; margin: 36px auto 0; padding: 24px 28px; background: #f7faff; border: 1px solid #dfe9f8; border-radius: 16px; color: #23424b !important; text-align: center; }
.sol-note { display: grid; gap: 8px; margin-top: 26px; padding: 22px 24px; background: #fff; border: 1px solid #dce7f7; border-left: 4px solid #4285f4; border-radius: 0 14px 14px 0; color: #23424b; font-size: 14px; line-height: 1.62; }
.sol-note strong { color: #052629; font-family: "DM Sans", sans-serif; font-size: 16px; }
.sol-note p { margin: 0; font-size: 14px !important; }

.sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sol-cards--two { grid-template-columns: repeat(2, 1fr); }
.sol-cards--four { grid-template-columns: repeat(4, 1fr); }
.sol-cards article { padding: 28px; background: #fff; border: 1px solid #dfe8f5; border-radius: 16px; }
.sol-cards .sol-tag { display: block; margin-bottom: 20px; color: #4285f4; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sol-cards h3 { margin-bottom: 10px; }
.sol-cards p { margin: 0; font-size: 14px !important; }
.sol-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; background: #e8f0fe; color: #1b66d4; border-radius: 12px; }
.sol-card-icon svg { width: 21px; height: 21px; }

.sol-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.sol-checklist li { position: relative; padding: 14px 16px 14px 44px; background: #fff; border: 1px solid #dce7f7; border-radius: 11px; color: #23424b; font-size: 14px; line-height: 1.55; }
.sol-checklist li::before { content: "✓"; position: absolute; top: 13px; left: 15px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #e8f0fe; color: #1b66d4; border-radius: 50%; font-size: 11px; font-weight: 800; }
.sol-checklist strong { color: #052629; }

/* ------------------------------- hero ----------------------------------- */
.sol-hero { position: relative; padding: 74px 0 84px; background: radial-gradient(circle at 86% 16%, rgba(66, 133, 244, .14), transparent 32%), #f0f4fa; }
.sol-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 56px; }
.sol-hero-copy { position: relative; z-index: 2; }
.sol-hero-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sol-hero-meta .sol-number, .sol-hero-meta .sol-kicker { margin-bottom: 0; }
.sol-hero .btn { width: auto; margin-top: 22px; padding: 15px 26px; font-size: 15px; }
.sol-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.sol-hero-facts li { padding: 9px 15px; background: #fff; border: 1px solid #d9e6fb; border-radius: 999px; color: #1b66d4; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; }

/* ---------------------- moldura das telas (mockups) --------------------- */
.sol-shot { margin: 0; }
.sol-shot-frame { overflow: hidden; background: #fff; border: 1px solid #d9e6fb; border-radius: 16px; box-shadow: 0 26px 66px rgba(21, 68, 138, .13); }
.sol-shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #f0f4fa; border-bottom: 1px solid #e3ecfa; }
.sol-shot-bar i { flex: none; width: 9px; height: 9px; background: #d3e0f5; border-radius: 50%; }
.sol-shot-bar span { flex: 1; margin-left: 10px; padding: 4px 12px; background: #fff; border: 1px solid #e3ecfa; border-radius: 999px; color: #7d93ad; font-family: "DM Sans", sans-serif; font-size: 11px; }
.sol-shot-body { padding: 22px; background: #fafbfd; }
.sol-shot figcaption { margin-top: 14px; color: rgba(9, 49, 52, .66); font-size: 13px; line-height: 1.6; text-align: center; }

/* ---------------------------- passos com tela --------------------------- */
.sol-steps { display: grid; gap: 26px; }
.sol-step { display: grid; grid-template-columns: 1fr 1.18fr; gap: 46px; align-items: center; padding: 34px; background: #fff; border: 1px solid #dfe8f5; border-radius: 22px; box-shadow: 0 18px 48px rgba(27, 73, 119, .06); }
.sol-step--flip .sol-step-copy { order: 2; }
.sol-step--plain { grid-template-columns: 1fr; gap: 0; }
.sol-step-copy h3 { margin-bottom: 12px; }
.sol-step-copy p { margin-bottom: 12px; font-size: 14.5px !important; }
.sol-step-copy p:last-child { margin-bottom: 0; }
.sol-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 16px; background: #4285f4; color: #fff; border-radius: 50%; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 800; }

/* ------------------------------- tabela --------------------------------- */
.sol-table-wrap { overflow-x: auto; margin-top: 8px; background: #fff; border: 1px solid #dce7f7; border-radius: 16px; }
.sol-table { width: 100%; min-width: 540px; border-collapse: collapse; }
.sol-table th, .sol-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eaf1fb; font-size: 14px; }
.sol-table thead th { background: #f0f4fa; color: #1b66d4; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sol-table tbody tr:last-child td { border-bottom: 0; }
.sol-table td:first-child { width: 78px; color: #4285f4; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 800; }
.sol-table td:last-child { color: #23424b; line-height: 1.6; }
.sol-table em { color: #1b66d4; font-style: normal; font-weight: 700; }

/* ------------------------------ CTA final ------------------------------- */
.sol-cta { background: radial-gradient(circle at 50% 0%, rgba(66, 133, 244, .16), transparent 36%), #f0f4fa; }
.sol-cta-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.sol-cta-inner .sol-number { margin-inline: auto; }
.sol-cta-inner h2 { max-width: 760px; margin-inline: auto; }
.sol-cta-inner p { max-width: 700px; margin-inline: auto; }
.sol-cta .btn { width: auto; margin-top: 20px; padding: 15px 26px; font-size: 15px; }
.sol-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; }
.sol-cta-links a { color: #1b66d4; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; }

/* ==========================================================================
   Mockup 1 — Calculadora Jurídica Trabalhista

   Reproduz o desenho real da ferramenta (assets/css/calculadora.css) na
   variante azul que ela já usa quando aberta pelo subdomínio: fundo #F0F4FA,
   cartão branco, rótulo pequeno em maiúsculas e o total em faixa escura.
   ========================================================================== */
.mk { font-family: "DM Sans", sans-serif; color: #23424b; }
.mk-card { padding: 18px; background: #fff; border: 1px solid #e6ecf5; border-radius: 12px; }
.mk-card + .mk-card { margin-top: 12px; }
.mk-h { margin: 0 0 4px; color: #052629; font-size: 15px; font-weight: 800; }
.mk-note { margin: 0 0 14px; color: #8b9bb0; font-size: 11.5px; line-height: 1.5; }

.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.mk-top h4 { margin: 0 0 2px; color: #052629; font-size: 16px; font-weight: 800; }
.mk-top p { margin: 0; color: #8b9bb0; font-size: 11px; }
.mk-user { padding: 5px 11px; background: #e8f0fe; border-radius: 999px; color: #1b66d4; font-size: 11px; font-weight: 700; }
.mk-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.mk-tab { padding: 7px 14px; background: #fff; border: 1px solid #e6ecf5; border-radius: 999px; color: #7d93ad; font-size: 11.5px; font-weight: 700; }
.mk-tab.is-on { background: #4285f4; border-color: #4285f4; color: #fff; }

.mk-row { display: flex; gap: 8px; }
.mk-input { flex: 1; padding: 10px 12px; background: #fff; border: 1px solid #dde4ee; border-radius: 8px; color: #052629; font-size: 12.5px; font-weight: 600; }
.mk-input--ph { color: #a9b6c6; font-weight: 500; }
.mk-btn { padding: 10px 18px; background: #4285f4; border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mk-btn--ghost { background: #fff; border: 1px solid #d9e6fb; color: #1b66d4; }

.mk-found { display: grid; gap: 7px; margin-top: 12px; padding: 14px; background: #e8f0fe; border: 1px solid #d2e3fc; border-radius: 10px; }
.mk-found b { color: #1b66d4; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mk-found-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.mk-found-grid div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.mk-found-grid span { color: #7d93ad; }
.mk-found-grid strong { color: #052629; font-weight: 700; text-align: right; }

.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-field label { display: block; margin-bottom: 5px; color: #6c7f95; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mk-field div { padding: 9px 11px; background: #fff; border: 1px solid #dde4ee; border-radius: 7px; color: #052629; font-size: 12px; font-weight: 600; }
.mk-field--wide { grid-column: span 2; }
.mk-select { position: relative; }
.mk-select::after { content: ""; position: absolute; top: 50%; right: 11px; width: 6px; height: 6px; border-right: 2px solid #a9b6c6; border-bottom: 2px solid #a9b6c6; transform: translateY(-70%) rotate(45deg); }

/* resultado */
.mk-meta { margin: 0 0 12px; color: #8b9bb0; font-size: 11px; }
.mk-sec { margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eef2f7; color: #1b66d4; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mk-sec:first-child { margin-top: 0; }
.mk-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 12px; }
.mk-line span { color: #6c7f95; line-height: 1.45; }
.mk-line strong { color: #052629; font-weight: 700; white-space: nowrap; }
.mk-line--sub { margin-top: 4px; padding-top: 9px; border-top: 1px dashed #e2e9f2; }
.mk-line--sub span { color: #052629; font-weight: 700; }
.mk-line--sub strong { color: #1b66d4; }
.mk-line--off span, .mk-line--off strong { color: #b8c3d1; text-decoration: line-through; }
.mk-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px 18px; background: #1b66d4; border-radius: 10px; }
.mk-total span { color: #a8c8f7; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.mk-total strong { color: #fff; font-size: 21px; font-weight: 800; }
.mk-fine { margin: 10px 0 0; color: #a9b6c6; font-size: 10.5px; line-height: 1.5; }
.mk-flag { display: grid; gap: 4px; margin-bottom: 12px; padding: 11px 13px; background: #fff8e8; border: 1px solid #f2e0b6; border-left: 3px solid #e0a92b; border-radius: 0 8px 8px 0; color: #6b5215; font-size: 11.5px; line-height: 1.5; }
.mk-flag b { color: #4a3808; }
.mk-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ==========================================================================
   Mockup 2 — Organizador de PDFs
   ========================================================================== */
.mk-drops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.mk-drop { display: flex; flex-direction: column; min-height: 180px; padding: 11px; background: #fff; border: 1px dashed #cdd9e8; border-radius: 10px; }
.mk-drop.is-active { border: 1px dashed #4285f4; background: #f5f9ff; box-shadow: 0 0 0 3px rgba(66, 133, 244, .12); }
.mk-drop-head { margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid #eef2f7; }
.mk-drop-head b { display: block; color: #4285f4; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.mk-drop-head span { display: block; margin-top: 2px; color: #052629; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.mk-file { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 6px 7px; background: #f7faff; border: 1px solid #e6eefb; border-radius: 6px; color: #23424b; font-size: 10.5px; line-height: 1.25; }
.mk-file i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; background: #e8f0fe; border-radius: 4px; color: #1b66d4; font-size: 8px; font-style: normal; font-weight: 800; }
.mk-file em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mk-drop-hint { margin-top: auto; padding-top: 8px; color: #a9b6c6; font-size: 10px; text-align: center; }
.mk-drop-drag { margin-top: auto; padding: 10px 6px; background: #e8f0fe; border: 1px dashed #9dc0f8; border-radius: 6px; color: #1b66d4; font-size: 10px; font-weight: 700; text-align: center; }

.mk-score { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: #e9f7ee; border: 1px solid #bfe6cd; border-radius: 10px; }
.mk-score i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #1e9e54; border-radius: 50%; color: #fff; font-size: 13px; font-style: normal; font-weight: 800; }
.mk-score b { display: block; color: #14663a; font-size: 14px; font-weight: 800; }
.mk-score span { display: block; color: #3d7a58; font-size: 11.5px; }
.mk-out { display: grid; gap: 7px; margin-top: 12px; }
.mk-out-row { display: grid; grid-template-columns: 62px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 13px; background: #fff; border: 1px solid #e6ecf5; border-radius: 8px; font-size: 12px; }
.mk-out-row b { color: #4285f4; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.mk-out-row span { color: #23424b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-out-row u { color: #6c7f95; font-size: 11px; text-decoration: none; white-space: nowrap; }
.mk-out-size { padding: 3px 9px; background: #e8f0fe; border-radius: 999px; color: #1b66d4; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.mk-out-size--warn { background: #fff2e0; color: #a8630c; }
.mk-pass { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 13px; background: #fff; border: 1px solid #e6ecf5; border-radius: 8px; }
.mk-pass label { flex: none; color: #6c7f95; font-size: 11px; font-weight: 700; }
.mk-pass div { flex: 1; padding: 8px 11px; background: #f7faff; border: 1px solid #dde4ee; border-radius: 6px; color: #052629; font-size: 12px; letter-spacing: .18em; }

/* ------------------------------ responsivo ------------------------------ */
@media (max-width: 980px) {
	.sol-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.sol-step { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
	.sol-step--flip .sol-step-copy { order: 0; }
	.sol-cards, .sol-cards--four { grid-template-columns: repeat(2, 1fr); }
	.mk-drops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-drop { min-height: 156px; }
}

@media (max-width: 620px) {
	.sol-hero { padding: 52px 0 62px; }
	.sol-section { padding: 62px 0; }
	.sol-heading { grid-template-columns: 1fr; gap: 8px; }
	.sol-cards, .sol-cards--two, .sol-cards--four, .sol-checklist { grid-template-columns: 1fr; }
	.sol-step { padding: 22px 18px; }
	.sol-shot-body { padding: 14px; }
	.mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-field--wide { grid-column: span 2; }
	.mk-found-grid { grid-template-columns: 1fr; }
	.mk-drops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-out-row { grid-template-columns: 54px 1fr auto; }
	.mk-out-row u { display: none; }
	.mk-total { flex-direction: column; align-items: flex-start; gap: 6px; }
	.mk-total strong { font-size: 19px; }
}