/* MktOps — topo (Figma 8425:3827 · mobile 8695:3271) */

/* 8425:3827: px 32 · pt 120 · pb 0 · gap 80 (texto → diagrama) */
.mk-hero {
  padding-top: var(--section-py);
  background: var(--black-200);
  overflow: hidden;
}
.mk-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* Article 8425:4101: 984 de largura, gap 32, centralizado */
.mk-hero__article {
  width: 100%;
  max-width: 984px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.mk-hero__heading { display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* 8425:4103 · Exo SemiBold 62/1.1 (caixa 204 = 3 × 68) · "Não terceirizamos seu marketing." em gray-500 */
.mk-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 62px;
  line-height: 68px;
  color: var(--gray-0);
}
.mk-hero__title em { font-style: normal; color: var(--gray-500); }
/* 8425:4104 · Cabin 18/1.5 gray-300 — caixa de 592 */
.mk-hero__lead { max-width: 592px; font-size: 18px; line-height: 1.5; color: var(--gray-300); }
/* Container buttons 8425:4105: gap 16 · os dois botões com 170 (8425:4107: texto de 112 centralizado) */
.mk-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.mk-hero__actions .btn { min-width: 170px; justify-content: center; } /* 8425:4106/4107: 170 cada */

/* Main Container 8453:9443: 1184×290 — padrão do chão (cortado embaixo) numa <img> atrás e o diagrama em camadas
   inline por cima (partials/mktops-01-diagrama.html): .mk-dg--d no desktop, .mk-dg--m (vertical) no celular */
.mk-hero__diagram { position: relative; margin: 0; width: 100%; max-width: 1184px; }
.mk-hero__floor { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-dg { position: relative; display: block; overflow: visible; }
.mk-dg--d { width: 100%; height: auto; aspect-ratio: 1184 / 290; }
.mk-dg--m { display: none; }

/* Entrada ao carregar (motion.js: data-split / data-reveal / data-reveal-group com data-motion-start="load"): título por
   linhas, texto (+150 ms) e botões (+200 e +260 ms) com 0,7 s em vez de 0,9 s — tudo termina em até 1 s, antes das
   etiquetas do diagrama */
.motion-on .mk-hero__title[data-split].is-in .m-w__i,
.motion-on .mk-hero__article [data-reveal].is-in { animation-duration: .7s; }

/* Diagrama animado (assets/js/sections/mktops-01-hero.js). Repouso (sem JS, movimento reduzido, fora do loop) = quadro do
   Figma: luzes paradas (.mk-dg__static), etiquetas à vista, pastas paradas. Enquanto está na tela a figura tem
   .is-looping (data-loop, motion.js) e o ciclo de 5 s do fluxo se repete: o JS liga .is-running no SVG — as luzes do Figma dão
   lugar às que correm (.mk-dg__flow) e o JS acende o contorno do núcleo (.mk-dg__glow), o traço que contorna a borda
   (.mk-dg__trace) e o contorno da pasta na partida/chegada (.mk-dg__hl), por quadro no atributo style */
.mk-dg__flow { opacity: 0; }
.mk-dg__static { transition: opacity .4s ease; }
.mk-dg.is-running .mk-dg__flow { opacity: 1; }
.mk-dg.is-running .mk-dg__static { opacity: 0; }
.mk-dg__glow,
.mk-dg__trace,
.mk-dg__hl { opacity: 0; }
.mk-dg__flow,
.mk-dg__trace { filter: drop-shadow(0 0 3px rgb(168 232 122 / .75)); }
.mk-dg__hl { filter: drop-shadow(0 0 4px rgb(168 232 122 / .5)); }

/* Pastas: flutuam (sobe e volta a cada 5 s, cada uma um pouco defasada) enquanto dura o loop — no desktop na vertical,
   no celular na horizontal (a linha encosta na lateral da pasta no desktop e na base/topo no celular: flutuando ao
   longo da borda ela nunca se solta) */
@media (prefers-reduced-motion: no-preference) {
  .mk-hero__diagram.is-looping .mk-dg__folder {
    transform-box: fill-box;
    animation: mk-dg-float-y 5s ease-in-out calc(var(--i, 0) * .3s) infinite both;
  }
  .mk-hero__diagram.is-looping .mk-dg--m .mk-dg__folder { animation-name: mk-dg-float-x; }
}
@keyframes mk-dg-float-y { 50% { transform: translateY(-6px); } }
@keyframes mk-dg-float-x { 50% { transform: translateX(5px); } }

/* Etiquetas entram uma por vez quando a pasta chega na tela (.is-in + --delay pelo JS). Só esconde com html.motion-on
   (ligado no <head> antes da 1ª pintura, só com movimento liberado; some se o motion.js não carregar) */
.motion-on .mk-dg__label { opacity: 0; transform: translateX(-10px); transform-box: fill-box; }
.motion-on .mk-dg__folder.is-in .mk-dg__label {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease var(--delay, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s);
}
@media print {
  .mk-dg__label { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1023px) {
  .mk-hero__title { font-size: 48px; line-height: 1.1; }
}

/* Mobile 8695:3271 (375×1500,08): py 60 · Article 8695:3272 com gap 40 entre título, botões e diagrama ·
   título Exo 32/1.2 (caixa 4 × 38) · botões empilhados de 343 · diagrama vertical 155,6×880,08 (8696:4910),
   SVG de 208 porque as etiquetas MCP (−18,06) e Pipelines passam das bordas */
@media (max-width: 767px) {
  .mk-hero { padding-bottom: var(--section-py); }
  .mk-hero__inner,
  .mk-hero__article { gap: 40px; }
  .mk-hero__title { font-size: 32px; line-height: 38px; }
  .mk-hero__lead { max-width: none; }
  .mk-hero__actions { flex-direction: column; align-self: stretch; }
  .mk-hero__diagram { width: 155.6px; height: 880.08px; }
  .mk-hero__floor,
  .mk-dg--d { display: none; }
  .mk-dg--m { display: block; width: 208px; max-width: none; height: 881px; margin-left: -18.07px; }
}