/* 
* Hyp3mob.com - Responsividade
* Este arquivo contém os estilos para garantir responsividade em todos os dispositivos
*/

/* Tablets e dispositivos médios */
@media (max-width: 992px) {
  /* Layout geral */
  .container {
    padding: 0 2rem;
  }
  
  /* Seções */
  .secao {
    padding: 4rem 0;
  }
  
  /* Hero */
  .hero {
    padding: 7rem 0 4rem;
  }
  
  .hero-titulo {
    font-size: 2.5rem;
  }
  
  /* Grid */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Contato */
  .contato-info {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  /* Newsletter */
  .newsletter {
    padding: 2.5rem;
  }
  
  /* Rodapé */
  .rodape-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  
  /* Blog */
  .artigo-container {
    padding: 0 2rem;
  }
  
  .artigo-titulo-principal {
    font-size: 2.25rem;
  }
  
  .artigo-autor-bio {
    flex-direction: column;
  }
  
  .artigo-autor-bio-foto {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
}

/* Dispositivos móveis */
@media (max-width: 768px) {
  /* Tipografia */
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  /* Layout */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  /* Seções */
  .secao {
    padding: 3.5rem 0;
  }
  
  .titulo-secao {
    font-size: 1.75rem;
  }
  
  /* Hero */
  .hero {
    padding: 6rem 0 3rem;
    text-align: center;
  }
  
  .hero-titulo {
    font-size: 2.25rem;
  }
  
  .hero-acoes {
    justify-content: center;
  }
  
  /* Sobre */
  .sobre-numeros {
    justify-content: center;
  }
  
  /* Tecnologias */
  .tecnologias {
    gap: 1.5rem;
  }
  
  .tecnologia img {
    width: 60px;
    height: 60px;
  }
  
  /* Contato */
  .contato-social {
    justify-content: center;
  }
  
  /* Newsletter */
  .newsletter {
    padding: 2rem;
  }
  
  .newsletter-campo {
    flex-direction: column;
  }
  
  .newsletter-input {
    width: 100%;
    border-radius: 30px;
    margin-bottom: 1rem;
  }
  
  .newsletter-campo .botao {
    width: 100%;
    border-radius: 30px;
  }
  
  /* Rodapé */
  .rodape {
    padding: 3rem 0 0;
  }
  
  .rodape-inferior {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .rodape-inferior-links {
    justify-content: center;
  }
  
  /* Banner de cookies */
  .banner-cookies-conteudo {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .banner-cookies-acoes {
    width: 100%;
    justify-content: space-between;
  }
  
  /* Blog */
  .artigo-titulo-principal {
    font-size: 2rem;
  }
  
  .artigo-meta {
    gap: 1rem;
  }
  
  .artigo-comentario {
    flex-direction: column;
  }
  
  .artigo-comentario-avatar {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .artigo-comentario-resposta {
    margin-left: 1rem;
  }
  
  .artigo-compartilhar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .artigo-compartilhar-titulo {
    margin-bottom: 1rem;
  }
}

/* Dispositivos móveis pequenos */
@media (max-width: 576px) {
  /* Tipografia */
  html {
    font-size: 15px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Layout */
  .container {
    padding: 0 1.5rem;
  }
  
  /* Seções */
  .secao {
    padding: 3rem 0;
  }
  
  .titulo-secao {
    font-size: 1.5rem;
  }
  
  .subtitulo-secao {
    font-size: 1rem;
  }
  
  /* Hero */
  .hero {
    padding: 5rem 0 2.5rem;
  }
  
  .hero-titulo {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  
  .hero-subtitulo {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-acoes {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-acoes .botao {
    width: 100%;
    margin-bottom: 0.75rem;
  }
  
  /* Cards */
  .card-servico,
  .card-projeto,
  .card-blog {
    padding: 1.5rem;
  }
  
  /* Depoimentos */
  .depoimento-conteudo {
    padding: 1.5rem;
  }
  
  /* Formulários */
  .contato-formulario {
    padding: 1.5rem;
  }
  
  /* Newsletter */
  .newsletter {
    padding: 1.5rem;
  }
  
  .newsletter-titulo {
    font-size: 1.5rem;
  }
  
  /* Rodapé */
  .rodape {
    padding: 2.5rem 0 0;
  }
  
  .rodape-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Blog */
  .artigo-titulo-principal {
    font-size: 1.75rem;
  }
  
  .artigo-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .artigo-autor {
    margin-top: 1rem;
  }
  
  .artigo-tags {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .artigo-tags-titulo {
    margin-bottom: 0.75rem;
  }
  
  .paginacao {
    flex-wrap: wrap;
  }
}

/* Ajustes para telas muito grandes */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  
  html {
    font-size: 17px;
  }
}

/* Ajustes para orientação paisagem em dispositivos móveis */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 5rem 0 3rem;
  }
  
  .cabecalho {
    padding: 10px 0;
  }
  
  .menu-mobile.active + .menu {
    padding-top: 60px;
  }
}

/* Suporte para dark mode */
@media (prefers-color-scheme: dark) {
  /* Estilos para modo escuro podem ser adicionados aqui quando necessário */
}

/* Ajustes de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}