/* MktOps — os três níveis (Figma 8502:3101 · mobile 8695:3548) */

/* 8502:3101: px 32 · py 120 · gap 80 */
.mk-niveis { padding-block: var(--section-py); background: var(--black-200); }
.mk-niveis__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 80px; }
.mk-niveis__grid { align-self: stretch; }

/* Container 8502:3105: borda gray-900 · 3 colunas de 457,33 (a do meio com bordas laterais: 459,33) */
.mk-niveis__grid {
  display: grid;
  grid-template-columns: minmax(0, 457.33fr) minmax(0, 459.33fr) minmax(0, 457.33fr);
  border: 1px solid var(--gray-900);
}
.mk-plano--mid { border-inline: 1px solid var(--gray-900); }

/* Card header 8502:3107: p 32 · 93 de altura · desenho de arquivos encostado à direita, cortado embaixo */
.mk-plano__head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 93px;
  padding: 32px;
}
.mk-plano__rows,
.mk-plano__row dd { margin: 0; }
.mk-plano__title { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; }
/* 8502:3108 · Exo SemiBold 24/1.2 (caixa 29) */
.mk-plano__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  color: var(--gray-0);
}
/* Tag 8502:3128: p 2/6 · Cabin Bold 12/1.3 (caixa 16) maiúsculo, black-200 sobre green-300 */
.mk-plano__tag {
  padding: 2px 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--black-200);
  background: var(--green-300);
}
/* Desenhos (8502:5096 · 8505:5195 · 8505:5342): SVG com sombra — documento a 1,89 da esquerda e 7,29 do topo do SVG */
.mk-plano__deco { position: absolute; max-width: none; pointer-events: none; }
.mk-plano__deco--solo { top: 11.71px; right: 1.22px; }
.mk-plano__deco--squad { top: 11.71px; right: -0.45px; }
.mk-plano__deco--enterprise { top: 16px; right: 31px; }

/* Section 8502:3110: p 24/32 · gap 8 · 97 de altura · linhas 1, 3 e 5 em black-100 */
.mk-plano__row { display: flex; flex-direction: column; gap: 8px; padding: 24px 32px; }
.mk-plano__row:nth-child(odd) { background: var(--black-100); }
/* 8502:3111 · Cabin Bold 18/1.2 (caixa 22) */
.mk-plano__row dt { font-weight: 700; font-size: 18px; line-height: 22px; color: var(--gray-0); }
/* 8502:3112 · Cabin 16/1.2 gray-300 (caixa 19) */
.mk-plano__row dd { font-size: 16px; line-height: 19px; color: var(--gray-300); }

/* Nome e selo sempre acima do desenho (que tem fundo black-200) */
.mk-plano__name,
.mk-plano__title { position: relative; z-index: 1; }

/* Os planos não são link: sem efeito de hover (MODEL.md, "Regra de hover").
   Entrada quando o plano chega na tela (assets/js/sections/mktops-04-niveis.js; o título é do motion.js, por linhas):
   no cabeçalho o nome sobe, o selo "Popular" aparece crescendo e o desenho sobe 16 px dentro do cabeçalho (que corta);
   depois as linhas — rótulo e valor sobem 10 px e aparecem, linha a linha (--r) e plano a plano (--c); o fundo das
   linhas não se mexe. Sem .is-armed (sem JS / movimento reduzido) fica o desenho do Figma; esconder é instantâneo,
   só a entrada tem transição */
.mk-niveis__grid.is-armed .mk-plano__name { opacity: 0; translate: 0 16px; }
.mk-niveis__grid.is-armed .mk-plano__tag { opacity: 0; scale: .9; }
.mk-niveis__grid.is-armed .mk-plano__deco { translate: 0 16px; }
.mk-niveis__grid.is-armed .mk-plano__row > * { opacity: 0; translate: 0 10px; }
.mk-niveis__grid.is-armed .mk-plano.is-in .mk-plano__name {
  opacity: 1;
  translate: none;
  transition: opacity .7s ease, translate .8s cubic-bezier(.25, .6, .3, 1);
  transition-delay: calc(var(--c, 0) * 90ms);
}
.mk-niveis__grid.is-armed .mk-plano.is-in .mk-plano__tag {
  opacity: 1;
  scale: none;
  transition: opacity .6s ease, scale .7s cubic-bezier(.25, .6, .3, 1);
  transition-delay: calc(var(--c, 0) * 90ms + 160ms);
}
.mk-niveis__grid.is-armed .mk-plano.is-in .mk-plano__deco {
  translate: none;
  transition: translate 1s cubic-bezier(.25, .6, .3, 1) calc(var(--c, 0) * 90ms + 80ms);
}
.mk-niveis__grid.is-armed .mk-plano.is-in .mk-plano__row > * {
  opacity: 1;
  translate: none;
  transition: opacity .7s ease, translate .8s cubic-bezier(.25, .6, .3, 1);
  transition-delay: calc(var(--c, 0) * 90ms + 200ms + var(--r, 0) * 110ms);
}
.mk-niveis__grid.is-armed .mk-plano.is-in .mk-plano__row > dd { transition-delay: calc(var(--c, 0) * 90ms + 270ms + var(--r, 0) * 110ms); }
@media print {
  .mk-niveis__grid.is-armed :is(.mk-plano__name, .mk-plano__tag, .mk-plano__deco, .mk-plano__row > *) { opacity: 1; translate: none; scale: none; transition: none; }
}

/* 768–1023: três colunas ficam estreitas demais para o desenho — planos empilhados, como no Mobile */
@media (max-width: 1023px) {
  .mk-niveis__grid { grid-template-columns: minmax(0, 1fr); }
  .mk-plano--mid { border-inline: 0; border-block: 1px solid var(--gray-900); }
}

/* Mobile 8695:3548 (375×1644): py 60 · gap 40 · título Exo 28 (caixa 34) · planos empilhados (o do meio com borda em
   cima e embaixo) · cabeçalho p 24 (77) · linhas p 16/24 (81) */
@media (max-width: 767px) {
  .mk-niveis__inner { gap: 40px; }
  .mk-niveis .section-title { font-size: 28px; line-height: 34px; }
  .mk-plano__head { height: 77px; padding: 24px; }
  .mk-plano__row { padding: 16px 24px; }
  .mk-plano__deco--solo { top: 16.71px; right: -7.17px; }
  .mk-plano__deco--squad { top: 16.71px; right: -5.68px; }
  .mk-plano__deco--enterprise { top: 16px; right: -1px; }
}