/* Guia da marca iSol (/marca/, v1.51). Reaproveita /parceiros/kit/kit.css; só o que é próprio do guia. */
.mk-logos { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 14px; margin-top: 18px }
.mk-logos figure { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line-exec) }
.mk-logos img { width: 100%; height: auto; max-height: 120px; object-fit: contain }
.mk-logos figcaption { font: 500 12px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase }
.mk-claro { background: #f4f8fc } .mk-claro figcaption { color: #4a5b70 }
.mk-escuro, .mk-simb { background: #05070A } .mk-escuro figcaption, .mk-simb figcaption { color: var(--on-dark-mut) }
.mk-regras { margin: 14px 0 0; padding-left: 18px; color: var(--on-dark-soft); font-size: 14px; line-height: 1.7 }
.mk-cores { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px }
.mk-cores li { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line-exec); border-radius: 12px; background: var(--bg-2) }
.mk-sw { height: 72px; border-radius: 8px; border: 1px solid var(--line-exec) }
.mk-cores b { font-family: var(--f-display); font-size: 15px; color: var(--on-dark) }
.mk-hex { justify-self: start; font: 500 13px/1 var(--f-mono); color: var(--cyan); background: transparent; border: 1px dashed var(--line-exec); border-radius: 6px; padding: 6px 8px; cursor: pointer; min-height: 32px }
.mk-hex:hover, .mk-hex:focus-visible { border-color: var(--cyan) }
.mk-cores small { color: var(--on-dark-soft); font-size: 12.5px; line-height: 1.4 }
.mk-copied { min-height: 20px; margin: 10px 0 0; color: var(--cyan) !important; font-size: 13px }
.mk-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 12px }
.mk-tipos div { padding: 20px; border: 1px solid var(--line-exec); border-radius: var(--radius); background: var(--bg-2); display: grid; gap: 6px }
.mk-tipos small { color: var(--on-dark-soft); font-size: 13.5px }
.mk-t1 { margin: 0; font: 700 34px/1.1 var(--f-display); color: var(--on-dark) !important }
.mk-t2 { margin: 0; font: 500 28px/1.2 var(--f-body); color: var(--on-dark) !important }
.mk-t3 { margin: 0; font: 500 22px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--cyan) !important }
.mk-masc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px }
.mk-masc figure { margin: 0; padding: 20px; border: 1px solid var(--line-exec); border-radius: var(--radius); background: var(--bg-2); display: grid; justify-items: center; gap: 10px; text-align: center }
.mk-masc img { width: 160px; height: auto }
.mk-masc figcaption { display: grid; gap: 4px; color: var(--on-dark-soft); font-size: 13.5px }
.mk-masc b { font-family: var(--f-display); color: var(--on-dark); font-size: 17px }
.mk-sig { font: 700 clamp(20px, 2.6vw, 28px)/1.3 var(--f-display); color: var(--on-dark) !important; margin: 6px 0 12px }
.mk-do { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.mk-do > div { padding: 20px; border: 1px solid var(--line-exec); border-radius: var(--radius); background: var(--bg-2) }
.mk-do > div:first-child { border-top: 3px solid #16a34a } .mk-do > div:last-child { border-top: 3px solid #c2452f }
.mk-do h3 { margin: 0 0 10px; font-family: var(--f-display); font-size: 18px; color: var(--on-dark) }
.mk-do ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--on-dark-soft); font-size: 14px; line-height: 1.5 }
.mk-page .hi-hero .kit-dls .btn svg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px }
@media (max-width: 900px) { .mk-logos, .mk-tipos, .mk-masc, .mk-do { grid-template-columns: 1fr } .mk-logos figure { max-width: 520px } }