/* ============================================
   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) {
    /* Viewport fix para iOS Safari */
    html {
      height: -webkit-fill-available !important;
      position: fixed !important;
      width: 100% !important;
      overflow: hidden !important;
    }
    
    body {
      min-height: -webkit-fill-available !important;
      height: -webkit-fill-available !important;
      position: relative !important;
      width: 100% !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      -webkit-text-size-adjust: 100% !important;
    }
    
    /* Prevenir zoom em inputs */
    input,
    textarea,
    select {
      font-size: 16px !important;
      -webkit-appearance: none !important;
      border-radius: 0.5rem !important;
    }
    
    /* Viewport fix para hero */
    #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 !important;
      touch-action: manipulation !important;
    }
    
    /* Remover linhas decorativas */
    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;
    }
    
    /* Correções de layout para iOS */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Grids sempre em 1 coluna no iOS mobile */
    .grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Cards de cases - layout fixo */
    .case-card {
      width: 100% !important;
      max-width: 100% !important;
      min-height: auto !important;
      margin: 0 auto !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 1rem !important;
    }
    
    /* Botões e links - touch targets maiores */
    button,
    a,
    .lazy-card {
      min-height: 44px !important;
      min-width: 44px !important;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
      touch-action: manipulation !important;
    }
    
    /* Textos centralizados e legíveis */
    h1, h2, h3, h4, h5, h6, p, span, div {
      word-wrap: break-word !important;
      word-break: break-word !important;
      hyphens: auto !important;
      -webkit-hyphens: auto !important;
    }
    
    /* Imagens responsivas */
    img {
      max-width: 100% !important;
      height: auto !important;
      object-fit: cover !important;
      display: block !important;
    }
    
    /* Seções com padding correto */
    section {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;
    }
    
    /* Header fixo */
    header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 100 !important;
      box-sizing: border-box !important;
    }
    
    /* Corrigir espaçamento do body quando header está fixo */
    body {
      padding-top: 60px !important;
    }
    
    /* Remover margens negativas */
    * {
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Container de texto */
    .text-center,
    [class*="text-center"] {
      text-align: center !important;
      -webkit-text-align: center !important;
    }
    
    /* Cards de parceiros e cases */
    #cases .case-card,
    #parceiros .lazy-card {
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 1rem !important;
    }
    
    /* Grid de marcas - 2 colunas no iOS */
    #marcas .grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem !important;
    }
    
    /* Formulário de contato */
    #contato form {
      width: 100% !important;
      max-width: 100% !important;
      padding: 1rem !important;
      box-sizing: border-box !important;
    }
    
    /* Correção para labels - evitar sobreposição */
    #contato label {
      display: block !important;
      width: 100% !important;
      margin-bottom: 0.5rem !important;
      line-height: 1.5 !important;
      word-wrap: break-word !important;
      word-break: break-word !important;
      white-space: normal !important;
    }
    
    /* Espaçamento entre campos do formulário */
    #contato form > div,
    #contato form .space-y-6 > * + * {
      margin-top: 1.5rem !important;
    }
    
    #contato .grid.md\\:grid-cols-2 > * {
      margin-top: 0 !important;
    }
    
    #contato input,
    #contato textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      -webkit-appearance: none !important;
      border-radius: 0.5rem !important;
      margin-top: 0 !important;
      display: block !important;
      clear: both !important;
    }
    
    /* Correção para email longo - quebrar linha */
    #contato a[href^="mailto:"] {
      word-break: break-all !important;
      word-wrap: break-word !important;
      white-space: normal !important;
      line-height: 1.5 !important;
      display: inline-flex !important;
      flex-wrap: wrap !important;
    }
    
    /* Espaçamento para botões e links */
    #contato .space-y-4 > * + * {
      margin-top: 1rem !important;
    }
    
    /* Textos no formulário */
    #contato p,
    #contato .text-white\\/60 {
      line-height: 1.6 !important;
      margin-bottom: 1rem !important;
      word-wrap: break-word !important;
    }
    
    /* Header do formulário */
    #contato header {
      margin-bottom: 2rem !important;
    }
    
    #contato header h2 {
      line-height: 1.2 !important;
      margin-bottom: 0.75rem !important;
      word-wrap: break-word !important;
    }
    
    #contato header p {
      line-height: 1.6 !important;
      margin-bottom: 0 !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;
  }
}

/* ============================================
   CORREÇÕES ESPECÍFICAS iOS - LAYOUT E ALINHAMENTO
   ============================================ */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* Forçar box-sizing em todos os elementos */
    *,
    *::before,
    *::after {
      box-sizing: border-box !important;
      -webkit-box-sizing: border-box !important;
    }
    
    /* Prevenir overflow horizontal */
    html,
    body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      position: relative !important;
    }
    
    /* Container principal - centralizar e limitar largura */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .container {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Cards sempre centralizados e com largura correta */
    .case-card,
    .lazy-card,
    [class*="card"] {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
    }
    
    /* Grid sempre em 1 coluna com gap adequado */
    .grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-auto-flow: row !important;
      gap: 1rem !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Override para grids específicos */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.md\\:grid-cols-2,
    .grid.md\\:grid-cols-3,
    .grid.lg\\:grid-cols-2,
    .grid.lg\\:grid-cols-3 {
      grid-template-columns: 1fr !important;
    }
    
    /* Grid de marcas - exceção para 2 colunas */
    #marcas .grid,
    #marcas .grid.grid-cols-2,
    #marcas .grid.sm\\:grid-cols-3 {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem !important;
    }
    
    /* Seções com padding adequado */
    section {
      width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      padding-top: 2rem !important;
      padding-bottom: 2rem !important;
      box-sizing: border-box !important;
    }
    
    /* Títulos centralizados */
    h1, h2, h3, h4, h5, h6 {
      text-align: center !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Parágrafos com largura limitada e centralizados */
    p {
      max-width: 100% !important;
      width: 100% !important;
      text-align: left !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Botões e links - full width quando necessário */
    button,
    .button,
    a.button {
      width: 100% !important;
      max-width: 100% !important;
      display: block !important;
      text-align: center !important;
      padding: 0.75rem 1rem !important;
    }
    
    /* Imagens sempre responsivas */
    img {
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    /* Flex containers */
    .flex {
      display: flex !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    .flex.items-center {
      align-items: center !important;
    }
    
    .flex.justify-center {
      justify-content: center !important;
    }
    
    /* Espaçamentos reduzidos */
    .gap-4 { gap: 0.75rem !important; }
    .gap-6 { gap: 1rem !important; }
    .gap-8 { gap: 1rem !important; }
    .gap-12 { gap: 1.5rem !important; }
    
    /* Padding reduzido */
    .p-4 { padding: 0.75rem !important; }
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1.25rem !important; }
    
    /* Margin reduzido */
    .mb-4 { margin-bottom: 0.75rem !important; }
    .mb-6 { margin-bottom: 1rem !important; }
    .mb-8 { margin-bottom: 1rem !important; }
    .mb-12 { margin-bottom: 1.5rem !important; }
    
    /* Correção específica para seção de cases */
    #cases .grid,
    #cases .case-card {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Correção para seção de parceiros */
    #parceiros .grid,
    #parceiros .lazy-card {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Correção para seção ROMA */
    #case-roma {
      width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    
    #case-roma .grid {
      width: 100% !important;
      grid-template-columns: 1fr !important;
    }
    
    /* Formulário de contato - full width */
    #contato {
      width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    
    #contato form,
    #contato .grid {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Correção adicional para evitar sobreposição de texto */
    #contato * {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    
    #contato label {
      display: block !important;
      margin-bottom: 0.5rem !important;
      line-height: 1.5 !important;
      width: 100% !important;
    }
    
    #contato input,
    #contato textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin-top: 0 !important;
      clear: both !important;
    }
    
    /* Espaçamento entre elementos do formulário */
    #contato form > div:not(:first-child) {
      margin-top: 1.5rem !important;
    }
    
    /* Email longo - quebrar linha */
    #contato a[href^="mailto:"] {
      word-break: break-all !important;
      white-space: normal !important;
      line-height: 1.5 !important;
    }
    
    /* Textos */
    #contato p,
    #contato h2,
    #contato h3 {
      line-height: 1.5 !important;
      word-wrap: break-word !important;
      margin-bottom: 0.75rem !important;
    }
    
    /* Header fixo com espaço para conteúdo */
    body {
      padding-top: 60px !important;
    }
    
    header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 1000 !important;
    }
    
    /* Corrigir espaçamento inicial */
    #hero,
    section:first-of-type {
      margin-top: 60px !important;
    }
    
    /* Correção para evitar quebra de layout */
    .space-y-4 > * + * {
      margin-top: 1rem !important;
    }
    
    .space-y-6 > * + * {
      margin-top: 1.5rem !important;
    }
    
    .space-y-8 > * + * {
      margin-top: 2rem !important;
    }
    
    /* Garantir que elementos inline-block não quebrem */
    .inline-block,
    .inline-flex {
      display: inline-block !important;
      vertical-align: middle !important;
    }
    
    /* Correção para elementos com float */
    .float-left,
    .float-right {
      float: none !important;
      display: block !important;
      width: 100% !important;
    }
    
    /* Garantir scroll suave */
    html {
      scroll-behavior: smooth !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    body {
      -webkit-overflow-scrolling: touch !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    
    /* Remover qualquer transform que possa causar problemas */
    @media (max-width: 480px) {
      * {
        transform: none !important;
      }
      
      /* Permitir apenas transforms essenciais */
      .lazy-card:hover,
      button:hover,
      a:hover {
        transform: none !important;
      }
    }
  }
}

/* ============================================
   CORREÇÕES FINAIS iOS - SAFARI SPECIFIC
   ============================================ */

@supports (-webkit-touch-callout: none) {
  /* Fix para Safari iOS - evitar problemas de renderização */
  @media (max-width: 768px) {
    /* Forçar hardware acceleration onde necessário */
    #blackhole-loader,
    #blackhole,
    header,
    section {
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
      will-change: auto !important;
    }
    
    /* Prevenir bounce scroll em iOS */
    body {
      overscroll-behavior: none !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    html {
      overscroll-behavior: none !important;
    }
    
    /* Garantir que elementos não sejam cortados */
    section,
    .container,
    .max-w-7xl,
    .max-w-6xl {
      min-height: auto !important;
      overflow: visible !important;
    }
    
    /* Fix para safe area do iPhone X e superiores */
    @supports (padding: max(0px)) {
      body {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
      }
      
      header {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
      }
    }
  }
}

/* ============================================
   CORREÇÕES PARA CARDS INFORMATIVOS (ENTREGAS, STACK, PROBLEMA, AÇÃO, RESULTADO)
   ============================================ */

@media (max-width: 768px) {
  /* Cards informativos - garantir tamanho adequado e legibilidade */
  .glass,
  [class*="rounded"],
  [class*="card"] {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Títulos em cards */
  .glass h2,
  .glass h3,
  [class*="card"] h2,
  [class*="card"] h3,
  section h2,
  section h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Textos em cards - tamanho adequado e espaçamento */
  .glass p,
  .glass span:not([class]),
  .glass div:not([class*="grid"]):not([class*="flex"]):not([class*="absolute"]),
  [class*="card"] p,
  [class*="card"] span:not([class]),
  [class*="card"] div:not([class*="grid"]):not([class*="flex"]):not([class*="absolute"]),
  section p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.75rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Listas em cards */
  .glass ul,
  .glass ol,
  [class*="card"] ul,
  [class*="card"] ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  .glass li,
  [class*="card"] li {
    margin-bottom: 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
  }
  
  /* Espaçamento entre elementos em cards */
  .glass > * + *,
  [class*="card"] > * + * {
    margin-top: 1rem !important;
  }
  
  /* Grids em cards - 1 coluna */
  .glass .grid,
  [class*="card"] .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  
  /* Tags/chips em cards */
  .glass span[class*="px-"],
  [class*="card"] span[class*="px-"],
  .glass .rounded-full,
  [class*="card"] .rounded-full {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    margin: 0.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  
  /* Links em cards */
  .glass a,
  [class*="card"] a {
    display: inline-block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.6 !important;
    padding: 0.5rem 0 !important;
    margin: 0.25rem 0 !important;
  }
  
  /* Garantir que textos não fiquem espremidos */
  * {
    min-width: 0 !important;
  }
  
  /* Cards com informações - garantir altura adequada */
  .glass,
  [class*="card"] {
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Evitar texto cortado */
  .glass *,
  [class*="card"] * {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  
  /* Espaçamento vertical entre cards */
  section > .glass + .glass,
  section > [class*="card"] + [class*="card"] {
    margin-top: 1.5rem !important;
  }
}

/* Correções específicas para iOS */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* Garantir que textos em cards sejam legíveis */
    .glass *,
    [class*="card"] * {
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
    }
    
    /* Prevenir zoom em textos */
    .glass,
    [class*="card"] {
      font-size: 16px !important;
    }
    
    /* Espaçamento adequado para toque */
    .glass a,
    [class*="card"] a,
    .glass button,
    [class*="card"] button {
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      padding: 0.75rem 1rem !important;
    }
  }
}

/* Correções para telas muito pequenas */
@media (max-width: 480px) {
  /* Cards ainda mais compactos */
  .glass,
  [class*="card"] {
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Textos menores mas ainda legíveis */
  .glass p,
  [class*="card"] p,
  .glass span,
  [class*="card"] span {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* Títulos menores */
  .glass h2,
  .glass h3,
  [class*="card"] h2,
  [class*="card"] h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
}