body { 
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
   margin: 0; 
   overflow-x: hidden; /* Evita rolagem horizontal */ 
} 

#app {
    /* O #app pode ser simplificado ou removido se não tiver outros propósitos */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F4F4F4;
    flex-direction: column;
 	gap: 20px
}

.title-container {
   max-width: 600px;
   margin-top: 25px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.subtitle__info  {
   font-family: "Verdana";
   font-weight: 400;
   font-size: 20px;
   line-height: 100%;
   letter-spacing: 0px;
   color: black;
}

.title__info {
    font-family: "Verdana";
    font-size: 38px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    letter-spacing: 0px;
    color: #f5872d;
}

#main-container {
    width: 60%;
    max-width: 1920px; /* Largura máxima do seu design */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    
    /* A MÁGICA ACONTECE AQUI */
    aspect-ratio: 16 / 9; /* Força o container a manter a proporção 1920/1080 */
    height: auto; /* A altura agora se ajustará para manter a proporção */

    background-image: url('../img/fundo_inicio.png');
    background-size: cover;
    background-position: center;
}

/* Posicionamento responsivo com porcentagens */ 
.sinal-mais1 { 
   position: absolute; 
   top: 10.18%; 
   left: 56.77%; 
   width: 2.34%; /* Largura relativa */ 
} 

.sinal-mais2 { 
   position: absolute; 
   top: 41.2%; 
   left: 52.08%; 
   width: 2.34%; 
} 

.sinal-mais3 { 
   position: absolute; 
   top: 73.14%; 
   left: 47.65%; 
   width: 2.34%; 
} 

.sinal-mais4 { 
   position: absolute; 
   top: 88.89%; 
   left: 36.19%; 
   width: 2.34%; 
} 

.sinal-mais5 { 
   position: absolute; 
   top: 65.27%; 
   left: 27.08%; 
   width: 2.34%; 
} 

.mais1, .mais2 { 
   width: 18.48%; /* Largura relativa */ 
   max-width: 355px; /* Largura máxima */ 
   position: absolute; 
   left: 78.38%; 
   transition: top 0.4s ease, transform 0.3s ease; 
} 

.mais1 { 
   top: 46.75%; 
} 

.mais2 { 
   top: 52.77%; 
} 

.extra-images, .extra-images-2 { 
   display: none; 
   position: absolute; 
   left: 78.38%; 
   top: 53.7%; 
   width: 18.69%; 
   max-width: 359px; 
   background: transparent; 
   border-radius: 10px; 
   z-index: 500; 
   flex-direction: column; 
} 

.extra-images img, .extra-images-2 img { 
   width: 100%; /* Imagens fluidas dentro do container */ 
   height: auto; 
   border-radius: 8px; 
   opacity: 0; 
   transform: translateY(-20px); 
} 


.show-extra .extra-images {
    display: flex;
}

.show-extra .extra-images img {
    animation: slideDown 0.4s forwards;
}

.show-extra .extra-images img:nth-child(1) {
    animation-delay: 0.10s;
}

.show-extra .extra-images img:nth-child(2) {
    animation-delay: 0.20s;
}

.show-extra .extra-images img:nth-child(3) {
    animation-delay: 0.30s;
}

.show-extra .extra-images img:nth-child(4) {
    animation-delay: 0.40s;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.hide-extra .extra-images img {
    animation: slideUp 0.4s forwards;
}

.hide-extra-2 .extra-images-2 img {
    animation: slideUp 0.4s forwards;
}

.show-extra .mais2 {
    top: 88.43%; /* Equivalente a 955px no container de 1080px */
}

.show-extra-2 .mais2 {
    /* Move o botão 2 para a posição inicial do botão 1 */
    top: 46.75%; 
}

.show-extra-2 .mais1 {
    top: 88.43%; /* Equivalente a 955px no container de 1080px */
}

.show-extra-2 .extra-images-2 {
    display: flex;
}

.show-extra-2 .extra-images-2 img {
    animation: slideDown 0.4s forwards;
}

.show-extra-2 .extra-images-2 img:nth-child(1) {
    animation-delay: 0.10s;
}

.show-extra-2 .extra-images-2 img:nth-child(2) {
    animation-delay: 0.20s;
}

.show-extra-2 .extra-images-2 img:nth-child(3) {
    animation-delay: 0.30s;
}

.show-extra-2 .extra-images-2 img:nth-child(4) {
    animation-delay: 0.40s;
}

/* Animações e estados permanecem os mesmos */ 

.btn-popup { 
   position: absolute; 
   border: none; 
   background-color: transparent; 
   cursor: pointer; 
} 

/* Botões com posicionamento e tamanho relativos */ 
.btn-biocombustivel { 
   left: 33.07%; 
   top: 53.24%; 
   width: 20.05%; 
   height: 25%; 
} 

.btn-triagem { 
   left: 38.02%; 
   top: 30.55%; 
   width: 16.92%; 
   height: 16.2%; 
} 

.btn-energialimpa { 
   left: 36.19%; 
   top: 5.09%; 
   width: 23.43%; 
   height: 19.9%; 
} 

.btn-aterro { 
   left: 20.05%; 
   top: 76.85%; 
   width: 19.27%; 
   height: 19.44%; 
} 

.btn-recuperacao { 
   left: 10.41%; 
   top: 51.85%; 
   width: 19.27%; 
   height: 19.44%; 
} 

/* O overlay continua o mesmo, está correto */
.popup-overlay {
    display: none;
    position: fixed; /* Fixo na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
}

/* O container do conteúdo continua o mesmo, está correto */
.popup-content {
    position: relative; /* ESSENCIAL para o posicionamento do botão */
    max-width: 90%;
    max-height: 90%;
    text-align: center;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s ease-in-out;
    
    /* Adicionado para garantir que a imagem não ultrapasse */
    display: inline-block; 
}

.popup-overlay.show {
	display: flex !important;
}

.popup-overlay.show .popup-content {
    opacity: 1;
    transform: scale(1);
}

.popup-content img {
    max-width: 100% !important;
    max-height: 80vh; /* Altura máxima relativa à altura da tela */
    display: block; /* Evita espaços extras abaixo da imagem */
}

.close-btn,
.close-btn2 {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;

    /* TAMANHO RESPONSIVO */
    /* Usamos uma unidade relativa (vw) com um máximo e mínimo */
    width: 5vw;
    height: 5vw;
    max-width: 75px;  /* Não deixa ficar gigante em telas grandes */
    max-height: 75px;
    min-width: 44px;   /* Garante que seja clicável em telas pequenas */
    min-height: 44px;
}

.close-btn {
    /* POSIÇÃO RESPONSIVA COM PORCENTAGENS */
    /* Ajuste os valores para casar com o seu design */
    top: 5%; 
    right: 4%;
}

.close-btn2 {
    /* POSIÇÃO RESPONSIVA COM PORCENTAGENS */
    /* Ajuste os valores para casar com o seu design */
    top: 3%;
    right: 4%;
}



/* Media Queries para telas menores */ 
@media (max-width: 1180px) { 
   #app {
   	margin-top: 20px
   }
   
   .title-container {
    max-width: 300px
   }
   
   .title__info {
	font-size: 28px
   }
}