@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: Inconsolata;
    src: url(Inconsolata-Light.ttf);
}

@font-face {
    font-family: Chivo;
    src: url(Chivo-Light.ttf);
}

p {
    font-weight: 300;
}

#content-Section-Detalle {
    display: flex;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
    color: black;
    padding: 0 7vw;
}

    #content-Section-Detalle > img {
        width: 33%;
        margin: auto 0;
    }

    #content-Section-Detalle h4 {
        margin: 1.5vw 0 1vw 0;
        font-weight: 400;
    }

.content-Section-Text p {
    margin: 0;
}

.tabla-Productos-Titulos {
    color: white;
    background-color: black;
}

tr {
    height: 1.5vw;
}

td {
    font-size: 0.82vw;
    border-right: 2px solid white;
    text-align: center;
}

.content-Barra {
    position: absolute;
    width: 100%;
}

.content-Flecha {
    width: 100%;
    z-index: 10;
    height: 30px;
    object-fit: contain;
    position: relative;
    bottom: 5vh;
}

.content-Section-Text {
    margin: 0;
    width: 36.7%;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-Section-Text-Title {
    font-size: 2vw;
    letter-spacing: -2px;
    word-spacing: -2px;
    font-weight: 300;
    margin: 1.315vw 0 0.6vw 0;
    font-family: Inconsolata;
}

.content-Section-Detalles-Vistas {
    display: flex;
    flex-direction: row;
    width: 33%;
}

    .content-Section-Detalles-Vistas img {
        width: 50%;
        margin-top: auto;
    }

.content-Section-Filter {
    background-color: white;
    background-position: center;
    color: black;
    height: 8vw;
    padding: 0 30%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

    .content-Section-Filter img {
        width: 5vw;
        filter: grayscale(1) invert(1);
    }

    .content-Section-Filter > a {
        width: 7vw;
        height: 100%;
        text-align: center;
        cursor: pointer;
        opacity: 0.5;
        font-size: 0.75vw;
    }

        .content-Section-Filter > a:visited {
            opacity: 1;
            color: black;
        }

        .content-Section-Filter > a:hover {
            cursor: pointer;
            opacity: 1;
        }

.p-detalle {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
    margin: 0;
    height: 3.5vw;
    padding: 1vw 7vw;
}

    .p-detalle img {
        width: 1.5vw;
        margin-left: 15px;
    }

@media only screen and (max-width: 768px) {

    h4 {
        font-size: 17px;
        margin: 4vh 0 2vh 0;
        text-align: center;
    }

    #content-Section-Title {
        height: 12vw;
        padding: 2.2vw 7vw;
    }

    #content-Section-Detalle {
        flex-direction: column;
    }

        #content-Section-Detalle p {
            font-size: 12px;
            font-weight: 200;
            text-align: center;
            margin: 10px 0 30px 0;
        }

    .content-Section-Text {
        width: 100%;
        padding: 0 7vw;
    }

        .content-Section-Text img {
            width: 100%;
        }

    .p-detalle {
        height: 10vh;
        padding: 3vh 7vw;
        text-align: center;
        font-size: 16px;
    }

        .p-detalle img {
            width: 4vh;
        }


    td {
        font-size: 12px;
    }

    .content-Section-Detalles-Vistas {
        display: none;
    }

    .content-Section-Filter {
        height: 28vw;
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }

        .content-Section-Filter img {
            width: 17vw;
        }

        .content-Section-Filter > a {
            width: 24vw;
            height: 100%;
            text-align: center;
            cursor: pointer;
            opacity: 0.5;
            font-size: 10px;
            margin: 0;
            color: black;
        }

            .content-Section-Filter > a:visited {
                opacity: 1;
            }

            .content-Section-Filter > a:hover {
                cursor: pointer;
                opacity: 1;
            }
}