/* ==============================================
   TECHCORE — RESPONSIVE STYLES
   Mobile-first breakpoints via Bootstrap 5
   xs < 576 | sm 576 | md 768 | lg 992 | xl 1200 | xxl 1400
   ============================================== */

/* ── ULTRAWIDE (≥ 1600px) ───────────────────── */
@media (min-width: 1600px) {
  .container-xl {
    max-width: 1400px;
  }

  .tc-hero-title {
    font-size: 3.25rem;
  }
}

/* ── LARGE (≥ 1200px) ───────────────────────── */
@media (min-width: 1200px) {
  .tc-hero {
    min-height: 82vh;
    display: flex;
    align-items: center;
  }

  .tc-hero > .container-xl {
    width: 100%;
  }
}

/* ── TABLET LANDSCAPE / MEDIUM DESKTOP (< 1199px) */
@media (max-width: 1199px) {
  .tc-service-card {
    flex: 0 0 260px;
  }
}

/* ── TABLET (< 992px) ───────────────────────── */
@media (max-width: 991px) {
  /* Navbar */
  .tc-navbar .navbar-collapse {
    background: rgba(244,245,247,.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--gray-200);
    margin-top: 12px;
    padding: 16px 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .tc-navbar .gap-1 {
    gap: 0 !important;
  }

  .tc-nav-link {
    display: block;
    padding: 10px 16px !important;
    border-radius: var(--radius-sm);
  }

  .tc-nav-link::after { display: none; }

  .tc-btn-nav {
    margin: 8px 16px 0;
    display: inline-flex;
  }

  /* Hero */
  .tc-hero-content {
    text-align: center;
    margin-bottom: 32px;
    padding: clamp(24px, 5vw, 36px);
  }

  .tc-hero-content::before,
  .tc-hero-visual::before {
    inset: 0;
  }

  .tc-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .tc-hero-actions {
    justify-content: center;
  }

  .tc-hero-stats {
    justify-content: center;
  }

  .tc-hero-visual {
    justify-content: center;
    min-height: 360px;
    padding: 24px;
  }

  .tc-float-1,
  .tc-float-2 {
    display: none;
  }

  /* About */
  .tc-about .col-lg-5 {
    text-align: center;
  }

  .tc-values-grid {
    align-items: flex-start;
    text-align: left;
  }

  /* Timeline horizontal on tablet/mobile */
  .tc-timeline {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 0;
    padding-top: 32px;
    margin-top: 24px;
    border-left: none;
    border-top: 2px solid var(--dark);
    gap: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .tc-timeline::-webkit-scrollbar { height: 6px; }
  .tc-timeline::-webkit-scrollbar-track { background: var(--gray-200); border-radius: 999px; }
  .tc-timeline::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }

  .tc-timeline-item {
    flex: 0 0 230px;
    padding: 0;
    scroll-snap-align: start;
    position: relative;
  }

  .tc-timeline-item:last-child { padding-bottom: 0; }

  .tc-timeline-item::before {
    left: 0;
    top: -40px;
  }

  /* Process */
  .tc-process-steps {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .tc-process-arrow {
    transform: rotate(90deg);
    margin: 0;
  }

  .tc-process-step {
    min-width: auto;
    width: 100%;
    max-width: 300px;
  }

  /* CTA Band */
  .tc-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Diferenciais */
  .tc-dif-inner {
    text-align: center;
  }

  /* Service wide */
  .tc-service-wide {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── MOBILE LARGE (< 768px) ─────────────────── */
@media (max-width: 767px) {
  /* Hero */
  .tc-hero {
    padding: 40px 0 60px;
  }

  .tc-hero-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .tc-section-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  /* Stats */
  .tc-hero-stats {
    gap: 16px;
  }

  .tc-stat-num {
    font-size: var(--text-2xl);
  }

  /* Form */
  .tc-form {
    padding: 24px 18px;
  }

  /* Footer */
  .tc-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* CTA Band */
  .tc-cta-band h2 {
    font-size: var(--text-3xl);
  }

  /* Services scroll on mobile */
  .tc-service-card {
    flex: 0 0 78%;
  }

  .tc-service-wide {
    flex: 0 0 78%;
  }
}

/* ── MOBILE SMALL (< 576px) ─────────────────── */
@media (max-width: 575px) {
  :root {
    --section-py: 48px;
  }

  .tc-hero-title {
    font-size: clamp(1.875rem, 10vw, 2.5rem);
  }

  .tc-hero-stats {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .tc-stat-divider {
    display: none;
  }

  .tc-hero-actions {
    flex-direction: column;
    width: 100%;
  }

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

  .tc-hero-card-main {
    padding: 16px;
  }

  .tc-dif-card {
    padding: 20px 18px;
  }

  .tc-timeline-item {
    flex: 0 0 200px;
  }

  .tc-back-top {
    bottom: 16px;
    right: 16px;
  }

  .tc-toast {
    right: 16px;
    bottom: 72px;
    left: 16px;
    max-width: none;
  }

  .tc-process-steps {
    align-items: stretch;
  }

  .tc-process-step {
    max-width: none;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    gap: 16px;
  }

  .tc-process-body {
    align-items: flex-start;
  }

  .tc-process-arrow {
    display: none;
  }

  /* FAQ */
  .tc-faq-q {
    font-size: var(--text-sm);
  }

  /* Contact info items */
  .tc-contact-info-item {
    font-size: var(--text-xs);
  }
}

/* ── FOLD (< 360px) ─────────────────────────── */
@media (max-width: 360px) {
  .tc-hero-title {
    font-size: 1.75rem;
  }

  .tc-section-title {
    font-size: 1.6rem;
  }

  .tc-brand {
    font-size: var(--text-sm);
  }
}

/* ── LANDSCAPE MOBILE ───────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .tc-hero {
    min-height: auto;
    padding: 32px 0 48px;
  }

  .tc-hero-visual {
    display: none;
  }
}

/* ── HIGH DENSITY DISPLAYS ──────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tc-metric-bar { height: 5px; }
}

/* ── PRINT ──────────────────────────────────── */
@media print {
  .tc-navbar,
  .tc-back-top,
  .tc-toast,
  .tc-hero-visual,
  .tc-float-badge {
    display: none !important;
  }

  .tc-hero {
    min-height: auto;
    padding: 24px 0;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}