/* MktOps — o que é instalado (Figma 8502:4262 · mobile 8695:3463) */

/* 8502:4262: px 32 · py 120 · gap 80 · stroke gray-900 embaixo */
.mk-inst {
  padding-block: var(--section-py);
  background: var(--black-200);
  box-shadow: inset 0 -1px 0 var(--gray-900);
}
.mk-inst__inner { display: flex; flex-direction: column; gap: 80px; }
.mk-inst__body { display: flex; flex-direction: column; gap: 32px; }

/* Main Container 8502:4265: borda gray-900 · item grande (436) à esquerda, 2×2 (469) à direita: 192 + 191 */
.mk-inst__grid {
  display: grid;
  grid-template-columns: minmax(0, 436fr) minmax(0, 469fr) minmax(0, 469fr);
  border: 1px solid var(--gray-900);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Item Container 8502:4266: p 32 · gap 32 · arquivo + texto centrado na vertical */
.mk-inst__item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
}
.mk-inst__item:nth-child(2) { border-right: 1px solid var(--gray-900); border-bottom: 1px solid var(--gray-900); }
.mk-inst__item:nth-child(3) { border-bottom: 1px solid var(--gray-900); }
.mk-inst__item:nth-child(4) { border-right: 1px solid var(--gray-900); }
/* 8502:4318: coluna, arquivo no topo e texto no pé (383 de altura) */
.mk-inst__item--main {
  grid-row: span 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-right: 1px solid var(--gray-900);
}

/* File 8502:4319: 90×127 — o SVG tem 142×155 por causa da sombra (documento em x 3, y 11) */
.mk-inst__file { flex: none; display: block; width: 90px; height: 127px; }
.mk-inst__file img { width: 142px; height: 155px; max-width: none; margin: -11px 0 0 -3px; }

/* 8502:4278 · Exo SemiBold 24/1.3 (o Figma arredonda a caixa: 3 × 31,2 → 93) · trecho em gray-500 */
.mk-inst__text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: var(--gray-0);
  text-wrap: pretty;
}
.mk-inst__item--main .mk-inst__text { flex: none; width: 100%; }
.mk-inst__text em { font-style: normal; color: var(--gray-500); }

/* Frame 94 8502:4715: black-100 · p 32 · texto de 485 · ilustração 232 (8512:5774) a 33 da direita, 29 acima, cortada */
.mk-inst__community {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: var(--black-100);
}
.mk-inst__community .mk-inst__text { width: 485px; max-width: 100%; }
.mk-inst__illus { position: absolute; top: -29px; right: 33px; width: 232px; height: 232px; overflow: visible; }

/* Entradas (motion.js): título por linhas; itens um a um (data-reveal-group: arquivo em pop, texto sobe); texto da faixa
   sobe. Os itens não são link: sem efeito de hover (MODEL.md, "Regra de hover").
   Comunidade: ilustração fixa na posição do Figma. Enquanto está na tela a faixa tem .is-looping (data-loop, motion.js):
   uma luz por peça (cópia de cada path, .mk-com__run, assets/js/sections/mktops-03-instalado.js) corre pelas arestas
   sem parar e apaga quando a faixa sai da tela. --len = comprimento do path: o padrão tem período = comprimento, então a luz dá a volta sem emenda.
   Fora do loop, sem JS ou com movimento reduzido: o quadro do Figma (sem luz) */
.mk-com__run {
  stroke-width: 1.4;
  stroke-dasharray: 22px calc(var(--len) - 22px);
  opacity: 0;
  transition: opacity .6s ease;
  animation: mk-com-run var(--dur, 6s) linear var(--delay, 0s) infinite paused;
  filter: drop-shadow(0 0 2px var(--green-300));
}
@media (prefers-reduced-motion: no-preference) {
  .mk-inst__community.is-looping .mk-com__run { opacity: 1; animation-play-state: running; }
}
@keyframes mk-com-run { to { stroke-dashoffset: calc(-1 * var(--len)); } }

/* até 1199 (não só no tablet): em 3 colunas o texto ao lado do arquivo fica estreito e "recorrente" sobrava sozinho */
@media (max-width: 1199px) {
  .mk-inst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-inst__item--main { grid-column: span 2; grid-row: auto; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--gray-900); }
  .mk-inst__item--main .mk-inst__text { flex: 1 1 0; width: auto; }
  .mk-inst__community .mk-inst__text { width: 60%; }
}

/* Mobile 8695:3463 (375×1506): py 60 · gap 40 · título Exo 28 (caixa 34) · itens empilhados (p 24, gap 24, borda embaixo),
   texto Exo 20/1.3 (caixa 26 por linha) · "templates" e "guia" com 191 de altura · comunidade 343×281 com a ilustração embaixo */
@media (max-width: 767px) {
  .mk-inst__inner { gap: 40px; }
  .mk-inst .section-title { font-size: 28px; line-height: 34px; }
  .mk-inst__grid { grid-template-columns: minmax(0, 1fr); }
  .mk-inst__grid .mk-inst__item { grid-column: auto; gap: 24px; padding: 24px; border: 0; border-bottom: 1px solid var(--gray-900); }
  .mk-inst__grid .mk-inst__item:last-child { border-bottom: 0; }
  /* 8695:3467: arquivo e texto lado a lado, alinhados no topo (texto de 7 linhas) */
  .mk-inst__grid .mk-inst__item--main { flex-direction: row; align-items: flex-start; justify-content: flex-start; }
  .mk-inst__item--main .mk-inst__text { flex: 1 1 0; width: auto; }
  .mk-inst__item--fixed { min-height: 191px; }
  .mk-inst__text { font-size: 20px; line-height: 26px; }
  .mk-inst__community { display: flex; flex-direction: column; gap: 24px; height: 281px; padding: 24px; }
  .mk-inst__community .mk-inst__text { width: auto; }
  .mk-inst__illus { position: static; flex: none; align-self: center; }
}
/* Celular estreito (320): arquivo em 2/3 para o texto ao lado ter largura (sem palavra viúva) */
@media (max-width: 359px) {
  .mk-inst__file { zoom: .667; }
}