/* ═══════════════════════════════════════════════════════════
   LUMINA — Responsive (VL-0)
   Mobile-first breakpoints
   ═══════════════════════════════════════════════════════════ */

/* ─── Mobile (< 768px) ─── */
@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-3xl) var(--space-lg);
    --nav-height: 70px;
  }

  .nav { padding: 0 var(--space-lg); }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav .btn-primary { display: none; }

  .hero-video-wrap { width: 100%; opacity: 0.3; }
  .hero-gradient { background: linear-gradient(180deg, rgba(6,10,16,0.7) 0%, rgba(6,10,16,0.95) 60%, #060A10 100%); }
  .hero-steps-wrap { height: 350px; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary { width: 100%; justify-content: center; }

  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-value { font-size: 1.4rem; }

  .story-container { flex-direction: column; gap: 0; }
  .story-left { width: 100%; padding: 0; }
  .story-step-item { min-height: 50vh; }
  .story-right { width: 100%; position: relative; top: 0; height: auto; margin-bottom: var(--space-2xl); }

  .erp-showcase { flex-direction: column; gap: var(--space-2xl); }
  .erp-left { width: 100%; position: relative; top: 0; height: auto; }
  .erp-right { width: 100%; padding: 0; gap: var(--space-2xl); }
  .erp-feature-card { min-height: auto; }
  .erp-dash-img { transform: none; }

  .bento-grid { grid-template-columns: 1fr; }
  .bento-large { grid-column: span 1; }

  .operation-cards-grid { grid-template-columns: 1fr; }

  #magica { height: auto; min-height: 100vh; padding: var(--space-3xl) 0; }
  .demo-sticky { position: relative; top: 0; height: auto; }
  .demo-container { grid-template-columns: 1fr; gap: var(--space-2xl); padding: 0 var(--space-lg); }
  .iphone-mockup { max-width: 280px; height: 520px; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 450px; }

  .testimonials-track { padding: var(--space-md) var(--space-lg); }
  .testimonial-card { min-width: 300px; }

  .contact-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

  .modal-overlay { padding: 16px; }
  .modal-container { border-radius: var(--radius-lg); }
  .modal-header { padding: var(--space-lg); }
  .modal-body { padding: var(--space-lg); }

  .text-display { font-size: clamp(2rem, 8vw, 3rem); }

  /* Showcase mobile */
  .showcase-tabs { gap: 4px; }
  .showcase-tab { padding: 8px 12px; font-size: 0.75rem; }
  .showcase-tab-icon { font-size: 0.9rem; }
  .mock-sidebar { display: none; }
  .mock-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mock-chart-area { grid-template-columns: 1fr; }
  .mock-agenda-grid { grid-template-columns: repeat(3, 1fr); }
  .mock-agenda-col:nth-child(n+4) { display: none; }
  .mock-table-head, .mock-table-row { grid-template-columns: 0.6fr 1fr 0.8fr 0.6fr; }
  .mock-table-head span:nth-child(3), .mock-table-row span:nth-child(3) { display: none; }
  .mock-crm-layout { grid-template-columns: 1fr; }
  .mock-prontuario-layout { grid-template-columns: 1fr; }

  /* Personas mobile */
  .persona-grid { grid-template-columns: 1fr; max-width: 450px; }
}

/* ─── Tablet (769px – 1024px) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-hamburger { display: none; }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .operation-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-large { grid-column: span 2; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .demo-container { gap: 40px; }
  .persona-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 0 auto; }
  .persona-card:last-child { grid-column: 1 / -1; max-width: 340px; margin: 0 auto; }
}

/* ─── Desktop (> 1024px) ─── */
@media (min-width: 1025px) {
  .nav-hamburger { display: none; }
}

/* ─── Reduced Motion (Accessibility) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; }
  #cursor-glow { display: none; }
  #intro-screen { display: none; }
  body::after { animation: none; }
}