/*
===============================================================================================================
Váriaveis gerais da página
===============================================================================================================
*/
:root{
    --cor_primaria: #00d9f8;
    --cor_secundaria: #1da3b8;
    --Backgroud: #dfdfdf;
    --CP_darkmode: #213872;
    --CS_darkmode: #0e2555;
    --BKG_darkmode: #303030;
    --transparente: rgba(0, 217, 248, 0.3);
    --transparent_dk: rgba(33, 56, 114, 0.3);

    --Border_radius: 45px;
    --box-shadow: 7px 7px 9px 0px rgba(0, 0, 0, 0.3);
    --borda: 1px #00d9f8 solid;
    --borda-dk: 1px #213872 solid;
}

/*
===============================================================================================================
Estilo geral
===============================================================================================================
*/
h1{
    font-size: 200%;
    margin-top: 5%;
}

.intro-treino-free{
    width: 100%;
    background-color: var(--transparente);
}

.container-tf{
    display: flex;
    justify-content: space-between;
}

.container-tf p{
    max-width: 60%;
    margin: 1%;
    margin-left: 2%;
    font-size: 120%;
}

.container-tf img{
    width: 20%;
    height: 20%;
    margin: 1%;
    border-radius: 2%;
    margin-right: 2%;
}

.nav{
    display: flex;
    justify-content: center;
    margin-bottom: 9%;
    gap: 3%;
    padding-block: 2%;
    padding-bottom: 3%;
}

.navA{
    color: var(--cor_secundaria);
    text-decoration: none;
    font-weight: bold;
    margin-top: 1% ;
    font-size: 150%;
}

.navA:hover{
    color: var(--CS_darkmode);
    transition: 0.3s;
}

.mini-titulo{
    font-weight: bold;
    font-family: 'Montserrat' , sans-serif;
    display: flex;
    justify-content: center;
    font-size: 120%;
    margin-bottom: 0;
}

.container-video{
    display: flex;
    justify-content: space-between;
    background-color: var(--transparente);
}

.treinos{
    width: 80%;
    display: block;
    margin: auto;
    margin-bottom: 3%;
    margin-top: 3%;
}

.container-treinos{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/*
===============================================================================================================
Treino fullbody
===============================================================================================================
*/
#fullbody{
    margin-top: 5%;
}

.fullbody h2{
    font-size: 160%;
}

.fullbody-cards{
    display: flex;
    justify-content: center;
    gap: 3%;
}

#fullbody-card{
    color: var(--CS_darkmode);
    width: 22%;
    border: 2px var(--cor_primaria) solid;
    border-radius: 12px;
    padding: 1%;
    font-size: 95%;
    transition: 0.5s;
}

#fullbody-card:hover{
    width: 24%;
    box-shadow: var(--box-shadow);
    background-color: var(--cor_primaria);
}

.video-fullbody{
    margin-top: 6%;
}

.explicacao-fullbody{
    margin-right: 5%;
    margin-top: 1%;
    margin-left: 2%;
    max-width: 58%;
}

.fullbody-casa{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.fullbody-casa p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

.fullbody-academia{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.fullbody-academia p{
   max-width: 92%;
    margin-left: 4%;
    margin-top: 5%; 
}

li{
    color: var(--CP_darkmode);
    max-width: 96%;
    margin-bottom: 3%;
}

.topo{
    color: var(--cor_primaria);
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    font-size: 130%;
    cursor: pointer;
    margin-top: 4%;
}

.topo:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

/*
===============================================================================================================
Treino de peito
===============================================================================================================
*/
.intro-peito{
    display: flex;
    justify-content: space-between;
    background-color: var(--transparente);
}

.intro-peito img{
    width: 20%;
    margin: 2%;
    margin-left: 4%;
    border-radius: 2%;
}

.intro-peito-texto{
    max-width: 76%;
    margin-right: 5%;
}

.intro-peito-texto h3{
    font-size: 150%;
}

.intro-peito-texto p{
    font-size: 115%;
}

.container-video-peito{
    display: flex;
}

#card-treino-peito{
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 4%;
    background-color: var(--transparente);
    padding-inline: 10%;
    padding-block: 2%;
    font-size: 120%;
    margin-bottom: 4%;
}

.peito-casa{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.peito-casa p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

.peito-academia{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.peito-academia p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

/*
===============================================================================================================
Treino de costas
===============================================================================================================
*/
#costa{
    margin-top: 6%;
}
#costa h2{
    font-size: 200%;
}
.intro-costa{
    width: 60%;
    border: 2px var(--cor_primaria) solid;
    display: block;
    margin: auto;
    border-radius: 15px;
    padding: 12px;
}

.intro-costa p{
    font-size: 120%;
    margin: 0;
}

.video-costas{
    display: flex;
    background-color: var(--transparente);
    justify-content: space-between;
    margin-top: 8%;
}

.video-costa-texto{
    max-width: 50%;
    margin-left: 2%;
}

.video-costa-texto p{
    font-size: 129%;
}

.video-costa-texto h3{
    font-size: 195%;
}

.costa-casa{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.costa-casa p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

.costa-academia{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.costa-academia p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

/*
===============================================================================================================
Treino de perna
===============================================================================================================
*/
#perna{
    margin-top: 5%;
}

#perna h2{
    font-size: 220%;
}

.intro-perna{
    display: block;
    width: 80%;
    border: var(--borda);
    border-radius: 20px;
    margin: auto;
    padding: 1%;
    margin-top: 4%;
}

.intro-perna h3{
    font-size: 180%;
    margin-top: 1%;
}

.intro-perna p{
    font-size: 130%;
}

.video-perna{
    margin-top: 9%;
    display: block;
    width: 90%;
    margin: auto;
}

.video-perna h3{
    font-size: 190%;
}

.container-video-perna{
    display: flex;
    justify-content: center;
    gap: 5%;
}

.video-perna-texto{
    width: 80%;
    border: 2px var(--cor_primaria) solid;
    border-radius: 20px;
    margin: auto;
    margin-top: 4%;
    padding: 1%;
    padding-bottom: 0.4%;
    padding-top: 0.4%;
}

.video-perna-texto p{
    font-size: 120%;
}

.perna-casa{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.perna-casa p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

.perna-academia{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.perna-academia p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

/*
===============================================================================================================
treino de braço
===============================================================================================================
*/
#braco{
    margin-top: 6%;
}

#braco h2{
    font-size: 220%;
}

.intro-braco{
    display: flex;
    justify-content: center;
    gap: 20%;
    background-color: var(--transparente);
}

.texto-introB{
    max-width: 50%;
    font-size: 120%;
}

.texto-introB h3{
    margin-bottom: 1%;
}

.intro-braco img{
    margin: 1%;
    border-radius: 8px;
}

.video-braco{
    display: flex;
    justify-content: center;
    gap: 9%;
    align-items: flex-start;
    margin-top: 6%;
}

.texto-video-braco{
    width: 36%;
    border: 2px var(--cor_primaria) solid;
    border-radius: 20px;
    font-size: 130%;
    padding: 2%;
    padding-bottom: 0%;
    padding-top: 0%;
    margin-top: 1.8%;
}

.braco-casa{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.braco-casa p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

.braco-academia{
    width: 44%;
    border: var(--borda);
    border-radius: 16px;
}

.braco-academia p{
    max-width: 92%;
    margin-left: 4%;
    margin-top: 5%;
}

/*
===============================================================================================================
Iframes
===============================================================================================================
*/
.iframe {
  border-radius: 20px;
  width: 38%; /* ocupa o container */
  max-width: 600px; /* limite opcional */
  aspect-ratio: 16/9; /* mantém proporção 16:9 */
  height: auto;
  margin-left: 5%;
  border: 4px var(--cor_primaria) solid;
  margin-top: 2%;
  margin-bottom: 2%;
}

.iframe-peito{
    border-radius: 20px;
    width: 27%; /* ocupa o container */
    max-width: 600px; /* limite opcional */
    aspect-ratio: 16/9; /* mantém proporção 16:9 */
    height: auto;
    margin-left: 5%;
    border: 4px var(--cor_primaria) solid;
    margin-top: 2%;
    margin-bottom: 2%;
}

#iframe-costas{
    margin-right: 2%;
}

.iframe-braco{
    border-radius: 20px;
    width: 27%; /* ocupa o container */
    max-width: 600px; /* limite opcional */
    aspect-ratio: 16/9; /* mantém proporção 16:9 */
    height: auto;
    margin-left: 5%;
    border: 4px var(--cor_primaria) solid;
    margin-top: 2%;
    margin-bottom: 2%;
}

/*
===============================================================================================================
Ler mais Ler menos
===============================================================================================================
*/
#ler-mais{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais2{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais2:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos2 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos2:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais3{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais3:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos3 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos3:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais4{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais4:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos4 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos4:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais5{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais5:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos5 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos5:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais6{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais6:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos6 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos6:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais7{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais7:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos7 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos7:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais8{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais8:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos8 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos8:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais9{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais9:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos9 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos9:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-mais10{
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-mais10:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

#ler-menos10 {
    color: var(--cor_primaria);
    font-weight: bold;
    font-size: 120%;
    cursor: pointer;
}

#ler-menos10:hover{
    color: var(--CP_darkmode);
    transition: 0.3s;
}

/*
===============================================================================================================
Modo Noturno
===============================================================================================================
*/
body.darkmode .intro-treino-free{
    background-color: var(--transparent_dk);
}

body.darkmode .navA{
    color: var(--CP_darkmode);
}

body.darkmode .navA:hover{
    color: var(--cor_primaria);
}

body.darkmode #fullbody-card{
    background-color: var(--transparent_dk);
    color: white;
}

body.darkmode .container-video{
    background-color: var(--transparent_dk);
}

body.darkmode iframe{
    border-color: var(--CP_darkmode);
}

body.darkmode .fullbody-casa{
    border-color: var(--CP_darkmode);
}

body.darkmode .fullbody-academia{
    border-color: var(--CP_darkmode);
}

body.darkmode li{
    color: var(--cor_primaria);
}

body.darkmode .intro-peito {
    background-color: var(--transparent_dk);
}

body.darkmode #card-treino-peito{
    background-color: var(--transparent_dk);
}

body.darkmode .peito-casa{
    border-color: var(--CP_darkmode);
}

body.darkmode .peito-academia{
    border-color: var(--CP_darkmode);
}

body.darkmode .intro-costa{
    border-color: var(--CP_darkmode);
}

body.darkmode .video-costas{
    background-color: var(--transparent_dk);
}

body.darkmode .costa-casa{
    border-color: var(--CP_darkmode);
}

body.darkmode .costa-academia{
    border-color: var(--CP_darkmode);
}

body.darkmode .intro-perna{
    border-color: var(--CP_darkmode);
}

body.darkmode .video-perna-texto{
    border-color: var(--CP_darkmode);
}

body.darkmode .perna-casa{
    border-color: var(--CP_darkmode);
}

body.darkmode .perna-academia{
    border-color: var(--CP_darkmode);
}

body.darkmode .intro-braco{
    background-color: var(--transparent_dk);
}

body.darkmode .texto-video-braco{
    border-color: var(--CP_darkmode);
}

body.darkmode .braco-academia{
    border-color: var(--CP_darkmode);
}

body.darkmode .braco-casa{
    border-color: var(--CP_darkmode);
}
/*
==============================================================================================================
Responsividade
==============================================================================================================
*/
@media(max-width:1024px){
    .fullbody-cards{
        padding-inline: 2%;
        gap: 2%;
    }
    #fullbody-card{
        width: 36%;
    }
    #fullbody-card:hover{
        width: 40%;
    }
    .video-costas{
        flex-direction: column;
    }
    .video-costa-texto{
        max-width: 90%;
        display: block;
        margin: auto;
    }
    #iframe-costas{
        width: 34%;
        display: block;
        margin: auto;
        margin-bottom: 12px;
    }
    .video-braco{
        flex-direction: column;
    }
    .iframe-braco{
        width: 39%;
        display: block;
        margin: auto;
        margin-bottom: 2%;
    }
    .texto-video-braco{
        width: 39%;
        display: block;
        margin: auto;
    }
}
@media (max-width: 900px){
    .treinos{
        width: 90%;
    }
    #fullbody-card{
        width: 33%;
    }
    #fullbody-card:hover{
        width: 26%;
    }
   .intro-peito img{
    display: none;
   }
   .intro-peito{
    justify-content: center;
   }
   .video-costas{
    display: block;
    padding-bottom: 10px;
   }
   .video-costa-texto{
    display: block;
    max-width: 700px;
    margin: auto;
   }
   #iframe-costas{
    width: 40%;
    display: block;
    margin: auto;
    margin-bottom: 15px;
   }
   .video-braco{
    flex-direction: column;
    justify-content: center;
   }
   .iframe-braco{
    width: 400px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
   }
   .texto-video-braco{
    width: 400px;
    margin: auto;
   }
}
@media (max-width: 769px){
    .intro-treino-free img{
        display: none;
    }
    .intro-treino-free{
        display: block;
        padding: 10px;
    }
    .intro-treino-free p{
        max-width: 80%;
        display: block;
        margin: auto;
    }
    .fullbody-cards{
        width: 95%;
        margin: auto;
    }
    #fullbody-card{
        width: 34%;
    }
    #fullbody-card:hover{
        width: 32%;
    }
    .container-video-peito{
        flex-direction: column;
    }
    .iframe-peito{
        width: 50%;
        display: block;
        margin: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .intro-braco{
        display: flex;
        flex-direction: column;
    }
    .texto-introB{
        max-width: 90%;
        display: block;
        margin: auto;
    }
    .imagem-braco{
        display: none;
    }
    .video-braco{
        display: block;
        width: 90%;
        margin: auto;
    }
    .iframe-braco{
        width: 50%;
        display: block;
        margin: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .texto-video-braco{
        width: 90%;
        display: block;
        margin: auto;
    }
}
@media (max-width: 480px){
    .fullbody-cards{
        display: block;
    }
    #fullbody-card{
        width: 95%;
        display: block;
        margin: 0 auto;
        margin-bottom: 4%;
    }
    #fullbody-card p{
        font-size: 20px;
    }
    #fullbody-card:hover{
        width: 96%;
        transition: 0.3s;
    }
    .container-video{
        display: block;
    }
    .iframe{
        margin-top: 10px;
        width: 300px;
        display: block;
        margin: auto;
        
    }
    .explicacao-fullbody{
        width: 90%;
        display: block;
        margin: auto;
    }
    .explicacao-fullbody p{
        margin-bottom: 10px;
    }
    .container-treinos{
        flex-direction: column;
    }
    .fullbody-casa{
        width: 370px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    .fullbody-academia{
        width: 370px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    .iframe-peito{
        width: 320px;
    }
    .peito-casa{
        width: 370px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    .peito-academia{
        width: 370px;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
    .intro-costa{
        width: 400px;
    }
    .video-costa-texto{
        max-width: 410px;
    }
    .costa-casa{
        width: 370px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    .costa-academia{
        width: 370px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    .intro-perna{
        width: 400px;
    }
    .intro-perna h3{
        font-size: 25px;
    }
    .container-video-perna{
        flex-direction: column;
    }
    #iframe-perna{
        margin-bottom: 8px;
        width: 350px;
    }
    .video-perna-texto{
        width: 400px;
    }
    .perna-academia{
        width: 370px;
        display: block;
        margin: auto;
        margin-top: 10px;
    }
    .perna-casa{
        width: 370px;
        display: block;
        margin: auto;
    }
    .iframe-braco{
        width: 370px;
    }
    .braco-academia{
        width: 370px;
        display: block;
        margin: auto;
        margin-top: 10px;
    }
    .braco-casa{
        width: 370px;
        display: block;
        margin: auto;
    }
}
@media(max-width: 420px){
    #fullbody-card{
        width: 95%;
    }
    .explicacao-fullbody{
        max-width: 92%;
    }
    .fullbody-casa, .fullbody-academia, .peito-casa, .peito-academia, .costa-casa, .costa-academia, .perna-casa, .perna-academia, .braco-casa, .braco-academia{
        width: 90%;
    }
    #card-treino-peito{
        width: 90%;
    }
    .intro-costa{
        width: 90%;
    }
    .intro-perna{
        width: 90%;
    }
    #iframe-perna{
        width: 90%;
    }
    .video-perna-texto{
        width: 90%;
    }
    .iframe-braco{
        width: 90%;
    }
    .nav{
        flex-direction: column;
    }
    .navA{
        display: block;
        margin: auto;
        margin-bottom: 4%;
    }
}
@media (max-width: 322px){
    /*-------Fullbody-------*/
    #fullbody-card{
        width: 296px;
        margin-left: 3px;
    }
    #fullbody-card:hover{
        width: 300px;
        margin-left: -5px;
    }
    .explicacao-fullbody{
        max-width: 290px;
    }
    .treinos{
        margin-top: 12px;
    }
    .fullbody-casa{
        width: 289px;
        margin-left: -1px;
    }
    .fullbody-academia{
        width: 289px;
        margin-left: -1px;
    }
    /*-------Peito-------*/
    #peito h2{
        font-size: 30px;
    }
    .iframe-peito{
        width: 260px;
    }
    #card-treino-peito{
        width: 296px;
        margin-left: 12px;
        margin-top: 10px;
    }
    .peito-casa{
        width: 289px;
        margin-left: -1px;
    }
    .peito-academia{
        width: 289px;
        margin-left: -1px;
    }
    /*-------Costas-------*/
    .intro-costa{
        width: 296px;
        margin: 3px;
        margin-left: 11px;
    }
    .video-costa-texto{
        max-width: 294px;
        display: block;
        margin: auto;
    }
    .costa-casa{
        width: 289px;
        margin-left: -1px;
    }
    .costa-academia{
        width: 289px;
        margin-left: -1px;
    }
    /*-------Perna-------*/
    .intro-perna{
        width: 294px;
    }
    .intro-perna h3{
        font-size: 28px;
    }
    #iframe-perna{
        width: 290px;
        margin-left: -1px;
    }
    .video-perna-texto{
        width: 296px;
        margin-left: -5px;
    }
    .perna-casa{
        width: 289px;
        margin-left: -1px;
    }
    .perna-academia{
        width: 289px;
        margin-left: -1px;
    }
    /*------Braço-------*/
    .iframe-braco{
        width: 295px;
        margin-left: -4px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .braco-casa{
        width: 289px;
        margin-left: -1px;
    }
    .braco-academia{
        width: 289px;
        margin-left: -1px;
    }
    .texto-video-braco{
        width: 296px;
        margin-left: -4px;
    }
}