:root {
    --preto: #000000;
    --branco: #FFFFFF;
    --verde: #57E5A8;
    --ciano: #59DEE2;
    --roxoClaro: #8322F4;
    --roxoEscuro: #6900BC;
    --rosa: #F51183;
    --RosaEscuro: #D30D7A;
    --laranja: #FFAA00;
    --amareloClaro: #FFC933;
    --amareloEscuro: #FFBB12;
}

html{
    scroll-behavior: smooth;
}
::selection {
    background: var(--amareloEscuro);
    color: var(--roxoEscuro);
}




/* HEADER */

header{
    position: absolute;
    z-index: 2;
    width: 64%;
    padding: 40px;
    right: 50%;
    transform: translateX(50%);
}
header li{
    list-style: none;
}
header ul{
    width: 100%;
}
header a{
    font-family: 'VersosTest-ExtraBold';
    color: white;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}
header a:hover{
    color: var(--ciano);
}

.bloco-principal{
    background-color: var(--rosa);
    padding: 200px 0 0;
}

.bloco-principal .box-principal{
    background-image: url(/dist/imgs/elementos/lata.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 560px;
}

.bloco-principal .box-principal img{
    display: block;
    width: 60%;
    margin: 0 auto;
    margin-bottom: -70px;
}
.bloco-principal .video iframe{
    display: block;
    width: 60%;
    margin: -120px auto 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.clack{
    padding: 100px 0 0;
}
.clack .texto-clack{
    padding: 100px 0 0;   
}
.clack p{
    font-family: 'VersosTest-Regular';
    color: white;
    font-size: 20px;
    line-height: 2;
}
.clack b{
    font-family: 'VersosTest-Black';
}
.clack a{
    width: fit-content;
    display: block;
    margin: 0 auto;
}
.scroll {
    display: block;
    margin: 100px auto 0;
    padding-bottom: 100px;
    transition: all 0.3s ease-in-out;
    animation: pulse 1.5s infinite alternate ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05) translateY(20px);
    }
}


/* LATA */

.lata-aluminio{
    padding: 500px 0 0 0;
    background-image: url(/dist/imgs/elementos/banner-lata-aluminio.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.fundo-lata-aluminio{
    margin-bottom: -10px;
    width: 100%;
    z-index: 2;
    position: relative;
}
.flex-latinhas img{
    width: 100%;
}
.flex-latinhas h3{
    font-size: 36px;
    font-family: 'VersosTest-Black';
    color: var(--roxoEscuro);
    margin-bottom: 20px;
}
.flex-latinhas p{
    font-size: 20px;
    font-family: 'VersosTest-Regular';
}
.flex-latinhas{
    gap: 60px;
    justify-content: start;
    margin: 80px 100px;
}
.flex-latinhas ~ .end{
    justify-content: end;
}
.flex-latinhas ~ .end{
    text-align: right;
}
.lata-aluminio a{
    display: block;
    width: fit-content;
    margin: 0 auto;
}

/* SUTENTAVEL */

.sustentavel{
    background-color: var(--verde);
    padding: 100px 0;
}
.sustentavel .numeros{
    justify-content: center;
}
.sustentavel .numeros h3{
    font-size: 290px;
    width: fit-content;
    font-family: 'VersosTest-Black';
    color: var(--roxoClaro);
}
.sustentavel .numeros p{
    font-size: 100px;
    font-family: 'VersosTest-Black';
    width: fit-content;
    color: var(--branco);
    margin-left: -40px;
    position: relative;
    z-index: 1;
}
.sustentavel h4{
    font-family: 'VersosTest-Black';
    font-size: 36px;
    text-align: center;
    color: var(--roxoClaro);
}
.sustentavel h5{
    font-family: 'VersosTest-Bold';
    font-size: 20px;
    text-align: center;
    color: #088042;
}
.box-lata{
    background-image: url(/dist/imgs/elementos/lata-roxa.svg);
    margin-top: 100px;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 560px;
    justify-content: center;
}
.box-lata h6{
    font-family: 'VersosTest-Black';
    font-size: 36px;
    color: var(--branco);
}
.box-lata .cada{
    width: 50%;
}
.box-lata a{
    width: fit-content;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
.box-lata button{
    background-color: var(--verde);
    color: var(--roxoClaro);
    font-family: 'VersosTest-Black';
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 20px 40px;
    border-radius: 50px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
.box-lata a:hover button{
    background-color: var(--branco);
    color: var(--roxoClaro);
}




/* PRATICIDADE */

.praticidade {
    background-color: #7b15c9;
    padding: 20vh 0 0 0;
}

.lata-praticidade {
    flex-direction: column;
    text-align: center;
    color: white;
    font-family: 'VersosTest-Semibold';
    font-size: 27px;
}

.praticidade .box {
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
    margin: 80px 100px;
}

.praticidade .box~.es {
    justify-content: flex-end;
    align-items: center;
    gap: 60px;
    margin: 80px 100px;
}

.praticidade .box~.es h3 {
    text-align: right;
}

.praticidade .box~.es p {
    text-align: right;
}

.praticidade .box h3 {
    font-size: 36px;
    font-family: 'VersosTest-Black';
    color: #59DEE2;
    margin-bottom: 20px;
    line-height: 1.2;
}

.praticidade .box p {
    font-family: 'VersosTest-regular';
    font-size: 20px;
    color: white;
    line-height: 1.2;
}

.banner-video {
    width: 100%;
}

.mais {
    padding: 200px 0;
}

.mais p {
    font-family: 'VersosTest-SemiBold';
    color: white;
    font-size: 36px;
    text-align: center;
}

.mais .de {
    text-align: left;
    margin-left: 100px;
}

.mais h3 {
    font-family: 'VersosTest-Black';
    color: white;
    font-size: 80px;
    margin-left: -34px;
}

.contador {
    justify-content: center;
    align-items: center;
}

.mais h2 {
    font-family: 'VersosTest-Black';
    color: var(--amareloEscuro);
    font-size: 290px;
}

.lata-cadabra {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lata-cadabra {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lata {
    position: sticky;
}

.lata .cortada {
    margin-bottom: -4px;
}

#chamada {
    display: block;
    width: 60%;
    margin: 0 auto;
    margin-bottom: -80px;
}

.lata .seta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseSeta 1.5s infinite alternate ease-in-out;
}


@keyframes pulseSeta {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05) translate(0%, 40%);
    }
}
/* PARCEIROS */

.parceiros {
    padding: 0 0 200px;
}

.parceiros h2 {
    font-family: 'VersosTest-Black';
    font-size: 36px;
    margin-top: 100px;
}

.parceiros p {
    font-size: 20px;
    font-family: 'VersosTest-Regular';
    margin-bottom: 25px;
}

.iniciativa {
    place-self: center;
    padding: 80px 0;
}

.iniciativa img {
    max-width: 80%;
}

.sub {
    display: flex;
}

.logos-fabricantes {
    display: flex;
    gap: 1px;
}

.logos-fabricantes a {
    transition: transform 0.3s ease-in-out;
}

.logos-fabricantes a:hover {
    transform: scale(1.01);
}

.fabricantes img {
    width: 250px;
    height: 120px;
    
}

.fabricantes img {
    transition: transform 0.3s ease-in-out;
}

.fabricantes img:hover {
    transform: scale(1.02);
}

.iniciativa img {
    transition: transform 0.3s ease-in-out;
}

.iniciativa img:hover {
    transform: scale(1.01);
}



/* FOOTER */

footer {
    background-color: #7b15c9;
    padding: 20vh 0;
    font-family: 'VersosTest-Regular';
    color: white;
}

.siga {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid white;
}

.siga p {
    font-size: 18px;
    color: #59DEE2;
    margin-bottom: 16px;
    font-family: 'VersosTest-SemiBold';
}

.siga .redes-sociais {
    display: flex;
    gap: 15px;
    margin-bottom: 16px;
    align-items: center;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    min-height: 120px;
}

.info h3 {
    color: #59DEE2;
    font-family: 'VersosTest-SemiBold';
}

.dados {
    display: flex;
    gap: 2%;
    align-items: flex-start;
}

.dados h3 {
    font-size: 18px;
}


.dados p, .dados a {
    font-size: 14px;
    color: white;
}

.info .bold {
    font-family: 'VersosTest-SemiBold';
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
}
.desktop-hidden{
    display: none;
}