/* ===================================
   Main Styles - Import all CSS files
   =================================== */

@import 'variables.css';
@import 'base.css';
@import 'layout.css';
@import 'components.css';
/* ================================
   AJUSTES GERAIS DE ESPAÇAMENTO
   ================================ */

section,
.section,
.section-muted,
#pacote,
#pra-quem-e,
#como-funciona,
#preco,
.cta-final {
   padding-top: 4rem;
   padding-bottom: 4rem;
}

/* Deixa títulos e subtítulos com respiro melhor */
.section-title {
   margin-bottom: 0.75rem;
   line-height: 1.25;
}

.section-subtitle {
   max-width: 640px;
   margin: 0.5rem auto 2.5rem;
   line-height: 1.6;
   font-size: 0.98rem;
}

/* Cards mais "respiráveis" */
.card,
.pricing-card,
.portfolio-card,
.faq-item,
.cta-final .card {
   padding: 1.75rem 1.5rem;
   border-radius: 0.9rem;
}

/* Espaçamento interno dos passos */
.steps {
   row-gap: 1.5rem;
}

.step {
   gap: 1rem;
}

/* ================================
   LAYOUT & GRIDS RESPONSIVOS
   ================================ */

.container {
   max-width: 1120px;
   margin: 0 auto;
   padding-inline: 1.5rem;
}

/* Grids base */
.grid {
   display: grid;
   gap: 2rem;
}

/* Por padrão em telas grandes */
.grid-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* Ajustes intermediários (tablets) */
@media (max-width: 1024px) {

   .grid-3,
   .grid-3-lg,
   .pricing-grid,
   .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .hero-title {
      font-size: 2.2rem;
   }

   .hero-subtitle {
      font-size: 1rem;
   }
}

/* Mobile primeiro (celulares) */
@media (max-width: 768px) {

   section,
   .section,
   .section-muted,
   #pacote,
   #pra-quem-e,
   #como-funciona,
   #preco,
   .cta-final {
      padding-top: 3rem;
      padding-bottom: 3rem;
   }

   .hero-inner {
      text-align: center;
   }

   .hero-title {
      font-size: 1.9rem;
      line-height: 1.25;
   }

   .hero-subtitle {
      font-size: 0.95rem;
      margin-top: 0.75rem;
   }

   .hero-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center;
   }

   /* Grids empilhando em 1 coluna */
   .grid-2,
   .grid-3,
   .grid-3-lg,
   .pricing-grid,
   .footer-grid,
   .compare-grid {
      grid-template-columns: 1fr;
   }

   .card,
   .pricing-card,
   .portfolio-card,
   .faq-item {
      padding: 1.5rem 1.25rem;
   }

   .section-title {
      font-size: 1.45rem;
      text-align: center;
   }

   .section-subtitle {
      font-size: 0.95rem;
      margin-bottom: 2rem;
      text-align: center;
   }

   .steps {
      gap: 1.25rem;
   }

   .step {
      align-items: flex-start;
   }

   .footer-grid {
      row-gap: 2rem;
   }

   .cta-final .hero-actions {
      flex-direction: column;
   }
}

/* ================================
   NAVBAR MOBILE SIMPLES
   ================================ */

@media (max-width: 768px) {
   .navbar-inner {
      padding-inline: 1.5rem;
   }

   .navbar-links {
      gap: 0.75rem;
   }

   .navbar-link {
      font-size: 0.9rem;
   }

   .navbar-cta {
      padding: 0.4rem 0.9rem;
      font-size: 0.9rem;
   }
}

/* ================================
   PRICING: AJUSTE FINO
   ================================ */

.pricing-card {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.pricing-price {
   margin-bottom: 0.25rem;
}

.pricing-list {
   margin-top: 0.5rem;
   margin-bottom: 0.75rem;
}

/* Em mobile, dá mais espaço entre blocos de preços */
@media (max-width: 768px) {
   #preco .pricing-grid {
      gap: 1.75rem;
   }
}

/* FAQ com mais respiro entre itens */
.faq-item+.faq-item {
   margin-top: 0.75rem;
}

/* ===========================================
   AJUSTE DE ESPAÇAMENTO ENTRE ETAPAS E CARDS
   =========================================== */

.etapa-titulo {
   margin-bottom: 2.5rem !important;
   /* mais espaço abaixo do título */
   margin-top: 3rem !important;
   /* mais espaço acima do título */
   text-align: center;
}

.etapa-subtitulo {
   margin-bottom: 3rem !important;
   /* respiro antes dos cards */
   text-align: center;
}

/* Para garantir espaço entre qualquer título com cards logo abaixo */
.etapa+.grid,
.etapa+.pricing-grid,
.section-title+.grid,
.section-title+.pricing-grid {
   margin-top: 2rem !important;
}

/* Em mobile, dá um pouquinho mais de respiro */
@media (max-width: 768px) {
   .etapa-titulo {
      margin-top: 2.5rem !important;
      margin-bottom: 2rem !important;
   }

   .etapa-subtitulo {
      margin-bottom: 2.5rem !important;
   }
}

/* ================================
   ETAPAS (ETAPA 1 / ETAPA 2)
   ================================ */

.step-block {
   margin-top: 3.5rem;
   /* espaço acima da etapa */
   margin-bottom: 2.5rem;
   /* espaço antes dos cards */
}

.step-label-wrapper {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 0.75rem;
}

/* Linhas à esquerda e à direita da etiqueta */
.step-label-wrapper::before,
.step-label-wrapper::after {
   content: "";
   flex: 1;
   height: 1px;
   background: rgba(212, 163, 115, 0.4);
   /* dourado suave */
}

/* Badge "Etapa 1 / Etapa 2" */
.step-label {
   padding: 0.35rem 1.2rem;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   background: #FAF9F6;
   border: 1px solid rgba(212, 163, 115, 0.6);
   color: #1A2A33;
}

/* Título e subtítulo da etapa */
.step-title {
   margin-bottom: 0.4rem;
   font-size: 1.5rem;
}

.step-subtitle {
   margin-bottom: 2.5rem;
}

/* Mobile: um pouco menos de espaço para não ficar pesado */
@media (max-width: 768px) {
   .step-block {
      margin-top: 2.5rem;
      margin-bottom: 2rem;
   }

   .step-title {
      font-size: 1.3rem;
   }

   .step-subtitle {
      margin-bottom: 2rem;
   }
}

.cta-final,
.cta-final * {
   color: #ffffff !important;
}

.cta-final p,
.cta-final .section-subtitle {
   color: #ffffff !important;
   opacity: 1 !important;
}

/* ================================
   LOGO STYLES
   ================================ */

.navbar-logo {
   display: flex;
   align-items: center;
}

.navbar-logo-img {
   height: auto;
   width: 180px;
   filter: brightness(0) invert(1);
}

.hero-logo {
   max-width: 200px;
   height: auto;
   margin: 0 auto 2rem;
   filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
   .navbar-logo-img {
      height: 32px;
   }

   .hero-logo {
      max-width: 160px;
      margin-bottom: 1.5rem;
   }
}