/* Interfase - ajustes responsivos preservando a estrutura desktop validada */
html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* Corrige quebras inesperadas em textos longos */
h1, h2, h3, p, a, span, div { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  /* HOME */
  #topo .relative.min-h-\[78vh\] { min-height: auto; }
  #topo .py-20 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  #topo #hero-title { max-width: 100%; }
  #topo .grid.grid-cols-1.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #engenharia img { height: 420px !important; }
}

@media (max-width: 768px) {
  /* Cabeçalho compacto: logo + bandeiras + menu */
  header#main-header .h-20 { height: 64px; }
  header#main-header img[alt*="Logo"] { height: 42px !important; }
  header#main-header .max-w-7xl { padding-left: 14px; padding-right: 14px; }
  .lang-btn { width: 34px; height: 34px; min-width: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
  .lang-flag { font-size: 18px; line-height: 1; }
  #mobile-menu { max-height: calc(100vh - 64px); overflow-y: auto; box-shadow: 0 18px 35px rgba(15,23,42,.10); }
  #mobile-menu .space-y-4 > * + * { margin-top: .85rem; }
  #mobile-menu a { min-height: 42px; display: flex; align-items: center; }

  /* HOME HERO */
  #topo { padding-top: 64px !important; }
  #topo .relative.min-h-\[78vh\] { min-height: auto; }
  #topo .py-20 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
  #topo #hero-title { font-size: clamp(42px, 13vw, 56px) !important; line-height: .98 !important; margin-bottom: 18px; }
  #topo #hero-subtitle { font-size: 1rem !important; line-height: 1.62 !important; max-width: 100%; }
  #topo .inline-flex.rounded-full { font-size: 11px; padding: 8px 12px; letter-spacing: .08em; }
  #topo .flex.flex-col.sm\:flex-row { gap: 12px; }
  #topo .flex.flex-col.sm\:flex-row a { width: 100%; padding-top: 14px; padding-bottom: 14px; }
  #topo .grid.grid-cols-1.sm\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 10px; }
  #topo .rounded-2xl.border { padding: 14px 16px; }

  /* Barra de confiança: evita aperto e mantém legibilidade */
  .logo-item { min-height: 56px; }
  section.bg-white.border-b .grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* Seções gerais */
  section.py-20 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section.py-14 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .section-divider { margin-bottom: 18px; }
  h2.text-3xl, h2.text-4xl, h2.text-5xl { font-size: 2rem !important; line-height: 1.12 !important; }
  p.text-lg, p.text-xl, p.text-2xl { font-size: 1rem !important; line-height: 1.6 !important; }

  /* Produtos: no mobile, uma coluna para leitura e toque */
  #produtos .grid, section#produtos .grid { grid-template-columns: 1fr !important; }
  article.rounded-\[1\.6rem\] { border-radius: 1.25rem !important; }
  .product-top { height: 180px !important; }
  article .p-7 { padding: 22px !important; }

  /* CTA intermediário */
  .rounded-\[2rem\] .grid.lg\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr !important; text-align: left; }
  .rounded-\[2rem\] .grid.lg\:grid-cols-\[1fr_auto\] a { width: 100%; }

  /* Diferenciais 2-2 no desktop; mobile empilhado */
  #diferenciais .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 18px !important; }
  #diferenciais .card-premium { padding: 24px !important; border-radius: 1.25rem !important; }
  #diferenciais h3 { font-size: 1.25rem !important; line-height: 1.2; }

  /* Engenharia */
  #engenharia .grid.lg\:grid-cols-\[0\.95fr_1\.05fr\] { grid-template-columns: 1fr !important; }
  #engenharia img { height: 300px !important; }
  #engenharia .absolute.right-0.bottom-0 { position: relative !important; right: auto !important; bottom: auto !important; margin-top: 14px; max-width: 100%; }
  #engenharia .rounded-\[1\.75rem\].bg-amber-500 { padding: 22px !important; }
  #engenharia .text-3xl { font-size: 1.55rem !important; }
  #engenharia .text-lg { font-size: 1rem !important; }

  /* Footer */
  footer .grid.md\:grid-cols-4 { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* PÁGINAS INDIVIDUAIS */
  body > div[style*="margin-top:80px"] { margin-top: 64px !important; }
  .hero-dark .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 30px !important; }
  .hero-dark .py-16, .hero-dark .lg\:py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .hero-dark h1 { font-size: clamp(36px, 11vw, 48px) !important; line-height: 1.05 !important; }
  .hero-dark p { max-width: 100% !important; }
  .hero-dark .btn-amber, .hero-dark .btn-outline { width: 100%; justify-content: center; }
  .hero-dark .rounded-2xl[style*="min-height:340px"] { min-height: 220px !important; }
  .hero-dark .absolute.bottom-5.right-5 { right: 14px !important; bottom: 14px !important; }

  .proof-strip .grid { grid-template-columns: 1fr 1fr !important; }
  .proof-strip .divide-x > * { border-left: 0 !important; }
  .proof-strip .px-6 { padding-left: 14px !important; padding-right: 14px !important; }
  .proof-strip .py-5 { padding-top: 14px !important; padding-bottom: 14px !important; }

  .technical-grid .grid.lg\:grid-cols-2,
  section .grid.lg\:grid-cols-2,
  section .grid.lg\:grid-cols-\[1\.4fr_1fr\] { grid-template-columns: 1fr !important; gap: 28px !important; }
  .serve-card { padding: 18px !important; border-radius: 14px !important; }
  .sobmedida-card { padding: 22px !important; border-radius: 16px !important; }
  .app-card { padding: 18px 12px !important; }
  section .grid.grid-cols-2.sm\:grid-cols-4.lg\:grid-cols-7 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  .spec-row { grid-template-columns: 1fr !important; gap: 4px; }
  .spec-row span:last-child { font-size: .92rem; }

  #orcamento .rounded-3xl { padding: 24px !important; border-radius: 1.35rem !important; }
  #orcamento .flex.flex-col.lg\:flex-row { align-items: stretch !important; }
  #orcamento .btn-amber, #orcamento a[href*="wa.me"] { width: 100%; }

  /* Painel escuro lateral (sidebar de informações do formulário) */
  #orcamento .bg-slate-900.text-white { padding: 28px 22px !important; }
  /* Painel direito (área do formulário) */
  #orcamento .p-8,
  #orcamento .p-8.sm\:p-10.lg\:p-12 { padding: 24px 18px !important; }
  /* Campos Nome + Empresa lado a lado: força coluna única em mobile */
  #orcamento .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 16px !important; }
  /* Step indicators: reduz tamanho de fonte */
  #orcamento #step-label-1,
  #orcamento #step-label-2 { font-size: 0.8rem !important; }
  /* Mensagens de sucesso/erro: padding menor e botão de largura completa no mobile */
  #form-success { padding: 24px 16px !important; }
  #form-success a { width: 100%; justify-content: center; }
  #form-error { padding: 16px !important; }
  #form-error button { width: 100%; justify-content: center; }
  .related-card-media { height: 160px !important; padding: 12px !important; }
  .related-card-body { padding: 16px !important; gap: 10px !important; }
  .related-card-arrow { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
  .grid.sm\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  header#main-header .h-20 { height: 60px; }
  header#main-header img[alt*="Logo"] { height: 36px !important; }
  .lang-btn { width: 30px; height: 30px; min-width: 30px; }
  .lang-flag { font-size: 16px; }
  #mobile-menu-btn { padding: 6px !important; }
  #topo { padding-top: 60px !important; }
  body > div[style*="margin-top:80px"] { margin-top: 60px !important; }
  #topo #hero-title { font-size: clamp(38px, 14vw, 48px) !important; }
  #topo .py-20 { padding-top: 2.6rem !important; padding-bottom: 2.8rem !important; }
  section.bg-white.border-b .grid { grid-template-columns: 1fr !important; }
  .proof-strip .grid { grid-template-columns: 1fr !important; }
  section .grid.grid-cols-2.sm\:grid-cols-4.lg\:grid-cols-7 { grid-template-columns: 1fr !important; }
  h2.text-3xl, h2.text-4xl, h2.text-5xl { font-size: 1.75rem !important; }
  .hero-dark h1 { font-size: 34px !important; }

  /* Formulário de orçamento em telas muito pequenas */
  #orcamento .bg-slate-900.text-white { padding: 22px 16px !important; }
  #orcamento .p-8,
  #orcamento .p-8.sm\:p-10.lg\:p-12 { padding: 20px 14px !important; }
  #orcamento .space-y-5 > * { width: 100% !important; }
}

/* ===== 390–430px: iPhone 14/15 Pro / Pro Max ===== */
@media (max-width: 430px) {
  /* Formulário: botões de navegação (Voltar + Enviar) em coluna para não apertar */
  #orcamento .flex.gap-3:has(#submit-btn) { flex-direction: column !important; gap: 10px !important; }
  #orcamento #submit-btn { width: 100% !important; }

  /* Inputs com fonte legível sem zoom automático do iOS */
  #orcamento input,
  #orcamento select,
  #orcamento textarea { font-size: 16px !important; }

  /* Step indicators: sem texto de label se apertar demais */
  #orcamento #step-label-1,
  #orcamento #step-label-2 { display: none !important; }

  /* Mensagem de sucesso: padding menor */
  #form-success { padding: 24px 16px !important; }
  #form-success h3 { font-size: 1.1rem !important; }
  #form-success a { width: 100%; justify-content: center; }

  /* Mensagem de erro: layout mais compacto */
  #form-error { padding: 16px !important; }

  /* Páginas individuais — hero em telas estreitas */
  .hero-dark h1 { font-size: clamp(28px, 9vw, 36px) !important; line-height: 1.1 !important; }
  .hero-dark .py-16 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
  .hero-dark .flex.gap-3,
  .hero-dark .flex.gap-4 { flex-direction: column !important; gap: 10px !important; }
  .hero-dark .btn-amber,
  .hero-dark .btn-outline { width: 100% !important; text-align: center; justify-content: center; }

  /* Tabelas de specs: legibilidade */
  .spec-row { font-size: 0.82rem !important; }
  .spec-row span:last-child { font-size: 0.82rem !important; }

  /* Seção de clientes / logo strip */
  .logo-item { min-height: 48px !important; }

  /* Footer compacto */
  footer .text-sm { font-size: 0.78rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS DE PRODUTO — CORREÇÕES MOBILE (sem impacto no desktop)
   Todas as regras estão em media queries max-width
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Hero: oculta imagem do produto no mobile
        Wildcard [class*="hero-visual"] cobre todos os prefixos:
        auto-, bobina-, cmd-, product- (cada página usa o seu).
        Desktop não é afetado: fora de @media max-width:768px. */
  .hero-dark [class*="hero-visual"] {
    display: none !important;
  }

  /* 2. App cards: labels longos — limita a 2 linhas e unifica altura */
  .app-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .app-card p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 3. "Para que serve" — divisor visual entre texto e feature cards
        .flex.flex-col.gap-4 que contém .serve-card é a coluna direita
        que, no mobile, aparece abaixo do bloco de texto. */
  .flex.flex-col.gap-4:has(.serve-card) {
    border-top: 1.5px solid #e2e8f0;
    padding-top: 1.25rem !important;
    margin-top: 0.25rem !important;
  }

  /* 4. Produtos relacionados — scroll horizontal em vez de empilhados
        Transforma o grid 3-col em carrossel touch-friendly. */
  .grid.sm\:grid-cols-3:has(.related-card) {
    display: flex !important;
    overflow-x: auto !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    /* oculta scrollbar mas mantém scroll funcional */
    scrollbar-width: none !important;
  }
  .grid.sm\:grid-cols-3:has(.related-card)::-webkit-scrollbar {
    display: none !important;
  }
  .grid.sm\:grid-cols-3:has(.related-card) .related-card {
    min-width: 72vw !important;
    max-width: 72vw !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  /* 5. Prova técnica (proof strip): tipografia compacta nas células 2-col */
  .proof-strip .text-sm {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
  }

  /* 6. Seção "Especificações": card sobmedida mais compacto no mobile */
  .sobmedida-card .grid.grid-cols-1 {
    gap: 2px !important;
  }
  .sobmedida-item {
    padding: 6px 0 !important;
  }
}

@media (max-width: 430px) {
  /* App cards: 1 coluna em telas muito estreitas para labels extra-longos */
  section .grid.grid-cols-2.sm\:grid-cols-4.lg\:grid-cols-7 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .app-card p {
    font-size: 0.65rem !important;
  }

  /* Produtos relacionados: card mais largo em 430px */
  .grid.sm\:grid-cols-3:has(.related-card) .related-card {
    min-width: 82vw !important;
    max-width: 82vw !important;
  }
}