/* Zentupages — página /media-kit
   Complementa o style.css (mesmos tokens e componentes). Só o que é exclusivo desta página. */

/* ---------- Hero (sem o efeito de "hero fixo" da página principal) ---------- */
.hero--static { position: relative; top: auto; transform: none; filter: none; padding-bottom: 48px; }
.hero--static .hero__cta { gap: 16px; padding-top: 8px; }
.hero--static .note { text-wrap: balance; }
/* No celular o H1 cabe em duas linhas, como no Figma (34px quebraria em 3) */
@media (max-width: 767.98px) {
  .hero--static .hero__title { font-size: min(2.125rem, 8vw); line-height: 1.18; }
}

@media (min-width: 1024px) {
  .hero--static { padding-top: 56px; padding-bottom: 72px; }
  .hero--static .hero__cta { margin-top: 48px; padding-top: 0; gap: 32px; }
  .hero--static .hero__cta .note { margin-top: 0; }
}

/* ---------- Exemplo (mídia kit da Anna) ---------- */
main > .section.mk-demo { border-block: 0; }
.mk-demo { --pt: 96; --ptd: 160; --pb: 96; --pbd: 160; }
.section > .container.mk-demo__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.mk-demo__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.mk-demo__media { order: -1; }

.mk-mock {
  display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 640 / 440;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-1); box-shadow: var(--elevation-mockup);
  overflow: hidden;
  transition: box-shadow 400ms var(--ease-ui);
}
.mk-mock .mock__url { font-size: 10px; }
.mk-mock .mock__img { overflow: hidden; }
.mk-mock .mock__img img { pointer-events: auto; transition: transform 600ms var(--ease-in); }
.mk-mock:hover { box-shadow: 0 40px 80px -8px rgb(0 0 0 / 0.65); }
.mk-mock:hover .mock__img img { transform: scale(1.03); }
.mk-mock:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: var(--radius-lg); }

@media (min-width: 768px) {
  .mk-demo__media { width: 100%; max-width: 640px; }
  .mk-mock .mock__bar { padding: 12px 16px; }
  .mk-mock .mock__url { font-size: 12px; }
}
@media (min-width: 1024px) {
  .section > .container.mk-demo__grid { grid-template-columns: minmax(0, 504fr) minmax(0, 640fr); gap: 56px; align-items: start; }
  .mk-demo__copy { gap: 56px; }
  .mk-demo__media { order: 0; max-width: none; }
}

/* ---------- Oferta: preço menor que o da página principal (72 desktop / 40 mobile) ---------- */
.mk .price {
  font-size: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  line-height: clamp(2.75rem, 1.914rem + 3.429vw, 5rem);
}
@media (min-width: 1024px) {
  .mk .offer__card { row-gap: 32px; }
}