/* =========================================================
   DBSUPPORT — responsive.css
   Abordagem Mobile First — breakpoints Bootstrap 5
   ========================================================= */

/* ============ Base (mobile < 576px) já definida em style.css ============ */

@media (max-width: 991.98px) {
  .nav-toggle { display: flex !important; }
}

.nav-links {
  position: fixed;
  top: 0; right: -100%;
  width: 80%;
  max-width: 340px;
  height: 100vh;
  background: var(--navy-950);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  padding: 100px 32px 32px;
  transition: right var(--transition-base);
  z-index: 999;
  box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}
.nav-links.open { right: 0; }
@media (max-width: 991.98px) {
  .nav-links .nav-link {
    color: rgba(255,255,255,0.85) !important;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-links .nav-link::after { display: none; }
}

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(6,14,28,0.6);
  z-index: 998;
  opacity: 0; visibility: hidden;
  transition: all var(--transition-base);
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navbar-custom.hero-dark:not(.scrolled) .nav-toggle.active span { background: var(--white); }

.about-features { grid-template-columns: 1fr; }

.timeline::before { left: 20px; }

/* Coluna única no mobile: a bolinha do texto sempre fica à esquerda,
   do mesmo lado da linha/bolinha principal (left: 13px) */
.timeline-content .eyebrow::before { content: ""; }
.timeline-content .eyebrow::after { content: none; }
.timeline-item,
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
  width: 100%;
  left: 0;
  text-align: left;
  padding: 0 0 50px 50px;
}
.timeline-item:nth-child(odd)::before,
.timeline-item:nth-child(even)::before { left: 13px; right: auto; }

.footer-bottom { flex-direction: column; text-align: center; }

.hero-title { font-size: 2.1rem; }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-lg-custom { justify-content: center; }

.section { padding: 70px 0; }

/* ============ Small devices (>= 576px) ============ */
@media (min-width: 576px) {
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-actions .btn-lg-custom { justify-content: flex-start; }
}

/* ============ Tablets (>= 768px) ============ */
@media (min-width: 768px) {
  .about-features { grid-template-columns: 1fr 1fr; }
  .section { padding: 90px 0; }
}

/* ============ Small laptops (>= 992px) ============ */
@media (min-width: 992px) {
  .nav-toggle { display: none; }

  .nav-links {
    position: static;
    width: auto; height: auto;
    background: none;
    flex-direction: row;
    align-items: center;
    padding: 0;
    box-shadow: none;
  }
  .nav-links .nav-link {
    width: auto;
    padding: 0;
    border-bottom: none;
  }
  .nav-links .nav-link::after { display: block; }
  .nav-overlay { display: none; }

  .timeline::before { left: 50%; }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    width: 50%;
    padding: 0 50px 70px;
  }
  .timeline-item:nth-child(odd) { left: 0; text-align: right; }
  .timeline-item:nth-child(even) { left: 50%; text-align: left; }
  .timeline-item:nth-child(odd)::before { right: -7px; left: auto; }
  .timeline-item:nth-child(even)::before { left: -7px; }

  /* Bolinha do texto "ETAPA X": nas ímpares (conteúdo encostado na linha
     pela direita) ela vem depois do texto; nas pares (conteúdo encostado
     na linha pela esquerda) ela vem antes do texto — sempre do lado
     voltado para a linha central, alinhada com a bolinha principal. */
  .timeline-item:nth-child(odd) .timeline-content .eyebrow {
    justify-content: flex-end;
  }
  .timeline-item:nth-child(odd) .timeline-content .eyebrow::before { content: none; }
  .timeline-item:nth-child(odd) .timeline-content .eyebrow::after { content: ""; }

  .timeline-item:nth-child(even) .timeline-content .eyebrow {
    justify-content: flex-start;
  }
  .timeline-item:nth-child(even) .timeline-content .eyebrow::before { content: ""; }
  .timeline-item:nth-child(even) .timeline-content .eyebrow::after { content: none; }

  .section { padding: 110px 0; }
}

/* ============ Desktops (>= 1200px) ============ */
@media (min-width: 1200px) {
  .hero-title { font-size: 3.8rem; }
}

/* ============ Extra large screens (>= 1400px) ============ */
@media (min-width: 1400px) {
  .container { max-width: 1280px; }
}