/* ==========================================================================
   RESPONSIVIDADE — mobile-first, breakpoints principais em 768px e 1024px
   Validado nas larguras: 360, 390, 768, 1024, 1366, 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ate 479px — ajustes finos de telas muito estreitas (360/390)
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero__actions,
  .cta-final__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .cta-final__actions .btn {
    width: 100%;
  }

  .pricing-card {
    padding: var(--space-6) var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   >= 640px
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .trust-strip__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .differentials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   >= 768px (tablet)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form__grid .form-field--full,
  .contact-form__grid .form-checkbox,
  .contact-form__grid .form-field--textarea {
    grid-column: 1 / -1;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   >= 1024px (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
  }

  .hero__content {
    flex: 1 1 55%;
  }

  .hero__visual {
    flex: 1 1 45%;
  }

  .trust-strip__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-strip__item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background-color: var(--color-border);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-card--highlight {
    transform: scale(1.03);
  }

  .pricing-card--highlight:hover {
    transform: scale(1.03) translateY(-4px);
  }

  .steps__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .differentials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   >= 1280px — respiro extra em telas grandes (1366/1920)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero {
    padding-block: 5.5rem 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card:hover,
  .portfolio-card:hover,
  .pricing-card--highlight:hover {
    transform: none;
  }
}