/* Layout específico da página Autarkis Marketplace. */

/* ── Hero (Obelisco Magnético no topo) ─────────────────────────────────── */

.mkt-hero {
  position: relative;
  background-color: var(--azul-900);
  color: var(--branco);
  border-top: none; 
  padding-block: var(--esp-7);
  overflow: hidden;
  text-align: center;
}

/* Magnetismo herdado */
.mkt-hero::before,
.mkt-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.mkt-hero::before {
  background-image: radial-gradient(circle 400px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(37, 99, 235, 0.4), transparent 80%);
  animation: glow-pulse-blue 10s infinite;
}

.mkt-hero::after {
  background-image: radial-gradient(circle 400px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(34, 197, 94, 0.4), transparent 80%);
  animation: glow-pulse-green 10s infinite;
}

.mkt-hero .container { 
  position: relative; 
  z-index: 2; 
  max-width: var(--largura-texto);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mkt-hero h1 { color: var(--branco); margin-bottom: var(--esp-2); }
.mkt-hero .subtitulo { color: var(--cinza-300); font-size: 1.15rem; }

/* ── Corpo (O que é) ───────────────────────────────────────────────── */

.mkt-corpo {
  max-width: var(--largura-texto);
}

.mkt-corpo p + p { margin-top: var(--esp-2); }

.mkt-frase-final {
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  border-left: 4px solid var(--verde-600);
  padding-left: var(--esp-2);
  margin-top: var(--esp-3);
  color: var(--azul-900);
}