.wp-block-hacce-wrapper{
    width: 100%;
}

.fake-a{
    cursor: pointer;
}

.has-primary-color{
    color: var(--color-primary);
}

.hero-home{
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;

    h1{
        font-size: 60px;
        max-width: 800px;
        font-style: italic;

        @media(max-width: 575px) {
            font-size: 40px;
        }
    }

    h2{
        font-size: 22px;
        max-width: 550px;
        font-weight: 500;
        line-height: 30px;

        @media(max-width: 575px) {
            font-size: 20px;
            line-height: 26px;
        }
    }
}

.wrapper-banner-logo-texto{

    p{
        max-width: 950px;
        margin: 0 auto;
        font-weight: 800;
        color: #000;
        line-height: 24px;

        strong{
            font-weight: 800;
            color: var(--color-primary);
        }
    }
}

.wrapper-cards-products{
    @media(max-width: 575px) {
        h2.wp-block-heading{
            text-align: center;
        }
    }
}

.container-cards-products{
    display: flex;
    flex-wrap: wrap;

    .product-card-item{
        flex: 0 0 25%;
        margin-bottom: 30px;
        
        @media(max-width: 1399px){
            flex: 0 0 33.33%;
        }

        @media(max-width: 991px){
            flex: 0 0 50%;
        }

        @media(max-width: 575px){
            flex: 0 0 100%;
        }
    }
}

.product-card-item{
    transition: transform 0.4s ease;

    .inner{
        width: 90%;
        margin: 0 auto;
        border-radius: 30px;
        border: 1px solid #80808033;
        overflow: hidden;
        box-shadow: 0px 3px 8px 1px #00000012;
        transition: box-shadow 0.4s ease;

        &:hover{
            box-shadow: 0px 3px 8px 1px #00000036;
        }

        .product-image{
            width: 100%;
            
            img{}
        }

        .product-title{
            padding: 15px 30px;
            text-align: center;            

            a{                
                font-size: 20px;
                line-height: 24px;
                font-weight: 700;
                color: #000;
                text-transform: uppercase;
            }
            
        }

        .product-texto-libre{
            padding: 15px 30px;
            padding-top: 0px;
            font-size: 18px;
            line-height: 22px;
            font-weight: 600;
            text-align: center;
            color: #000;
        }

        .product-link{
            padding: 15px 30px;
            padding-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;

            a{
                color: var(--color-primary);
                padding: 5px 20px;
                border: 1px solid var(--color-primary);
                font-size: 15px;
            }
        }
    }

    &:hover{
        transform: scale(1.1);
    }
}

.wrapper-asi-te-preparamos{
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;

    h2{

        strong{
            font-style: italic;
        }
    }

    p{
        max-width: 850px;
        margin: 0 auto;
        font-weight: 700;
        padding: 0 15px;

        strong{
            color: var(--color-primary);
        }
    }

    .container-items-ico{
        max-width: 990px;
        margin: 0 auto;
        padding: 0 15px;

        .item-ico{
            max-width: 100%;
            font-size: 16px;
            font-weight: 400;
            color: #000;
            margin-bottom: 5px;
            background-image: url(./images/check-red.svg);
            background-position: left 6px;
            background-repeat: no-repeat;
            background-size: 14px;
            padding-left: 25px;

            strong{
                color: #000;
                font-weight: 800;
            }
        }
    }

    .grafico{
        text-align: center;
    }
}

.wrapper-opiniones{

    h3{
        font-weight: 700;

        strong{
            color: var(--color-primary);
        }
    }

    p{
        max-width: 850px;
        margin: 0 auto;
        font-weight: 700;
        padding: 0 15px;

        strong{
            color: var(--color-primary);
        }
    }

    .container-opiniones{
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 100px;

        > .container > .inner{
            max-width: 750px;
            margin: 0 auto;

            .opinion{
                background-color: #f7f7f7;
                border-radius: 20px;
                border: 2px solid #2B6044;
                overflow: hidden;
                
                .row{
                    display: flex;
                    align-items: center;

                    .quotes-red{
                        max-width: 38px;
                        margin-bottom: 20px;
                    }
                
                    .comentario{
                        font-size: 15px;
                        font-weight: 600;
                        color: #000;
                        margin-bottom: 20px;
                    }

                    .nombre{
                        font-size: 15px;
                        font-weight: 600;
                        color: #000;
                        margin-bottom: 5px;
                    }

                    .detalles{
                        font-size: 13px;
                        font-weight: 400;
                        color: var(--color-primary);
                        font-style: italic;
                        margin-bottom: 15px;
                    }

                    .contenido{
                        padding: 40px 50px;
                    }
                }
            }

            .owl-nav{
                position: absolute;
                top: 20%;
                left: 0;
                right: 0;
            
                .owl-prev,
                .owl-next{
                    position: absolute;
                    height: 100px;
                    color: #000;
                    background: none;
                    border: none;
                    z-index: 100;
                    font-size: 35px;
                    transition: .3s all;
                    width: 40px;
                }

                .owl-prev:hover,
                .owl-next:hover{
                    background-color: transparent;
                    color: #000;
                    opacity: .5;
                }

                .owl-prev{
                    left: -50px;
                }

                .owl-next{
                    right: -50px;
                }

                .owl-dots{
                    margin-top: 40px !important;
                
                    .owl-dot span{
                        background-color: #000;
                        border: 2px solid #000;
                        transition: .3s all;
                    }

                    .owl-dot.active span{
                        background: transparent;
                    }

                    .owl-dot:hover span {
                        opacity: .8;
                    }
                }
            }
        }
    }
}

.wrapper-banner-orientador{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    p{
        max-width: 400px;
        margin: 0 auto;
    }
}

.wrapper-empieza-ahora{

    .wp-block-columns{
        background-color: var(--color-primary);
        border-radius: 30px;

        .wp-block-column{

            > .wp-block-hacce-wrapper{
                padding: 30px;

                h3 strong{
                    font-style: italic;
                }

                .item-img-txt{
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;

                    figure{
                        width: 42px;
                        margin-right: 20px;
                    }

                    p{
                        margin-bottom: 0;
                        font-weight: 700;
                    }

                    @media(max-width: 575px) {
                        flex-direction: column;
                        align-items: flex-start;

                        figure{
                            margin-right: unset;
                            margin-bottom: 10px;
                            margin-top: 5px;
                        }
                    }
                }
            }

            .img-der{
                position: relative;
                top: -75px;

                @media(max-width: 781px) {
                    position: unset;
                    top: unset;
                    text-align: center;
                    padding-bottom: 50px;
                }

                @media(max-width: 575px) {
                    padding: 0 20px;
                    padding-bottom: 50px;
                }
            }
        }
    }
}

.wrapper-50-anos{

    h3{
        font-style: italic;
        font-weight: 600;
        color: #000;

        strong{
            color: var(--color-primary);
        }
    }

    p{
        max-width: 920px;
        margin: 0 auto;
        font-weight: 700;
        color: #000;

        strong{
            color: var(--color-primary);
        }
    }

    .grafico-desktop{
        display: block;
        text-align: center;
    }

    .grafico-mobile{
        display: none;
    }

    @media(max-width: 575px) {
        .grafico-desktop{
            display: none;
        }

        .grafico-mobile{
            display: block;
            text-align: center;
        }
    }

    .grafico3{
        text-align: center;
    }

    .container-premios{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .item-premio{
            flex: 0 0 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            margin-bottom: 30px;

            figure{
                text-align: center;
            }

            @media(max-width: 1399px) {
                flex: 0 0 25%;
            }

            @media(max-width: 991px) {
                flex: 0 0 33.33%;
            }

            @media(max-width: 768px) {
                flex: 0 0 50%;
            }
        }
    }
}

.wrapper-contacto{
    border-top: 1px solid #80808038;

    figure{
        text-align: center;
    }

    p{
        max-width: 560px;
        margin: 0 auto;
    }

    .container-form-contacto{
        max-width: 750px;
        margin: 0 auto;
    }
}