/* =============================================
   RESPONSIVE-MOBILE.CSS
   Complemento de responsividade para
   grids complexos das páginas de produto
============================================= */

/* =============================================
   GRIDS DAS TRILHAS — WORKSHOPS
============================================= */
@media (max-width: 1200px) {
  .trilha-header {
    grid-template-columns: auto 1fr !important;
    gap: 16px !important;
  }
  .trilha-header > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {

  /* Grids de 2 colunas → 1 coluna */
  .grid-hero-sobre,
  .grid-metodo,
  .grid-squad,
  .grid-aplicacao,
  .grid-nr1-destaque,
  .grid-competencias,
  .grid-paises,
  .grid-diferenca,
  .grid-timeline,
  .grid-pilares,
  .grid-planos,
  .grid-eixos {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Grid de empresas → 3 colunas */
  .grid-empresas {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Grid de formato workshops → 2 colunas */
  .grid-como,
  .grid-formato {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Badge hero sobre — remover posição absoluta */
  .hero-badge,
  .sobre-citacao {
    position: static !important;
    margin-top: 16px !important;
    max-width: 100% !important;
  }

  /* Trilha header — simplificar */
  .trilha-header {
    grid-template-columns: auto 1fr !important;
    padding: 28px 28px !important;
  }

  /* Trilha body */
  .trilha-bloco > div {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Grid competências → 2 colunas */
  .grid-competencias > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grid países → 4 colunas mantidas */
  .grid-paises {
    grid-template-columns: 1fr !important;
  }
  .grid-paises > div:last-child {
    grid-template-columns: repeat(4, 1fr) !important;
  }

}

@media (max-width: 768px) {

  /* ---- Geral ---- */
  .secao { padding: 56px 0 !important; }

  .container,
  .container-estreito {
    padding: 0 20px !important;
  }

  /* ---- Hero das páginas internas ---- */
  section[style*="min-height: 70vh"] {
    min-height: auto !important;
    padding: 100px 0 60px !important;
  }

  /* ---- Números hero workshops ---- */
  .hero-numeros {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ---- Grid 3 colunas → 1 coluna ---- */
  .grid-como,
  .grid-formato,
  .grid-planos,
  .produtos-grid,
  .depoimentos-grid,
  .dores-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Grid 2 colunas → 1 coluna ---- */
  .grid-pilares,
  .grid-eixos,
  .grid-timeline,
  .grid-empresas,
  .grid-form-2col {
    grid-template-columns: 1fr !important;
  }

  /* ---- Grid países → 2 colunas ---- */
  .grid-paises > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Grid competências → 1 coluna ---- */
  .grid-competencias > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* ---- Comparativo SQUAD ---- */
  .grid-diferenca {
    grid-template-columns: 1fr !important;
  }
  .grid-diferenca > div:last-child > div {
    grid-template-columns: 1fr !important;
  }
  .grid-diferenca > div:last-child > div > div:first-child {
    display: none !important;
  }

  /* ---- Trilhas ---- */
  .trilha-header {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 12px !important;
  }
  .trilha-bloco > div {
    padding: 20px !important;
  }

  /* ---- Cards de plano ---- */
  .plano-card {
    padding: 32px 24px !important;
  }

  /* ---- Hero Stats ---- */
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---- CTA botões ---- */
  .cta-botoes,
  .hero-acoes {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-botoes a,
  .hero-acoes a {
    text-align: center !important;
    width: 100% !important;
  }

  /* ---- Botões globais ---- */
  .btn-primario,
  .btn-secundario {
    padding: 14px 24px !important;
    font-size: 0.92rem !important;
  }

  /* ---- Tipografia mobile ---- */
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }

  /* ---- Seção NR-1 card ---- */
  .nr1-card {
    padding: 28px !important;
  }
  .nr1-card-numero {
    font-size: 2.8rem !important;
  }

  /* ---- Footer ---- */
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  /* ---- WhatsApp float ---- */
  .whatsapp-float {
    bottom: 20px !important;
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
  }

  /* ---- FAQ ---- */
  .faq-item button {
    padding: 18px 20px !important;
    font-size: 0.88rem !important;
  }
  .faq-resposta {
    padding: 0 20px !important;
  }

  /* ---- Formulário contato ---- */
  .campo-input {
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
  }

  /* ---- Depoimentos ---- */
  .depoimento-card {
    padding: 24px !important;
  }
  .aspas {
    font-size: 2.2rem !important;
  }

  /* ---- Seção clientes logos ---- */
  .clientes-logos {
    gap: 20px 28px !important;
  }

}

@media (max-width: 480px) {

  /* ---- Hero stats → 1 coluna ---- */
  .hero-stats {
    grid-template-columns: 1fr !important;
  }

  /* ---- Stat cards ---- */
  .stat-card {
    padding: 18px !important;
  }
  .stat-numero {
    font-size: 1.8rem !important;
  }

  /* ---- Produto cards ---- */
  .produto-card {
    padding: 28px 20px !important;
  }

  /* ---- Grid países → 2 colunas ---- */
  .grid-paises > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Grids diferenciais SQUAD ---- */
  .diferenciais-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- NR-1 pontos ---- */
  .nr1-lista li {
    font-size: 0.88rem !important;
  }

  /* ---- Header logo ---- */
  .logo-texto {
    font-size: 1.2rem !important;
  }

}

/* =============================================
   PRINT STYLES (para propostas impressas)
============================================= */
@media print {
  .whatsapp-float,
  #site-header,
  .menu-toggle,
  .hero-acoes,
  .cta-botoes,
  #cta-final,
  footer {
    display: none !important;
  }

  body {
    background: white !important;
    color: #111 !important;
  }

  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  h1, h2, h3, h4 {
    color: #111 !important;
  }

  .destaque-dourado {
    color: #C9A84C !important;
  }
}