/* ============================
   MEDIA QUERIES - OTIMIZAÇÃO PARA CONVERSÃO MOBILE
   ============================ */

/* Dispositivos Móveis e Tablets Pequenos (Até 768px) */
@media (max-width: 768px) {
    /* Ajustes Tipográficos para Telas Menores */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    p { font-size: 1rem; }

    /* Ajuste de Navegação: Foco absoluto no Botão de Contato */
    #header nav {
      flex-wrap: wrap; /* Permite quebrar linha */
      justify-content: space-between;
      padding: 1rem; /* Adiciona respiro nas bordas laterais */
  }
  
  .logo {
      font-size: 1.3rem; /* Reduz o tamanho do texto da logo */
      width: 100%; /* Força a logo a ocupar a linha inteira */
      text-align: center;
      margin-bottom: 0.8rem;
  }

  .menu {
      width: 100%;
      justify-content: center;
      gap: 1rem;
  }

    /* Esconde os links de texto para não poluir o cabeçalho no celular */
    .menu li:not(:last-child) {
        display: none; 
    }
    
    /* O Botão CTA se torna o único foco da navegação */
    .nav-cta {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    /* Seção Hero: Reorganização de Blocos */
    #hero {
        padding-top: 110px; /* Reduz espaço vazio */
        padding-bottom: 40px;
    }

    .hero-content {
        flex-direction: column-reverse; /* Foto acima do texto fica ruim. Texto deve vir primeiro! */
        text-align: center;
        gap: 2rem;
    }

    .hero-buttons {
        flex-direction: column; /* Botões empilhados para facilitar o clique com o polegar */
    }

    .btn {
        width: 100%; /* Botões ocupam 100% da largura em celulares */
    }

    .hero-image-container {
        max-width: 280px; /* Imagem reduzida para não dominar a tela e empurrar o texto para baixo */
        margin: 0 auto;
    }

    /* Ajustes de Espaçamento Geral */
    section { padding: 3rem 0; }

    /* Formulário de Contato */
    .contato-wrapper {
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 2rem;
    }

    .contato-info h2 {
        text-align: center;
    }

    /* Rodapé */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Tablets em modo Paisagem e Laptops Pequenos (769px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    h1 { font-size: 2.8rem; }
    
    .hero-content {
        gap: 2rem;
    }
    
    .contato-wrapper {
        padding: 3rem;
        gap: 2rem;
    }
    
    .hero-image-container {
        max-width: 350px;
    }
}