/* ========== Responsivo: navegação, grelhas, chat ========== */

/* Tablets e portáteis pequenos */
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audience .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-it-works .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media (max-width: 640px){
  /* NAV móvel */
  .burger{display:block}
  .nav-bar{position:relative}
  .nav-links{
    display:none;position:absolute;top:60px;right:20px;
    background:var(--surface);border:var(--border);
    border-radius:14px;padding:10px;flex-direction:column;gap:8px;
    box-shadow:var(--shadow);z-index:1000
  }
  .nav-links.is-open{display:flex}

  .container{padding:0 16px}
  .hero{padding:28px 0}

  /* Grelhas */
  .cards{grid-template-columns:1fr}
  .audience .audience-grid{grid-template-columns:1fr}
  .how-it-works .steps{grid-template-columns:1fr}

  /* CORREÇÃO RADICAL PARA OS PRIMEIROS 4 MÓDULOS */
  /* Como Funciona - 4 colunas */
  .container #como-funciona > div[style*="grid-template-columns: repeat(4, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Vantagens - 4 colunas */
  .features .cards[style*="grid-template-columns: repeat(4, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Modelo Custos - 4 colunas */
  .container #modelo-custos > div[style*="grid-template-columns: repeat(4, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Módulos Incluídos - auto-fit */
  .container > div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"]:not(.nav-bar):not(.footer-content) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Sectores - auto-fit */
  #setores .container > div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* Garantir que os cards ocupem 100% */
  .card {
    width: 100% !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Chat: quase full-width e mais alto */
  .chat-panel{
    right:10px;left:10px;bottom:86px;width:auto;max-width:none;
    max-height:90vh;
  }
  .chat-launcher{
    width:64px;height:64px;border-radius:16px;font-size:22px;
  }
  .chat-launcher::after{
    right:72px;bottom:8px;font-size:12px;padding:6px 8px;
  }
}

/* Desktop largo: 60% da largura para o chat */
@media (min-width: 1024px){
  .chat-panel{
    width:60vw;max-width:none;right:18px;left:auto;
    max-height:min(90vh,900px);
  }
}

/* === MÓDULOS — responsivo ======================================= */
@media (max-width: 1024px){
  :root{ --module-y: 48px; --module-gap: 28px; }
}
@media (max-width: 768px){
  :root{ --module-y: 40px; --module-gap: 24px; }
}
@media (max-width: 480px){
  :root{ --module-y: 36px; --module-gap: 20px; }
}

/* ========== CORREÇÕES ADICIONAIS ========== */

/* Tablets (920px ou menos) */
@media (max-width: 920px) and (min-width: 641px) {
  .container #como-funciona > div[style*="grid-template-columns: repeat(4, 1fr)"],
  .features .cards[style*="grid-template-columns: repeat(4, 1fr)"],
  .container #modelo-custos > div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Ajustes de texto para mobile */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero p {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
  }
  
  section.container {
    margin-bottom: 2rem !important;
  }
}

/* Mobile muito pequeno (480px ou menos) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem !important;
  }
  
  .hero p {
    font-size: 1rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .card {
    padding: 1rem !important;
  }
}