/* ============================================
   MOBILE RESPONSIVO - CORREÇÕES ESPECÍFICAS
   ============================================ */

/* Garante que elementos não saiam da tela */
* {
  max-width: 100%;
}

/* Fix para iOS */
input, textarea, select {
  font-size: 16px !important; /* Previne zoom no iOS */
}

/* Ajustes para viewport */
@media (max-width: 768px) {
  /* Remove qualquer overflow horizontal */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Container seguro */
  .container {
    overflow-x: hidden !important;
  }
  
  /* Hero section centralizada */
  .hero__text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Badge centralizado */
  .badge {
    align-self: center;
  }
  
  /* Grid de 4 colunas vira 2 em tablet, 1 em mobile */
  @media (min-width: 481px) and (max-width: 768px) {
    .grid-two {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  
  @media (max-width: 480px) {
    .grid-two {
      grid-template-columns: 1fr !important;
    }
  }
  
  /* Formulário de contato melhorado */
  .contact-form {
    margin: 0 auto;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions .btn {
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* Modal responsivo */
  .modal__content {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
  }
  
  /* Fix para botões dentro de cards */
  .card .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Tablet específico */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Ajuste fino para tablets */
  .hero__grid {
    gap: 40px !important;
  }
  
  .hero h1 {
    font-size: 2.8rem !important;
  }
  
  /* Cards em 2 colunas */
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
  
  /* Hardware section mantém 2 colunas */
  #hardware .grid-two {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Safe area para iPhones com notch */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Touch improvements */
@media (max-width: 768px) {
  /* Área de toque mínima */
  button, 
  .btn, 
  .nav__link,
  input[type="submit"],
  .card__toggle {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects em touch devices */
  .card:hover {
    transform: none;
  }
}