:root { 
    --rosa: #8b004a; 
    --rosa-escuro: #4b0129; 
    --amarelo: #ffd000; 
    --branco: #ffffff; 
} 
 
* { 
    box-sizing: border-box; 
} 
 
html { 
    scroll-behavior: smooth; 
} 
 
body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
    color: white; 
 
    background: linear-gradient( 
        135deg, 
        #8b004a 0%, 
        #7a0142 50%, 
        #4b0129 100% 
    ); 
 
    min-height: 100vh; 
    overflow-x: hidden; 
} 
 
a { 
    text-decoration: none; 
} 




.titulocad { 
    height: 85px; 
    background: #8b004a; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    position: relative; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
} 
 
.titulocad::before { 
    content: "WEBVOTE"; 
    position: absolute; 
    left: 30px; 
 
    color: #ffd000; 
 
    font-size: 32px; 
    font-weight: bold; 
} 
 
.titulocad h2 { 
    margin: 0; 
    color: white; 
 
    font-size: 30px; 
    font-weight: normal; 
} 



.açoes { 
    position: absolute; 
    top: 22px; 
    right: 30px; 
 
    display: flex; 
    gap: 15px; 
} 
 
.entre-span { 
    background: #ffd000; 
    color: #4b0129; 
 
    padding: 12px 17px; 
 
    border-radius: 5px; 
 
    font-family: Georgia, "Times New Roman", serif; 
    font-weight: bold; 
    font-size: 14px; 
 
    transition: 0.2s; 
} 
 
.entre-span:hover { 
    background: #ffe45c; 
    transform: translateY(-2px); 
} 



.subnav { 
    height: 52px; 
    background: #4b0129; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
.nav-links2 { 
    display: flex; 
    gap: 25px; 
} 
 
.nav-links2 a { 
    color: white; 
    font-size: 20px; 
 
    transition: 0.2s; 
} 
 
.nav-links2 a:hover { 
    color: #ffd000; 
} 


.sobre-projeto { 
    padding: 80px 12%; 
 
    text-align: center; 
 
    background-image: 
        linear-gradient( 
            rgba(255, 255, 255, 0.025) 1px, 
            transparent 1px 
        ), 
        linear-gradient( 
            90deg, 
            rgba(255, 255, 255, 0.025) 1px, 
            transparent 1px 
        ); 
 
    background-size: 50px 50px; 
} 
 .sobre-projeto-texto {
    max-width: 1000px;

    margin: 0 auto;

    padding: 40px 50px;

    background: rgba(75, 1, 41, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    transition: 0.3s;
}

.sobre-projeto-texto p {
    margin: 0;

    color: white;

    font-size: 19px;

    line-height: 1.7;
}

.sobre-projeto-texto:hover {
    transform: translateY(-5px);

    border-color: #8b004a;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}


.desenvolvedores { 
    background: #ffffff; 
 
    padding: 70px 7%; 
 
    text-align: center; 
} 
 
.desenvolvedores h1 { 
    margin: 0 0 45px; 
 
    color: #4b0129; 
    font-size: 40px; 
} 


.cards { 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
 
    gap: 25px; 
    flex-wrap: wrap; 
} 
 
.card { 
    width: 270px; 
 
    background: #ffffff; 
 
    border: 2px solid #eeeeee; 
    border-radius: 12px; 
 
    overflow: hidden; 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
 
    transition: 0.3s; 
} 
 
.card:hover { 
    border: 2px solid #8b004a; 
 
    transform: translateY(-8px); 
 
    box-shadow: 0 10px 22px rgba(139, 0, 74, 0.30); 
} 
 
.card img { 
    width: 100%; 
    height: 230px; 
 
    object-fit: cover; 
    display: block; 
} 
 
.card-texto { 
    padding: 14px 18px 16px; 
} 
 
.card-texto h2 { 
    margin: 3px 0 8px; 
 
    color: #8b004a; 
    font-size: 20px; 
} 
 
.card-texto p { 
    margin: 0; 
 
    color: #4b0129; 
 
    font-size: 14px; 
    line-height: 1.4; 
} 

.card img {
    cursor: pointer;
}

.escola { 
    padding: 70px 15%; 
 
    background: #8b004a; 
 
    text-align: center; 
} 
 
.escola h1 { 
    margin: 0 0 25px; 
 
    color: #ffd000; 
    font-size: 40px; 
} 
 
.escola p { 
    max-width: 900px; 
    margin: 0 auto 30px; 
 
    color: white; 
 
    font-size: 18px; 
    line-height: 1.7; 
} 
 
.escola a { 
    display: inline-block; 
 
    background: #ffd000; 
    color: #4b0129; 
 
    padding: 13px 25px; 
 
    border-radius: 5px; 
 
    font-weight: bold; 
 
    transition: 0.2s; 
} 
 
.escola a:hover { 
    background: #ffe45c; 
    transform: translateY(-2px); 
} 



footer { 
    width: 100%; 
    background: #4b0129; 
} 
 
.rodape-final { 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    text-align: center; 
    padding: 15px; 
} 
 
.rodape-final p { 
    margin: 0; 
 
    color: #cccccc; 
    font-size: 13px; 
} 




@media (max-width: 800px) { 
 
    .titulocad { 
        height: auto; 
        padding: 20px; 
 
        flex-direction: column; 
    } 
 
    .titulocad::before { 
        position: static; 
 
        margin-bottom: 10px; 
 
        font-size: 25px; 
    } 
 
    .titulocad h2 { 
        font-size: 22px; 
        text-align: center; 
    } 
 
    .açoes { 
        position: static; 
        margin-top: 15px; 
    } 
 
    .subnav { 
        height: auto; 
        padding: 15px; 
    } 
 
    .nav-links2 { 
        gap: 15px; 
        flex-wrap: wrap; 
        justify-content: center; 
    } 
 
    .nav-links2 a { 
        font-size: 17px; 
    } 
 
    .sobre-projeto { 
        padding: 55px 25px; 
    } 
 
    .sobre-projeto h1 { 
        font-size: 32px; 
    } 
 
    .sobre-projeto p { 
        font-size: 17px; 
    } 
 
    .desenvolvedores { 
        padding: 55px 25px; 
    } 
 
    .desenvolvedores h1 { 
        font-size: 32px; 
    } 
 
    .card { 
        width: 270px; 
    } 
 
    .card img { 
        height: 230px; 
    } 
 
    .escola { 
        padding: 55px 25px; 
    } 
 
    .escola h1 { 
        font-size: 32px; 
    } 
}