/* ============================================
   OTIMIZAÇÕES ESPECÍFICAS PARA ANDROID E iOS
   ============================================ */

/* ============================================
   REMOVER LINHAS DECORATIVAS QUE SOBREPÕEM
   ============================================ */

@media (max-width: 768px) {
  /* Remover TODAS as linhas decorativas neon que sobrepõem */
  section::before,
  section::after,
  body::before,
  body::after,
  header::before,
  header::after,
  footer::before,
  footer::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  /* Remover divisórias decorativas ou reduzir opacidade */
  .divider {
    margin: 0.75rem 0 !important;
    opacity: 0.3 !important;
    height: 1px !important;
  }
  
  /* Remover pseudo-elementos que podem causar sobreposição */
  .glass::before,
  .glass::after,
  .keyline::before,
  .keyline::after {
    display: none !important;
  }
}

/* ============================================
   AJUSTES GERAIS PARA MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Prevenir overflow horizontal */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }
  
  /* Container principal */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Reduzir espaçamentos verticais */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-24,
  .py-28,
  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Grids em 1 coluna */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Cards de Cases */
  .case-card {
    min-height: auto !important;
    max-height: none !important;
    padding: 1rem !important;
  }
  
  /* Imagens menores */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Títulos menores */
  .font-display {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h1, h2, h3 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
}

/* ============================================
   ESPECÍFICO PARA iOS
   ============================================ */

@supports (-webkit-touch-callout: none) {
  /* Correções específicas iOS */
  @media (max-width: 768px) {
    /* Prevenir zoom em inputs */
    input,
    textarea,
    select {
      font-size: 16px !important;
    }
    
    /* Scroll suave */
    body {
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Viewport fix */
    #hero {
      height: 100vh !important;
      min-height: -webkit-fill-available !important;
    }
    
    /* Cards de marcas - tamanho mínimo para touch */
    .lazy-card {
      min-height: 44px !important;
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Remover linhas decorativas */
    section::before,
    body::before,
    body::after {
      display: none !important;
    }
  }
}

/* ============================================
   ESPECÍFICO PARA ANDROID
   ============================================ */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @media (max-width: 768px) {
    /* Scroll suave Android */
    body {
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Remover linhas decorativas */
    section::before,
    body::before,
    body::after {
      display: none !important;
    }
    
    /* Touch targets maiores */
    button,
    a {
      min-height: 44px !important;
      min-width: 44px !important;
    }
  }
}

/* ============================================
   TELAS MUITO PEQUENAS (até 480px)
   ============================================ */

@media (max-width: 480px) {
  /* Espaçamentos ainda menores */
  section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Títulos ainda menores */
  .font-display {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  /* Cards compactos */
  .case-card {
    padding: 0.75rem !important;
    min-height: auto !important;
  }
  
  /* Grids com menos gap */
  .grid {
    gap: 0.75rem !important;
  }
  
  /* Imagens de galeria menores */
  .case-card .card-image-container {
    height: 200px !important;
  }
  
  /* Remover todos os elementos decorativos */
  section::before,
  body::before,
  body::after,
  header::after,
  footer::before {
    display: none !important;
  }
}

/* ============================================
   SEÇÃO DE CONTATO - MOBILE
   ============================================ */

@media (max-width: 768px) {
  #contato {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  #contato .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Layout 1 coluna para foto e formulário */
  #contato .lg\\:grid-cols-3,
  #contato .grid[class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
  }
  
  #contato img {
    height: 300px !important;
    max-height: 300px !important;
    width: 100% !important;
  }
  
  #contato form {
    padding: 1rem !important;
    margin-top: 0 !important;
  }
  
  #contato input,
  #contato textarea {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  
  /* Reduzir espaçamento */
  #contato .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
  
  /* Alinhamento do header do formulário */
  #contato header {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }
  
  #contato h2 {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================
   CORREÇÕES DO FORMULÁRIO DE CONTATO
   ============================================ */

/* Garantir que o formulário e seus inputs funcionem */
#contactForm,
#contato form {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Garantir que inputs e textareas sejam clicáveis */
#contactForm input,
#contactForm textarea,
#contactForm button,
#contactForm select,
#contato input,
#contato textarea,
#contato button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

#contactForm button[type="submit"],
#contato button[type="submit"] {
  cursor: pointer !important;
}

/* Garantir que labels não bloqueiem */
#contactForm label,
#contato label {
  pointer-events: none !important;
  cursor: default !important;
}

/* Remover qualquer bloqueio de pointer-events do formulário */
#contactForm *,
#contato form * {
  pointer-events: auto !important;
}

#contactForm label,
#contato form label {
  pointer-events: none !important;
}

/* ============================================
   SEÇÃO ROMA - MOBILE
   ============================================ */

@media (max-width: 768px) {
  #case-roma {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  #case-roma .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Logo menor em mobile */
  #case-roma img[alt*="Logo"] {
    height: 200px !important;
    max-height: 200px !important;
  }
  
  /* Galeria de imagens em 1 coluna */
  #case-roma .grid.grid-cols-1.md\\:grid-cols-3,
  #case-roma .grid[class*="md:grid-cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Imagens da galeria menores */
  #case-roma .grid img {
    height: 250px !important;
    max-height: 250px !important;
  }
  
  /* Espaçamento reduzido entre logo e texto */
  #case-roma .grid.grid-cols-1.lg\\:grid-cols-2 {
    gap: 1.5rem !important;
  }
  
  /* Texto mais compacto */
  #case-roma h2 {
    font-size: 1.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  #case-roma p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================
   HEADER E FOOTER - MOBILE
   ============================================ */

@media (max-width: 768px) {
  header {
    height: 60px !important;
    padding: 0 !important;
  }
  
  header .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  footer {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ============================================
   PREVENIR SOBREPOSIÇÃO DE ELEMENTOS
   ============================================ */

@media (max-width: 768px) {
  /* Garantir z-index correto */
  header {
    z-index: 100 !important;
  }
  
  #blackhole-loader {
    z-index: 9999 !important;
  }
  
  /* Remover elementos absolutos que podem sobrepor */
  section > * {
    position: relative !important;
  }
  
  /* Espaçamento mínimo entre seções */
  section + section {
    margin-top: 0 !important;
  }
}

/* ============================================
   GRID DE MARCAS - MOBILE
   ============================================ */

@media (max-width: 768px) {
  #marcas .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  #marcas .lazy-card {
    height: 60px !important;
    padding: 0.5rem !important;
  }
  
  #marcas img {
    max-width: 50px !important;
    max-height: 30px !important;
  }
}

/* ============================================
   GRID DE CASES - MOBILE
   ============================================ */

@media (max-width: 768px) {
  #cases .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #cases .case-card {
    min-height: auto !important;
    padding: 1rem !important;
  }
  
  #cases .case-card .card-image-container {
    height: 200px !important;
  }
}

/* ============================================
   GRID DE PARCEIROS - MOBILE
   ============================================ */

@media (max-width: 768px) {
  #parceiros .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #parceiros .lazy-card {
    min-height: auto !important;
    padding: 1rem !important;
  }
}

/* ============================================
   REMOVER ANIMAÇÕES PESADAS EM MOBILE
   ============================================ */

@media (max-width: 768px) {
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Desabilitar hover effects */
  *:hover {
    transform: none !important;
  }
}

/* ============================================
   VIEWPORT FIX PARA iOS
   ============================================ */

@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  
  body {
    min-height: -webkit-fill-available;
  }
  
  #hero {
    min-height: -webkit-fill-available;
  }
}

/* ============================================
   CORREÇÕES ADICIONAIS PARA SOBREPOSIÇÃO
   ============================================ */

@media (max-width: 768px) {
  /* Garantir que elementos não saiam da tela */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remover margens negativas que podem causar sobreposição */
  * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Garantir que grids não quebrem */
  .grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Reduzir todos os gaps excessivos */
  .gap-8,
  .gap-12,
  .gap-16 {
    gap: 1rem !important;
  }
  
  /* Espaçamentos menores entre elementos */
  .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
  
  .space-y-8 > * + * {
    margin-top: 1.5rem !important;
  }
  
  /* Seções mais compactas */
  section {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================
   CORREÇÕES ESPECÍFICAS PARA TELAS PEQUENAS
   ============================================ */

@media (max-width: 480px) {
  /* Reduzir ainda mais espaçamentos */
  .gap-4,
  .gap-6,
  .gap-8 {
    gap: 0.75rem !important;
  }
  
  /* Padding reduzido em cards */
  .p-6,
  .p-8 {
    padding: 1rem !important;
  }
  
  /* Imagens menores */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Textos mais compactos */
  p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
  }
}