/* GERAL - aplica a todos */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ======================== */
/* MOBILE - até 600px      */
/* ======================== */
@media screen and (max-width: 600px) {

    /* 1. Zera as margens do body */
    body {
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* 2. Garante que a imagem de fundo ocupe 100% da tela */
    #hero {
      width: 100% !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      background-image: url("assets/FundoMobile.jpg") !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-attachment: scroll !important;
    }
  
    /* 3. Evita que o conteúdo ultrapasse a tela */
    html, body, #hero, .hero-content {
      max-width: 100%;
      overflow-x: hidden;
    }
  
    /* 4. Centraliza o conteúdo de texto no mobile */
    .hero-content {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .profile {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important; 
        padding: 0 !important;
        width: 100%;
        height: 100vh;
    }
  
    .profile-text-container {
      width: 100vw !important;
      max-width: 500px;
      background-color: rgba(255, 255, 255, 0.9); /* contraste opcional */
      padding: 1.5rem !important;
      text-align: center;
      border-radius: 5px;   /* laterias arredondadas do box ux */
      box-shadow: 0 0 10px rgba(0,0,0,0.2);

      margin: 0 auto !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    }

    .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        list-style: none;
        gap: 1.5rem;
    
        padding: 0.75rem 1.25rem;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 10px;
    
        margin: 1rem auto;
        width: max-content;         /* 💥 chave da centralização visual */
        max-width: 90vw;            /* evita estouro lateral */
        text-align: center;
    }
    
    
    
    

/* ======================== */
/* MOBILE EXTENDIDO:        */
/* max-width: 600px         */
/* landscape ou max-height  */
/* ======================== */
@media screen and (max-width: 600px), 
       (max-device-width: 600px) and (orientation: landscape), 
       screen and (max-height: 500px) {

   .scroll-animate {
        animation: none !important;
        opacity: 1 !important; 
    }

   article {
        font-size: 1rem;    
   }

   footer nav {
        height: fit-content;
        margin-bottom: 2rem;
   }   

    .contact-info-container {
        margin: 0;
    }

    .contact-info-container p,
    .nav-links li a {
        font-size: 1rem;
        padding: 0.5rem 0rem;
        display: inline-block; /* ✅ Garante comportamento em linha */
        white-space: nowrap;   /* ✅ Evita quebra de texto */
    }
    

   .experience-sub-title {
        font-size: 1.25rem;
   }

   .logo {
        font-size: 1.5rem;
   }

   .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    list-style: none;
  
    padding: 0.75rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  
    width: fit-content;
    max-width: 90vw;
    margin: 1rem auto;
    text-align: center;
  }
  
    
    body {
        margin: 0;
    }

    nav {    
        margin: 0;   
    }

   /* #desktop-nav {
        display: none;
    } */

    #hamburger-nav {
        display: flex;
    }   
    
    .menu-links a {
        color: var(--background-color);        
    }
    
    .menu-links a:hover {
        background: hsl(84, 29%, 17%);
        transform: none;
        text-decoration: line-through;
    }
    
    #hero {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        background-image: url("assets/FundoMobile.jpg") !important;
        background-size: cover; 
        background-position: center center;
        background-repeat: no-repeat; 
        background-attachment: scroll; 
    }
    
    .hero-content {
        width: 100vw !important;
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
    }

    .profile {
        padding-left: 0!important;
        justify-content: center !important;
    }  

    .profile-text-container {
        width: 80vw !important; /* tamanho do quadro branco atrás de ux design */
        background-color: rgba(255, 255, 255, 0.92); /* opcional: adiciona contraste */
        margin: auto;
        padding: 1rem !important;
    }

    .highlight-title {
        font-size: 3rem;               
    }

    .section-title {
        font-size: 1.5rem;   
        text-align: center;
    }

    .project-details-container,
    .sm-project-details-container {   
        flex-direction: column;        
        gap: 0rem;        
    } 

    .sm-project-details-container {
        width: 100%;     
    }   
    
    .sm-project-container {
        flex-direction: column;           
    }

    .project-img {        
        width: 100%;
    }

    .lg-project-container  
    .project-info-container {
        width: 100%;  
        gap: 0.5rem;            
    }
    
    .project-info-container button {
        margin-top: 0.5rem;  
        padding: 0.5rem 0.8rem;                      
    }

    .project-label {
        font-size: 1rem;
    }

    .project-title {
        font-size: 1.5rem; /* tamanho do título dos projetos */
    }

    .about-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 2rem;
        min-width: 320px;
        width: 100%;
    }    

    .about-details-container {
        text-align: center;
        margin: 0 auto;
        padding: 2rem;
        max-width: 700px;
        width: 100%;
        font-size: 1.25rem;
        line-height: 1.6;
    }    

    .about-container a {
        color: var(--color-3);
    }      

    #contact, 
    #footer {        
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;  
        padding-right: 1rem;   
        padding-left: 1rem;                 
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-details-container {               
        border-left: none;
        padding-left: none;         
    }

    .contact-details {
        justify-content: center;
    }

    .contact-section-title  {               
        text-align: center;        
    }

    footer {       
        flex-direction: column;
        align-items: center;    
        gap: 1rem;   
        padding-bottom: 2rem;               
    }
}

/* ======================== */
/* TABLET E DESKTOP MÉDIO   */
/* max-width: 1100px        */
/* ======================== */
@media screen and (max-width: 1100px) {      
    #desktop-nav {
        justify-content: center;        
    }   

    body {
        margin: 10 0rem;   /* MARGEM DO MOBILE */
        padding-inline: 4%; /* distancia das laterais da foto até a margem */
    }

    nav {
        margin: 0 4rem;        
    }
    
    .profile {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100%;
        height: 100vh; /* garante centralização vertical */
    }
    
    .profile-text-container {
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }    
    

   /* #hero {
        width: 100vw !important;
        height: 100vh !important;
        margin: 10 !important;
        padding: 0 !important;
        background-image: url("assets/fundoMOBILE.jpg") !important;
        background-size: cover; 
        background-position: center center;
        background-repeat: no-repeat; 
        background-attachment: scroll; 
    } tirei posso retornar */

  /*.profile {
        padding-left: 12rem; ou 1rem ou 5% — escolha o valor que deixar centralizado ou mais à esquerda 
        justify-content: flex-start; continua alinhando à esquerda 
      } 
    
      .profile-text-container {
        align-items: flex-start; garante que o texto continue alinhado à esquerda 
      } */

    #hero {            
        width: calc(100% + 8rem);
        margin-left: -4rem;
        margin-right: -4rem;          
    }   
    
    .lg-project-container {     
        gap: 2rem;         /* Espaço entre o spotly e o proj 1 */   
    }

    .project-details-container,
    .sm-project-details-container {   
        flex-direction: column;               
        gap: 0rem;                
    }

    .sm-project-details-container img {
        width: 100%;    /* gifs */
        max-height: fit-content;
    }

    .project-img {        
        width: 100%;        
    }

    .project-info-container {
        width: 100%;              
        padding: 1rem;              
    } 
    
    .sm-project-details-container 
    .project-info-container {
        padding: 1rem;
    }    

    .btn-container {
        align-self: center;
    }

    #contact, 
    #footer {        
        width: calc(100% + 8rem);
        margin-left: -4rem;
        margin-right: -4rem;         
    }

    .contact-section-title {
        font-size: 3rem;
    }  

    .contact-container {        
        gap: 1.2rem;               
    }
}











/* ======================== */
/* TELAS MUITO GRANDES      */
/* min-width: 1800px        */
/* ======================== */
@media screen and (min-width: 1800px) { /* alterei o minimo era 1800*/
    
    .profile {
        padding-left: 1rem; /* ou 1rem ou 5% — escolha o valor que deixar centralizado ou mais à esquerda */
        justify-content: center; /* continua alinhando à esquerda */
      }
    
      .profile-text-container {
        align-items: flex-start; /* garante que o texto continue alinhado à esquerda */
      }
   /* estava aqui antes .profile-text-container {
        height: 55vh;
        gap:  2rem;
    }

    .profile-title {
        font-size: 2rem;                
    } */

    .highlight-title {
        font-size: 5.6rem;
        line-height: 1; 
    }

    .tagline {
        font-size: 1.25rem;
        margin-top: -0rem;
    }

    p, 
    footer p, 
    a, 
    li {
        font-size: 1.25rem;
    }

    .section-title {
        font-size: 2.6rem;            
    }

    .tag {   
        font-size: 1.2rem;     
    }

    .btn {    
        font-size: 1.2rem;
    }
    
    .project-title {    
        font-size: 2.6rem;
    }

    .sm-project-title {
        font-size: 1.8rem;
    }

    .topic-title {
        font-size: 1.25rem;           
    }

    .contact-section-title  {        
        font-size: 10rem;        
    }
}

/* ======================== */
/* DIMENSÕES CORRIGIDAS COM IMAGEM DIFERENTE */
/* ======================== */
@media screen and (min-width: 768px) and (max-width: 1025px),
       screen and (min-width: 820px) and (max-width: 1181px),
       screen and (min-width: 1024px) and (max-width: 1367px),
       screen and (min-width: 912px) and (max-width: 1369px),
       screen and (min-width: 853px) and (max-width: 1281px) {

    #hero {
        background-image: url("assets/FundoMobile.jpg") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}