/* ============================================================
   DUARTE DIGITAL - RESPONSIVE DESIGN
   Mobile-first com breakpoints progressivos
============================================================= */

/* ============================================================
   TABLETS (768px+)
============================================================= */
@media (max-width: 768px) {
  /* Navegação */
  .dd-nav-links {
    gap: var(--dd-space-md);
  }

  .dd-nav-links a {
    font-size: 13px;
  }

  /* Hero */
  .dd-hero {
    min-height: auto;
    padding: var(--dd-space-2xl) var(--dd-space-md);
  }

  .dd-hero-wrapper {
    grid-template-columns: 1fr;
    gap: var(--dd-space-2xl);
  }

  .dd-hero-visual {
    height: 300px;
  }

  .dd-hero-shape-1 {
    width: 200px;
    height: 200px;
  }

  .dd-hero-shape-2 {
    width: 150px;
    height: 150px;
  }

  .dd-hero-shape-3 {
    width: 100px;
    height: 100px;
  }

  /* FAQ grid */
  .dd-faq-grid {
    grid-template-columns: 1fr;
  }

  /* Sections padding */
  .dd-diferenciacao,
  .dd-planos,
  .dd-faq,
  .dd-cta-final,
  .dd-footer {
    padding: var(--dd-space-2xl) var(--dd-space-md);
  }

  /* Divider */
  .dd-divider {
    margin: var(--dd-space-2xl) 0;
  }

  /* Section header */
  .dd-section-header {
    margin-bottom: var(--dd-space-2xl);
  }
}

/* ============================================================
   MOBILE (480px and down)
============================================================= */
@media (max-width: 480px) {
  /* Tipografia responsiva já está em fluid sizing */
  
  /* Navegação */
  .dd-nav-wrapper {
    flex-direction: column;
    gap: var(--dd-space-md);
    padding: var(--dd-space-md);
  }

  .dd-nav-links {
    flex-direction: column;
    align-items: center;
    gap: var(--dd-space-md);
    width: 100%;
  }

  /* Hero */
  .dd-hero {
    padding: var(--dd-space-2xl) var(--dd-space-md);
  }

  .dd-hero-content h1 {
    margin-bottom: var(--dd-space-md);
  }

  .dd-hero-subtitle {
    font-size: var(--dd-text-base);
  }

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

  /* Buttons */
  .dd-cta {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Cards */
  .dd-grid-diferenciacao {
    gap: var(--dd-space-lg);
  }

  .dd-card-beneficio {
    padding: var(--dd-space-lg);
  }

  /* Plano card */
  .dd-plan-header {
    padding: var(--dd-space-md) var(--dd-space-lg);
  }

  .dd-plan-body {
    padding: var(--dd-space-lg);
  }

  .dd-plan-footer {
    padding: 0 var(--dd-space-lg) var(--dd-space-lg);
  }

  /* FAQ */
  .dd-faq-summary {
    padding: var(--dd-space-md);
  }

  .dd-faq-answer {
    padding: 0 var(--dd-space-md) var(--dd-space-md);
  }

  /* Footer */
  .dd-footer-content {
    grid-template-columns: 1fr;
    gap: var(--dd-space-lg);
  }

  /* Confiança box */
  .dd-confianca-box {
    padding: var(--dd-space-lg);
  }

  /* Plan medida */
  .dd-plan-medida {
    padding: var(--dd-space-lg);
  }

  /* CTA final */
  .dd-cta-final {
    padding: var(--dd-space-2xl) var(--dd-space-md);
  }

  .dd-cta-final p {
    font-size: var(--dd-text-base);
    margin-bottom: var(--dd-space-lg);
  }
}

/* ============================================================
   LARGE SCREENS (1200px+)
============================================================= */
@media (min-width: 1200px) {
  .dd-container {
    padding: 0 40px;
  }

  .dd-section-header {
    margin-bottom: var(--dd-space-4xl);
  }
}

/* ============================================================
   VERY LARGE SCREENS (1600px+)
============================================================= */
@media (min-width: 1600px) {
  :root {
    font-size: 18px;
  }
}

/* ============================================================
   PRINT
============================================================= */
@media print {
  body {
    background: white;
    color: black;
  }

  .dd-nav,
  .dd-footer,
  .dd-divider,
  .dd-cta-final {
    display: none;
  }

  a {
    color: inherit;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 80%;
  }
}

/* ============================================================
   HIGH CONTRAST MODE
============================================================= */
@media (prefers-contrast: more) {
  :root {
    --dd-text-muted: rgba(255, 255, 255, 0.85);
    --dd-border-light: rgba(255, 255, 255, 0.25);
    --dd-panel-bg: rgba(255, 255, 255, 0.08);
  }
}

/* ============================================================
   DARK MODE (nativo; já está escuro)
============================================================= */
@media (prefers-color-scheme: dark) {
  /* Já está em dark mode, sem mudanças necessárias */
}

/* ============================================================
   LIGHT MODE (se implementado no futuro)
============================================================= */
@media (prefers-color-scheme: light) {
  /* Placeholder para implementação futura */
}

/* ============================================================
   REDUCED MOTION (acessibilidade)
============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LANDSCAPE MODE
============================================================= */
@media (max-height: 600px) and (orientation: landscape) {
  .dd-hero {
    min-height: 100vh;
    padding: var(--dd-space-lg) var(--dd-space-md);
  }

  .dd-nav {
    padding: var(--dd-space-sm) 0;
  }
}