@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 /*Configurações Gerais do Site*/

 :root{            
    --preto: rgb(0, 0, 0);
    --branc: rgb(255, 255, 255);
    --cinza: rgb(221, 220, 220);
    --cizec: #F5F5F5;

    --padr1: #24242c;
    --padr2: #166cbc;
   
}

*{margin: 0; border: 0; padding: 0;}

html{font-family: "Ubuntu", sans-serif; letter-spacing: 1px;}

header{background-color: var(--padr1); color: var(--branc); padding: 1%; position: fixed; width: 100%; margin: 0;z-index:1;}

nav{display: block; text-align: center; padding: 5px; font-size: 1.3em; word-spacing: 10px;}

a{text-decoration: none; color: var(--branc); font-weight: bold; word-spacing: 2px;}


.btn-compra{
    display: block;
    width: 160px;
    background-color: green;
    padding: 3px 25px 3px 25px;
    border-radius: 20px;
    padding: auto;
    font-size: 1.2em;
    margin: auto;
    text-align: center;
}
.btn-compra:hover{color: var(--branc); text-shadow: 2px 2px 2px var(--preto); font-size: 1.3em;}

footer{background-color: var(--padr1); color: var(--branc); padding: 1%; text-align: center; font-weight: bold;}

body{background-color: var(--branc);}

main{ 
    background-color: var(--branc); 
    padding: 1%; 
    margin: auto; 
    width: 90%;            
    border-radius: 15px;    
}   

aside{
    background-color: var(--branc); 
    padding: 1%; 
    margin: auto; 
    width: 90%;           
   
}
           
/*Configurações de Títulos Headlines*/

h1{font-size: 2.0em; margin-top: 1%;}
h2{font-size: 1.5em; color:var(--padr2);}
h3{font-size: 1.5em; text-align: center;}
h4{font-size: 1em;}
h1,h2,h3,h4,h5,h6{padding-top: 0.5%; padding-bottom: 0.5%;}

/*Configurações de Imagens*/

img{width: 100%; padding-top: 2%;}

.ofertas{width: 300px; height: 200px; padding: 1%;}

/*Configurações de Parágrafos*/

p{padding-top: 1%; padding-bottom: 1%;}
.catalogo{text-align: center; color: var(--padr2); font-weight: bold;}

/*Configurações de Parágrafos para dispositivos móveis*/

@media(min-width: 320px) and (max-width: 1024px){

    p{padding-top: 3%; padding-bottom: 3%;}

}

/*Divs*/

.separador{margin-top: 8%;}
.separador-conteudo{margin-top: 0.5%;}

/*Configurações de Divs para Mobile*/

@media(min-width: 320px) and (max-width: 1024px){
    .separador{margin-top: 19%;}
    .separador-conteudo{margin-top: 0.5%;}
}

/*Configurações da Grade de Conteúdo - Grids versão Desktop*/

.grid-conteudo{background-color: var(--branc); padding-top: 5%;}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    max-width: 1024px;
    margin: auto;
    gap: 50px;
    padding: auto;
}

.grid div{background-color: var(--branc); text-align: center; padding: 2px;}   

/*Configuração Grid Ofertas*/
.grid-conteudo-ofertas{background-color: var(--cizec);}

.grid-ofertas{
    display: flex; /*altera o tipo de display para flexbox*/
    justify-content: center; /*centraliza horizontalmente*/
    align-items: center; /*centraliza verticalmente*/
    flex-wrap: wrap; /*Faz com que os itens quebrem a linha quando necessário*/
    max-width: 1024px;
    margin: auto;
    gap: 50px;
    padding: auto;
}

.grid div{background-color: var(--branc); text-align: center; padding: 2px;}

/*Configurações de Grids para Mobile*/
@media(min-width: 320px) and (max-width: 820px){

    #grid-conteudo{background-color: var(--branc); padding-top: 35px;}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    max-width: 1024px;
    margin: auto;
    gap: 2px;
}

.grid div{background-color: var(--branc); text-align: center; padding: 3%;}
}

/*Configurações para Botões de Ação*/

button{
    padding: 8px 20px 8px 20px;
    background-color: var(--verde);
    color: var(--branc);
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.3em;
    display: block;
    margin: auto;
    transition: 0.4s ease;
}

button:hover{background: var(--verd2); color: var(--preto);}

.video{
    display: block;
    text-align: center;
    background-color: var(--cizec);
    border-radius: 10px;
    padding: 1%;
}

@media(min-width: 320px) and (max-width: 820px){

    div.video{
        position: relative;
        padding-bottom: 50%;
        background-color: var(--cizec);
        border-radius: 10px;
    }

    div.video > iframe{
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

}

ul{padding-left: 3%; padding-bottom: 15px;}

#wagner{
    width: 300px; 
    height: 300px; 
    border-radius: 100%; 
    background: radial-gradient(var(--padr1),var(--padr1), var(--padr2),var(--cinza), var(--branc), var(--branc), var(--branc));
}

.redes-sociais{width: 40px; height: 40xp;}

#sobre-curso{display: block; margin: auto; background-color: var(--cizec);}

#preco{width: 320px; height: 600px; display: block; margin: auto;}

/*WhatsApp*/

#whats{
    width: 100px;
    height: 50px;
    right: 0;
    bottom: 0;    
    position: fixed;
    text-align: center;
    margin: 6em;
    z-index: 1;    
}

@media(min-width: 320px) and (max-width: 1024px){
    #whats{
        width: 90px;
        height: 40px;
        right: 0;
        bottom: 0;    
        position: fixed;
        text-align: center;
        margin: 6em;
        margin-right: 9px;
        z-index: 1;        
    }
}