/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

/* ---- Tablet (max-width: 1068px) ---- */
@media (max-width: 1068px) {

  /* Comparison grid: stack */
  .bi-comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Capabilities showcase: 2 cols */
  .bi-capabilities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pricing phases: stack */
  .bi-pricing-phases {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* About section: stack */
  #nosotros .bi-feature-row {
    grid-template-columns: 1fr !important;
  }

  /* About stats: 3-col row */
  #nosotros .bi-feature-row > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  #nosotros .bi-feature-row > div:last-child > div {
    padding: 20px !important;
  }
}

/* ---- Mobile (max-width: 734px) ---- */
@media (max-width: 734px) {

  /* === HERO === */
  .bi-hero {
    padding: 80px 16px 48px !important;
    min-height: auto !important;
  }

  .bi-hero-sub {
    font-size: 16px;
    max-width: 100%;
  }

  .bi-btn-large {
    font-size: 16px !important;
    padding: 16px 28px !important;
    width: 100%;
    max-width: 360px;
  }

  /* === CAPABILITIES BAR === */
  .bi-logos {
    padding: 40px 16px;
  }

  .bi-logos-grid {
    gap: 16px 24px !important;
  }

  .bi-logo-item {
    font-size: 13px !important;
  }

  .bi-logo-item .bi {
    font-size: 16px !important;
  }

  /* === COMPARISON GRID === */
  .bi-comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }

  .bi-comparison-grid > div {
    padding: 24px !important;
  }

  /* === CAPABILITIES SHOWCASE === */
  .bi-capabilities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .bi-capabilities-grid > div {
    padding: 16px !important;
  }

  .bi-capabilities-grid > div > div:first-child {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }

  /* === FEATURE ROWS / TECH SHOWCASE === */
  .bi-feature-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 !important;
  }

  .bi-feature-visual {
    aspect-ratio: 16/10 !important;
    min-height: 220px;
  }

  .bi-feature-content h3 {
    font-size: clamp(22px, 5vw, 28px) !important;
  }

  /* Mock UI sizes */
  .mock-stat {
    padding: 12px !important;
  }

  .mock-stat-number {
    font-size: clamp(24px, 7vw, 36px) !important;
  }

  /* Module grid inside mockups */
  .bi-feature-visual-dark [style*="grid-template-columns: 1fr 1fr"] > div {
    padding: 12px !important;
  }

  .bi-feature-visual-dark [style*="font-size:22px"] {
    font-size: 16px !important;
  }

  /* === STATS SECTION === */
  .bi-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding: 24px 0 !important;
  }

  .bi-stat-number {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .bi-stat-label {
    font-size: 13px !important;
  }

  /* === PROCESS STEPS: 2 col on mobile === */
  .bi-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .bi-step::before {
    font-size: 36px !important;
    margin-bottom: 12px !important;
  }

  /* === TESTIMONIALS === */
  .bi-testimonial {
    padding: 24px !important;
  }

  .bi-testimonial blockquote {
    font-size: 14px !important;
  }

  /* === PRICING === */
  .bi-price-card .price {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  /* Pricing phases note */
  .bi-pricing-phases {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }

  /* === ABOUT / NOSOTROS === */
  #nosotros .bi-feature-row {
    grid-template-columns: 1fr !important;
  }

  #nosotros .bi-feature-row > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #nosotros .bi-feature-row > div:last-child > div {
    padding: 20px !important;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  #nosotros .bi-feature-row > div:last-child > div > div:first-child {
    font-size: 28px !important;
    white-space: nowrap;
  }

  #nosotros .bi-feature-row > div:last-child > div > div:last-child {
    margin-top: 0 !important;
  }

  #nosotros .bi-feature-content p {
    font-size: 15px !important;
  }

  /* === CTA SECTION === */
  .bi-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bi-cta h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .bi-cta > .bi-section-inner > div:last-child {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* === TOUCH TARGETS (44px min per WCAG) === */
  .bi-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* === SECTION SPACING === */
  .bi-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* === PREVENT HORIZONTAL OVERFLOW === */
  body {
    overflow-x: hidden;
  }

  .bi-section-inner {
    overflow-x: hidden;
  }
}

/* ---- Small phones (max-width: 374px) ---- */
@media (max-width: 374px) {
  .bi-hero h1 {
    font-size: 28px !important;
  }

  .bi-section-header h2 {
    font-size: 24px !important;
  }

  .bi-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .bi-steps {
    grid-template-columns: 1fr !important;
  }

  .bi-capabilities-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}