/* Importa as variáveis e estilos globais se necessário */
@import url("index.css?v=1.2");

/*Área de slides de carrossel*/
.Slides{
    width: 100%;
    height: auto;
    padding: 0 !important;
    overflow: hidden;
}
.Contentor-slide{
    width: 600%;
    height: auto;
    display: flex;
}
.Contentor-slide input{
    display: none;
}
.carrossel{
    width: 16.666%;
    height: 72vh;
    position: relative;
    text-align: center;
    transition: 1s;
}
.carrossel img{
    width: 100%;
    height: 100%;
}
.Nav-manual, .Nav-Auto{
    position: absolute;
    width: 100%;
    margin-top: 40%;
    display: flex;
    justify-content: center;
}
.Nav-manual .manual-btn, .Nav-Auto div{
    cursor: pointer;
    border-radius: 50%;
    border-color: rgb(255, 165, 0);
    padding: 10px;
    border: 2px solid rgb(255, 165, 0);
    transition: 0.9s ease;
}
.Nav-manual .manual-btn:not(:last-child), .Nav-Auto div:not(:last-child){
    margin-right: 10px;
}
.Nav-manual .manual-btn:hover{
    background-color:  rgb(255, 165, 0);
    transform: scale(1.2);
}

#radio1:checked ~ .Nav-Auto .Auto-btn1{
    background-color: rgb(255, 165, 0);
}
#radio2:checked ~ .Nav-Auto .Auto-btn2{
    background-color: rgb(255, 165, 0);
}
#radio3:checked ~ .Nav-Auto .Auto-btn3{
    background-color: rgb(255, 165, 0);
}
#radio4:checked ~ .Nav-Auto .Auto-btn4{
    background-color: rgb(255, 165, 0);
}
#radio5:checked ~ .Nav-Auto .Auto-btn5{
    background-color: rgb(255, 165, 0);
}
#radio6:checked ~ .Nav-Auto .Auto-btn6{
    background-color: rgb(255, 165, 0);
}

/*Mudança de posição das imagens*/

#radio1:checked ~ .primeiro {
    margin-left: 0%;
}
#radio2:checked ~ .primeiro {
    margin-left: -16.666%;
}
#radio3:checked ~ .primeiro {
    margin-left: -33.333%;
}
#radio4:checked ~ .primeiro {
    margin-left: -50%;
}
#radio5:checked ~ .primeiro {
    margin-left: -66.666%;
}
#radio6:checked ~ .primeiro {
    margin-left: -83.333%;
}
/*Fim da área de slide de carrossel*/
/* Estilização exclusiva da grelha de Todos os Projetos */
main .projectos {
    padding: 60px 0;
}

main .projectos .interface .ilustracoes {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards passem para as linhas seguintes */
    justify-content: flex-start; /* Alinha os cards do início */
    gap: 30px; /* Espaçamento entre os cards */
    padding: 2% 0;
}

/* Seleciona QUALQUER card de ilustração (da 1 à 6 ou mais) */


/* Ajustes de responsividade para telas menores diretamente no ficheiro da página */
@media screen and (max-width: 992px) {
    main .projectos .interface .ilustracoes > div {
        flex: 0 0 calc(50% - 15px); /* 2 colunas em tablets */
        max-width: calc(50% - 15px);
    }
}

@media screen and (max-width: 600px) {
    main .projectos .interface .ilustracoes > div {
        flex: 0 0 100%; /* 1 coluna em telemóveis */
        max-width: 100%;
    }
}