/* ――――――――― Banner principal ――――――――― */
/* Descripción: Estilos para el banner principal de la página */ 

.Banner{
    background-image: url(../assets/about/background.jpg);
    height: 40vh;
    margin-top: 5rem;
 
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: flex-start;
    border-radius: 0rem 0rem 18.1875rem 0rem;
 }
 
 .Banner-wrapper{
     display: flex;
     flex-flow:column nowrap;
     justify-content: center;
     align-items: flex-start;
     padding: 5rem 0;
     gap: 2.5rem;
 
     color: white;
 
     width: 92%;
     margin: auto;
 }
 
 .Banner-h2{
     font-size: var( --h2-size);
     font-weight: 500;
 }

 .Banner-p{
    font-size: var( --p-size);
    line-height: 1.875rem;
    width: 80%;
}




 /* ――――――――― Sección Servicios ――――――――― */
/* Descripción: Estilos para la sección de Servicios donde se describen las ventajas para entrenador y club */ 

.Servicios{
    padding: 2.5rem;
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* .Main-section{
    margin-top: 6.25rem;
} */

.Servicios-h3{
    color: var(--color-primary);
    font-size: var(--h3-size);
    text-align: center;
    font-weight: 500;
    padding: 5rem 0 0 0;
}

.Servicios-p{
    text-align: center;
    width: 90%;
    font-size: var(--p-size);
}

.Servicios-articles{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    margin: 3rem auto;
}

.Servicios-article-coach, .Servicios-article-club{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    background-color: #F7F7F7;
}

.Servicios-article{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    background-color: #F7F7F7;
    padding: 5rem;
}

.Servicios-register-button{
    white-space: nowrap;
    background-color: var(--color-primary);
    padding: 1rem 3rem;
    border-radius: 10rem;
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
                
    color: var(--color-white); 
    font-weight: 600;
    width: auto;
}

.Servicios-article-img{
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
}

.Servicios-article-mobile{
    display: none;
}

.Servicios-article-text{
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}

.Servicios-article-h4{
    font-size: var(--h4-size);
    color: var(--color-primary);
    font-weight: 600;
}

.Servicios-article-ul{
    font-size: var(--p-size);
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
}

.Servicios-article-li{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.Article-check-icon{
    width: 2rem;
    height: 2rem; 
}

.Servicios-article-li p {
    width: 100%; 
}

/* .Servicios-article-li::before{
    content: "";
    display: inline-block;
    width: 20px; 
    height: 20px; 
    background-image: url('../assets/services/checklist.svg'); 
    background-size: cover;
    margin-right: 5px;
} */

b{
    font-weight: 500;
}

/* ――――――――― Sección Servicios ――――――――― */
 




/* ――――――――― Sección Consultoria ――――――――― */
/* Descripción: Estilos para la sección de servicios de consultoria */ 

.Consultoria{
    padding: 2.5rem;
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.Consultoria-h3{
    color: var(--color-primary);
    font-size: var(--h3-size);
    text-align: center;
    font-weight: 500;
}

.Consultoria-p{
    text-align: center;
    width: 90%;
    font-size: var(--p-size);
}

.Consultoria-articles{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    width: 100%;
    margin: 3rem auto;
}

.Consultoria-article{
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
    border-radius: 3.75rem;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 33%;
    min-height: 45vh;
    background-color: #F7F7F7;
}

.Consultoria-article:hover{
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: all ease 1s;
}

.Consultoria-article:hover .Consultoria-article-h4{
    color: var(--color-secondary);
    transition: all ease 1s;
}


.Consultoria-article:hover .Consultoria-svg{
    fill: var(--color-secondary);
    transition: all ease 1s;
 }

.Consultoria-article-h4{
    text-align: center;
    font-size: var(--h4-size);
    color: var(--color-primary);
    font-weight: 600;
}

.Consultoria-article-p{
    font-size: var(--p-size);
    text-align: center;
    width: 90%;
    margin-bottom: 2rem;
}

.Consultoria-article-svg{
    padding: 20px;
    object-fit: contain;
    margin-top: .625rem;
    fill: var(--color-primary);
}

.Consultoria-svg{
    height: 10vh;
}

/* ――――――――― Sección Consultoria ――――――――― */






/* ――――――――― Sección Contact ――――――――― */
/* Descripción: Estilos para la sección de contacto de la página */ 

.Contact{
    background-color: #F7F7F7;
    padding: 3.125rem;
    padding: 2.5rem;
}

.Contact-wrapper{
    width: 85%;
    margin: auto;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    gap: 6.25rem;
}

.Contact-text{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 3.125rem;
}

.Contact-h5{
    font-size: var(--h5-size);
}

.Contact-button{
    white-space: nowrap;
    background-color: var(--color-primary);
    padding: 1rem 3rem;
    border-radius: 10rem;
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
                
    color: var(--color-white); 
    font-weight: 600;
    width: auto;
}

.Contact-button:hover{
    background-color: var(--color-secondary);
    color: var(--color-primary);
    transition: all 1s ease;
    font-weight: 600;
}

.Contact-button:active{
    white-space: nowrap;
    background-color: aqua ;
    padding: 1rem 2rem;
    border-radius: 10rem;
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
                
    color: var(--color-white);
}

.Contact-icon{
    width: 12rem;
    height: 12rem;
}

/* ――――――――― Sección Contact ――――――――― */




/* ――――――――― Sección FAQs ――――――――― */
/* Descripción: Estilos para la sección de FAQs */ 

.Faqs{
    padding: 2.5rem;
    width: 90%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2.5rem;
}

.Faqs-h3{
    font-size: var(--h4-size);
    font-weight: 500;
    color: var(--color-primary);
}

.Faqs-ul{
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.Faqs-li{
    padding: 1rem 0;
    width: 100%;
    border-bottom: 1px solid var(--color-primary);

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
}

.Faqs-li p{
    width: 100%;
}

.Faqs-question{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.Faqs-question-p{
    font-size: var(--p-size);
    font-weight: 400;
}

.Faqs-svg-up{
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    display: none;
}

.Faqs-svg-up.isActive{
    display: block;
}

.Faqs-svg-down{
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
}

.Faqs-svg-down.Hide{
    display: none;
}

.Faqs-answer{
    font-weight: 400;
    line-height: 1.5;
    display: none;
}

.Faqs-answer.isActive{
    display: block;
}

/* ――――――――― Sección FAQs ――――――――― */





/* ――――――――― Media Querys - 1200px――――――――― */
/* Descripción: Estilos para tablet */

@media (max-width:1200px) {

    .Banner-h2{
        font-size: var( --h3-size);
        font-weight: 500;
        width: 90%;
    }

    .Banner-wrapper{
        top: 20%;
    }
    

    .Servicios-article{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        background-color: #F7F7F7;
        padding: 2rem;
    }

    .Servicios-article-coach, .Servicios-article-club{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        background-color: #F7F7F7;
        padding: 2rem;
        width: 100%;
    }

    .Servicios-article-text{
        align-items: center;
    }

    .Servicios-article-ul{
        gap: 2rem;
    }

    .Servicios-register-button{
        margin-bottom: 2rem;
    }

    .Servicios-article-mobile{
        display: block;
        width: 100%;
        order: 2;
        border-radius: 30px;
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
    }

    .Servicios-article-img{
        display: none;
    }

    .Consultoria-articles{
        gap: 4rem;
        width: 100%;
    }

    .Consultoria-article{
       min-height: auto;
    }
    
}


/* ――――――――― Media Querys - 1200px――――――――― */




/* ――――――――― Media Querys - 600px――――――――― */
/* Descripción: Estilos para tablet */

@media (max-width:800px) {
    
    .Banner{
        border-radius: 0rem 0rem 10rem 0rem;
        height: auto;
     }

    .Banner-h2{
        font-size: var( --h3-size);
        font-weight: 500;
        width: 90%;
    }

    .Servicios{
        width: 100%;
        padding: 0;
    }

    .Servicios-article{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        background-color: #F7F7F7;
        padding: 2rem;
    }

    .Servicios-article-coach, .Servicios-article-club{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        background-color: #F7F7F7;
        padding: 0rem;
        width: 100%;
    }

    .Servicios-register-button{
        margin: 2rem 0;
    }

    .Consultoria{
        width: 100%;
    }

    .Consultoria-articles{
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 5rem;
        width: 100%;
        margin: 3rem auto;
    }

    .Consultoria-article{
        width: 100%;
        min-height: 55vh;
        
    }

    .Contact-icon{
        display: none;
    }

    .Faqs-question{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 1.8rem;
        width: 100%;
    }
    
}