@import url("assets/main-design-system.css");

/* Ajustes específicos da campanha Meta Ads dentro do sistema visual principal. */
.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--moovz-yellow);
  color: var(--moovz-black);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }
.meta-ads-page .hero__copy h1 { max-width: 620px; }
.meta-ads-page .hero__copy { min-width: 0; }
.meta-ads-page .hero__intro { max-width: 560px; }
.meta-ads-page .hero__note { max-width: 500px; }
.meta-ads-page .moovz-button > svg { display: block; flex: 0 0 auto; }
.meta-ads-page .moovz-button > svg:first-child { width: 20px; height: 20px; }
.meta-ads-page .moovz-button > svg:last-child { width: 18px; height: 18px; margin-left: 2px; }

.meta-methodology { background: var(--moovz-offwhite); }
.meta-methodology__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
.meta-methodology .section-intro { margin-bottom: 0; }
.meta-methodology .section-intro h2 { max-width: 650px; }
.meta-methodology__copy { max-width: 580px; }
.meta-methodology__copy > p:not(.eyebrow) { max-width: 540px; color: var(--muted-foreground); font-size: 18px; }
.meta-methodology__visual {
  min-height: 350px;
  overflow: hidden;
  border: 8px solid var(--moovz-black);
  border-radius: var(--radius-image);
  background: var(--moovz-purple);
  box-shadow: 18px 20px 0 rgba(95, 74, 153, .5);
}
.meta-methodology__visual .illustration-board { min-height: 350px; background: #e6e0f3; }
.meta-methodology__visual .css-board-screen {
  top: 50%;
  width: min(72%, 460px);
  height: 62%;
  transform: translate(-50%, -50%) rotate(-4deg);
}
.meta-methodology__visual .css-board-screen__title { font-size: clamp(22px, 3vw, 38px); }
.meta-methodology__visual .css-board-screen__bar { height: 15px; margin-block: 13px; }
.meta-methodology__visual .css-board-screen__dots { transform: scale(1.35); transform-origin: right top; }

.meta-benefits-section { background: var(--moovz-orange); color: var(--moovz-black); }
.meta-benefits-section .media-copy > p:not(.eyebrow) { max-width: 520px; color: var(--moovz-black); }
.meta-benefits-section .media-copy h2 { max-width: 560px; }
.meta-benefits-section .media-visual { min-height: 400px; border-color: rgba(35, 39, 42, .9); box-shadow: 17px 17px 0 rgba(35, 39, 42, .25); }
.meta-benefits-section .video-facade,
.meta-benefits-section .video-facade__poster { min-height: 400px; }
.meta-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}
.meta-benefit-card { min-height: 210px; background: #f4f3f1; }
.meta-benefit-card .shadcn-card__header { min-height: 122px; }
.meta-benefit-card .icon-box { background: var(--moovz-black); }
.meta-benefit-card:nth-child(2) .icon-box { background: var(--moovz-purple); }
.meta-benefit-card:nth-child(3) .icon-box { background: var(--moovz-pink); }
.meta-benefit-card h3 { font-size: clamp(25px, 2.2vw, 32px); }

.meta-testimonials-section { background: var(--moovz-black); color: var(--moovz-offwhite); }
.meta-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meta-testimonials-section .section-intro { max-width: 760px; }

.meta-kit-section { background: #f5f4f2; }
.meta-kit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: 48px;
  align-items: center;
}
.meta-kit-copy .section-intro { margin-bottom: 28px; }
.meta-kit-copy .check-list { max-width: 620px; }
.meta-kit-copy .check-list li { color: var(--moovz-black); border-bottom-color: rgba(35, 39, 42, .14); }
.meta-kit-copy .check-list svg { color: var(--moovz-orange); }
.meta-kit-visual {
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--moovz-yellow);
}
.meta-kit-visual img { width: min(430px, 88%); height: auto; filter: drop-shadow(10px 14px 0 rgba(35, 39, 42, .15)); }
.meta-kit-copy .moovz-button { margin-top: 28px; }

.meta-steps-section { background: var(--moovz-offwhite); }
.meta-steps-section .section-intro { max-width: 730px; }

.meta-faq-section { background: var(--moovz-offwhite); }
.meta-faq-section .section-intro { margin-bottom: 0; }

.meta-ads-page .final-cta--orange { background: var(--moovz-orange); }
.meta-ads-page .final-cta--orange .moovz-button { background: var(--moovz-offwhite); color: var(--moovz-black); }
.meta-ads-page .final-cta--orange .moovz-button:hover,
.meta-ads-page .final-cta--orange .moovz-button:focus-visible { background: #fff; }

@media (max-width: 820px) {
  .meta-methodology__grid, .meta-kit-grid { grid-template-columns: 1fr; gap: 44px; }
  .meta-methodology__copy .section-intro { margin-bottom: 0; }
  .meta-methodology__visual { min-height: 310px; }
  .meta-methodology__visual .illustration-board { min-height: 310px; }
  .meta-methodology__visual .css-board-screen { height: 60%; }
  .meta-benefit-grid, .meta-testimonials-grid { grid-template-columns: 1fr 1fr; }
  .meta-kit-visual { min-height: 300px; }
}

@media (max-width: 560px) {
  .meta-ads-page .hero__grid {
    width: calc(100% - 48px);
    margin-inline: auto;
    min-width: 0;
  }
  .meta-ads-page .hero__copy,
  .meta-ads-page .hero__intro,
  .meta-ads-page .hero__actions,
  .meta-ads-page .hero__visual { width: 100%; max-width: 100%; min-width: 0; }
  .meta-ads-page .hero__copy,
  .meta-ads-page .hero__intro { max-width: 100%; }
  .meta-ads-page .hero__copy,
  .meta-ads-page .hero__intro,
  .meta-ads-page .hero__note { max-width: calc(100vw - 48px) !important; }
  .meta-ads-page .hero__intro,
  .meta-ads-page .hero__note { overflow-wrap: anywhere; }
  .meta-ads-page .hero__intro { font-size: 17px; line-height: 1.5; }
  .meta-ads-page .hero h1 { font-size: clamp(44px, 12.2vw, 62px); line-height: .98; }
  .meta-ads-page .header-cta { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; gap: 0; border-radius: 50%; }
  .meta-ads-page .header-cta span, .meta-ads-page .header-cta > svg:last-child { display: none; }
  .meta-ads-page .header-cta > svg:first-child { width: 23px; height: 23px; }
  .meta-ads-page .section-intro p:last-child, .meta-ads-page .media-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }
  .meta-ads-page .shadcn-card p { font-size: 16px; line-height: 1.5; }
  .meta-ads-page .hero__actions .moovz-button { max-width: 100%; }
  .meta-benefits-section .media-visual,
  .meta-benefits-section .video-facade,
  .meta-benefits-section .video-facade__poster { min-height: 270px; }
  .meta-benefit-grid, .meta-testimonials-grid { grid-template-columns: 1fr; }
  .meta-methodology__visual { border-width: 5px; box-shadow: 12px 15px 0 rgba(95, 74, 153, .5); }
  .meta-kit-visual { min-height: 250px; }
}