/* ==========================================================================
   LAYOUT.CSS
   Estrutura Global do Projeto
   ========================================================================= */

/* ==========================================================================
   CONTAINER
   ========================================================================= */

.container {

  width: 100%;

  max-width: var(--container-width);

  margin-inline: auto;

  padding-inline: 1.25rem;

}

/* ==========================================================================
   MAIN
   ========================================================================= */

main {

  overflow: hidden;

}

/* ==========================================================================
   SEÇÕES
   ========================================================================= */

section {

  padding-block: var(--space-3xl);

  scroll-margin-top: 100px;

}

@media (min-width: 768px) {

  section {

    padding-block: var(--space-4xl);

  }

}

/* ==========================================================================
   SECTION HEADING
   ========================================================================= */

.section-heading {

  max-width: 760px;

  margin-inline: auto;

  text-align: center;

  margin-bottom: var(--space-2xl);

}

.section-heading__eyebrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.5rem 1rem;

  border-radius: var(--radius-pill);

  border: 1px solid var(--color-border);

  background: rgba(255,255,255,0.03);

  color: var(--color-accent);

  font-size: var(--font-size-sm);

  font-weight: var(--font-weight-semibold);

  margin-bottom: var(--space-md);

}

.section-heading h2 {

  margin-bottom: var(--space-lg);

}

.section-heading p {

  font-size: var(--font-size-lg);

}

/* ==========================================================================
   GRID BASE
   ========================================================================= */

.grid {

  display: grid;

  gap: var(--space-lg);

}

/* ==========================================================================
   GRID 2 COLUNAS
   ========================================================================= */

.grid-2 {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .grid-2 {

    grid-template-columns: repeat(2, 1fr);

  }

}

/* ==========================================================================
   GRID 3 COLUNAS
   ========================================================================= */

.grid-3 {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 992px) {

  .grid-3 {

    grid-template-columns: repeat(3, 1fr);

  }

}

/* ==========================================================================
   GRID 4 COLUNAS
   ========================================================================= */

.grid-4 {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 992px) {

  .grid-4 {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   HERO
   ========================================================================= */

.hero__container {

  display: grid;

  gap: var(--space-2xl);

  align-items: center;

}

@media (min-width: 992px) {

  .hero__container {

    grid-template-columns: 1.1fr 0.9fr;

  }

}

/* ==========================================================================
   HERO CONTENT
   ========================================================================= */

.hero__content {

  display: flex;

  flex-direction: column;

  gap: var(--space-lg);

}

.hero__visual {

  display: flex;

  justify-content: center;

  align-items: center;

}

/* ==========================================================================
   HERO ACTIONS
   ========================================================================= */

.hero__actions {

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

}

@media (min-width: 640px) {

  .hero__actions {

    flex-direction: row;

  }

}

/* ==========================================================================
   AUTORIDADE
   ========================================================================= */

.authority__grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .authority__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1200px) {

  .authority__grid {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   PROBLEMA
   ========================================================================= */

.problem__grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .problem__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

/* ==========================================================================
   SOLUTION
   ========================================================================= */

.solution__grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 992px) {

  .solution__grid {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   SERVICES
   ========================================================================= */

.services__grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .services__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1200px) {

  .services__grid {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   PROCESS
   ========================================================================= */

.process__timeline {

  display: grid;

  gap: var(--space-xl);

}

@media (min-width: 992px) {

  .process__timeline {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   NICHOS
   ========================================================================= */

.niches__grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .niches__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1200px) {

  .niches__grid {

    grid-template-columns: repeat(5, 1fr);

  }

}

/* ==========================================================================
   PORTFÓLIO
   ========================================================================= */

.portfolio-preview__grid {

  display: grid;

  gap: var(--space-xl);

}

@media (min-width: 992px) {

  .portfolio-preview__grid {

    grid-template-columns: repeat(3, 1fr);

  }

}

/* ==========================================================================
   FEATURED PROJECTS
   ========================================================================= */

.featured-projects__grid {

  display: grid;

  gap: var(--space-xl);

}

@media (min-width: 992px) {

  .featured-projects__grid {

    grid-template-columns: repeat(3, 1fr);

  }

}

/* ==========================================================================
   PROCESS GRID
   ========================================================================= */

.process-grid {

  display: grid;

  gap: var(--space-lg);

}

@media (min-width: 768px) {

  .process-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1200px) {

  .process-grid {

    grid-template-columns: repeat(5, 1fr);

  }

}

/* ==========================================================================
   DIFFERENTIALS
   ========================================================================= */

.differentials .services__grid {

  gap: var(--space-lg);

}

@media (min-width: 1200px) {

  .differentials .services__grid {

    grid-template-columns: repeat(5, 1fr);

  }

}

/* ==========================================================================
   ABOUT PREVIEW
   ========================================================================= */

.about-preview .hero__container {

  align-items: center;

}

.about-preview img {

  width: 100%;

  max-width: 420px;

  margin-inline: auto;

}

/* ==========================================================================
   PLANOS pricing
   ========================================================================= */

.pricing__grid {

  display: grid;

  gap: var(--space-xl);

}

@media (min-width: 992px) {

  .pricing__grid {

    grid-template-columns: repeat(3, 1fr);

    align-items: stretch;

  }

}

/* ==========================================================================
   FAQ
   ========================================================================= */

.faq__wrapper {

  max-width: 900px;

  margin-inline: auto;

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

}

/* ==========================================================================
   CTA FINAL
   ========================================================================= */

.final-cta__content {

  max-width: 900px;

  margin-inline: auto;

  text-align: center;

}

/* ==========================================================================
   FOOTER
   ========================================================================= */

.footer__grid {

  display: grid;

  gap: var(--space-xl);

}

@media (min-width: 768px) {

  .footer__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (min-width: 1200px) {

  .footer__grid {

    grid-template-columns: repeat(4, 1fr);

  }

}

/* ==========================================================================
   SECTION CTA
   ========================================================================= */

.section-cta {

  display: flex;

  justify-content: center;

  margin-top: var(--space-2xl);

}

/* ==========================================================================
   RESPONSIVIDADE EXTRA
   ========================================================================= */

@media (max-width: 360px) {

  .container {

    padding-inline: 1rem;

  }

}