@import url('https://fonts.googleapis.com/css2?family=Moulpali&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:wght@300..700&display=swap');
@import url(/styles/colores.css);


* {
    font-family: 'Oswald', sans-serif;
}

section {
    margin: 0;
    min-height: 100vh;
    padding: 0.3rem .5rem;
}

h1 {
    font-weight: 400;
    font-size: 1.8rem;
}

.detalle-container {
    position: relative;
    display: flex;

    width: 100%;
    height: 90rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1rem;
    border: .1rem solid var(--textcolor);
    padding: 0;
    overflow: hidden;
}

.img-container {
    width: 55%;
    height: 100%;
    position: relative;

}

.info-container {
    width: 45%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1000;
    right: 0;
}

.info-container .info {
    width: 100%;
    align-items: center;
    display: block;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(.5rem);
    border-radius: 3rem;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -80%);
    padding: 1rem .5rem;
    height: auto;
    border: .1rem solid var(--textcolor);

}

.info-container h1 {
    font-weight: 400;
    font-size: 2.8rem;
    text-align: center;
    color: var(--darkcolor);
    flex-wrap: wrap;
}


.info-container ul li {
    font-size: 2.1rem;
    text-align: left;
    position: relative;
    left: 1%;
    color: var(--darkcolor);
    list-style: inside;
    word-break: break-word;
    white-space: break-word;

}

.info-container .img-info {
    margin: 0;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    display: grid;
    grid-template-columns: 48% 48%;
    column-gap: .5rem;
    padding: 0;
    width: 100%;
    overflow: hidden;
    z-index: 20;
    align-content: center;
    justify-content: center;

}

.info-container .img-info img {
    width: 100%;
    height: 100%;
    max-height: 45rem;
    object-fit: cover;

    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border-radius: 2rem;
    transition: .3s ease;
    z-index: 20;
    cursor: pointer;
}

/*---------------------------------------------------------------------------------------*/

.marca-container {
    position: relative;
    display: flex;
    top: 1%;
    left: 1%;
    align-items: left;
    text-align: left;
}

.marca-container img {
    width: 30%;
    position: absolute;
    background: var(--whitecolor);
    border-radius: 2rem;
    padding-left: 0;

    z-index: 2000;
    /*box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
}

.marca-container h2 {
    background: var(--whitecolor);
    color: var(--textcolor);
    border-radius: 1rem;
    height: 10%;
    left: 1rem;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
    font-size: 3rem;
    opacity: 0;
}

.img-swiper {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    overflow: hidden;
}

.img-box {
    position: absolute;
    width: 100%;
    display: flex;

}

.img-box .img-slide {

    width: 100%;
    height: 100%;
    overflow: visible;
    text-align: center;
    padding: 1rem;
    position: relative;
}

.img-container .img-slide img {
    width: 60%;
    padding: 0;
    object-fit: cover;
    border-radius: 3rem;
    transition: 1.25s ease;
    cursor: pointer;
    -webkit-transition: all .9s ease;
    /* Safari y Chrome */
    -moz-transition: all .9s ease;
    /* Firefox */
    -o-transition: all .9s ease;
    /* IE 9 */
    -ms-transition: all .9s ease;
    /* Opera */
}



.img-swiper {
    overflow: visible;
}

.img-swiper .swiper-button-next {
    right: 6rem;

    position: absolute;
    color: var(--whitecolor);
}

.img-swiper .swiper-button-prev {
    left: 6rem;
    position: absolute;
    color: var(--whitecolor);
}

/*.img-swiper .swiper-pagination {
    position: fixed;
    bottom: 50rem;
}*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


.img-zoom-lens {

    position: absolute;
    
    /*set the size of the lens:*/
    width: 80px;
    height: 80px;
    
}

.img-zoom-result {
    /*set the size of the result div:*/
    width: 50%;
    height: 80%;
    position: absolute;
    left: 80%;
    bottom: -15%;
    z-index: 3000;
    display: none;
    border-radius: 10%;

    
}

.visible {
    display: inline-block;
}

/*------------------------------------------------------------------------------------------------*/

.detalle-producto .mas_info-container {
    position: relative;
    display: flex;
    width: 100%;
    top: 1rem;
    margin-bottom: 2rem;
}

.detalle-producto .specs-container {
    position: relative;
    display: block;
    width: 50%;

}

.specs-container .specs-header {
    display: flex;
    width: 100%;
    position: relative;
    justify-content: space-between;
    transition: .5s ease;
    border-radius: 3rem;
    padding-left: 2rem;
    border: solid .2rem var(--textcolor);

}

.specs-container .specs-header:hover {

    transition: .2s ease;
    cursor: pointer;

}

.specs-container .specs-header h1 {
    font-size: 2.2rem;
    padding-top: .8rem;
    position: relative;
    font-weight: 450;
    color: var(--textcolor);
}

.specs-container .specs-header i {
    font-size: 5rem;
    color: var(--textcolor);
    position: relative;
    transition: .5s ease;
}

.specs-container .specs-content {
    position: relative;
    transition: .5s ease;
}

.specs-container .specs {
    width: 98%;
    display: flex;
    padding-right: 2rem;
    padding-left: 2rem;
    justify-content: space-between;
    height: 5.5rem;
    border-bottom: .2rem solid var(--plata);
    align-items: center;
}

.specs-container .specs h1 {
    font-size: 2rem;
    font-weight: 600;
    word-break: break-word;
    white-space: break-word;
}

.specs-container .specs h2 {
    font-size: 2rem;
    color: var(--textcolor);


}

.ocultar {
    display: none;

}

.active {
    opacity: 1;
}

.rotacion {
    transform: rotate(180deg);
    transition: .3s ease;
}

/*Backgrounds personalizados*/

.bg_truper {
    background: url(/src/Marcas/TRUPER_portada.jpg);
}

.bg_fiero {
    background: url(/src/Marcas/FIERO_portada.jpg);
}

.bg_foset {
    background: url(/src/Marcas/FOSET_portada.jpg);
}

.bg_hermex {
    background: url(/src/Marcas/HRMEX_portada.jpg);
}

.bg_klintek {
    background: url(/src/Marcas/KLINTEK_portada.jpg);
}

.bg_volteck {
    background: url(/src/Marcas/VOLTECK_portada.jpg);
}

.bg_pretul {
    background: url(/src/Marcas/PRETUL.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: fill;
}

.bg_yale {
    background: url(/src/Marcas/YALE.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg_rugo {
    background: url(/src/Marcas/RUGO.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg_truper,
.bg_klintek,
.bg_foset,
.bg_hermex,
.bg_volteck,
.bg_fiero {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*backgrounds para encabezados de productos según marca*/
.hermex {
    background: var(--rojo);

}

.yale {
    background: var(--amarillopretul);

}

.volteck {
    background: var(--azulvolteck);

}

.fiero {
    background: var(--rojo);

}

.truper {
    background: var(--naranjatruper);

}

.pretul {
    background: var(--textcolor);

}

.klintek {
    background: var(--verdeklintek);

}

.foset {
    background: var(--azulfoset);

}

.rugo {
    background: var(--azulrugo);

}



/*Diseño responsive para FT de productos*/

@media(max-width:1600px) {

    .detalle-container {
        height: 78rem;
    }

    .info-container h1 {
        font-size: 2.8rem;
    }

    .info-container ul li {
        font-size: 1.9rem;
    }

    .info-container .img-info {
        max-height: 45rem;
    }



    .marca-container h2 {
        font-size: 2.8rem;
    }

    .specs-container .specs-header h1 {
        font-size: 2rem;
    }

    .specs-container .specs h1 {
        font-size: 1.8rem;
    }

    .specs-container .specs h2 {
        font-size: 1.8rem;
    }

}

@media(max-width:1440px) {
    .detalle-container {
        height: 75rem;
    }

    .info-container h1 {
        font-size: 2.5rem;
    }


    .info-container ul li {
        font-size: 1.7rem;
    }

}

@media (max-width:1250px) {

    .info-container .info {
        padding: 1rem 2rem;
    }

    .detalle-container {
        height: 73rem;
    }

    .marca-container img {
        width: 30%;
    }

    .info-container h1 {
        font-size: 2.5rem;
    }


    .info-container ul li {
        font-size: 1.7rem;

    }

    .specs-container .specs-header h1 {
        font-size: 2rem;
        padding: auto;
    }

    .specs-container .specs h1 {
        font-size: 1.9rem;

    }

    .specs-container .specs h2 {
        font-size: 1.9rem;

    }
}

@media (max-width:1024px) {
    .detalle-container {
        height: 70rem;
    }

    .marca-container h2 {
        font-size: 2.5rem;
    }

    .info-container .info {
        width: 99%;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -80%);
        padding: 1rem;
    }

    .info-container h1 {
        font-size: 2rem;
    }


    .info-container ul li {
        font-size: 1.7rem;

    }

    .info-container .img-info {
        overflow: visible;

    }

    .specs-container .specs-header h1 {
        font-size: 1.9rem;
        top: 50%;
        transform: translateY(-15%);
        font-weight: 450;
    }

    

    .specs-container .specs h1 {
        font-size: 1.7rem;
    }

    .specs-container .specs h2 {
        font-size: 1.7rem;
    }

    .specs-container .specs-header i {
        font-size: 3.5rem;
    }
}

@media (max-width:980px) {
    .detalle-container {
        
        display: block;
        top: 2rem;
        height: 160rem;

    }

    .img-container {
        
        width: 100%;
        height: 60%;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
        
    }

    .img-container .img-slide img {
        width: 70%;
    }

    .marca-container {

        top: 1%;
    }

    .img-zoom-result {
        border: .5rem solid #d4d4d4;
        /*set the size of the result div:*/
        width: 50%;
        height: 70%;
        position: absolute;
        left: 50%;
        top: 135%;
        transform: translate(-50%, -50%);
        z-index: 3000;
        display: none;
        border-radius: 10%;
    }

    .info-container {
        width: 100%;
        height: max-content;
        bottom: 0;
        top: 12%;
        transform: translateY(-50%);
        padding: 0;
        display: block;
        
    }

    .info-container .info {
        top: 1%;
        left: 50%;
        transform: translate(-50%);
        padding: 1rem 2rem;
        height: 100%;

    }

    .info-container h1 {
        font-weight: 500;
        font-size: 2.2rem;
    }

    .info-container ul li {
        font-size: 1.9rem;
    }

    .info-container .img-info {
        margin: 0;
        position: relative;
        display: grid;
        grid-template-columns: 45% 45%;
        column-gap: 1rem;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1%;
        top: 10rem;
        height: 100%;
        }

    .info-container .img-info img {
        width: 100%;
        height: 100%;
        max-height: 45rem;
        object-fit: cover;

    }

    .detalle-producto .mas_info-container {

        display: block;
        width: 100%;
        top: 3rem;
    }

    .detalle-producto .specs-container {
        position: relative;
        display: block;
        width: 100%;
        bottom: 2rem;
        
        margin-top: 2rem;
    }

    .detalle-producto .specs-container h1{
        font-size: 2.1rem;
    }

    .specs-container .specs h1,
    .specs-container .specs h2 {
        font-size: 1.7rem;
    }

    .bg_truper {
        background: url(/src/Marcas/TRUPER_portada_vertical.jpg);
    }

    .bg_fiero {
        background: url(/src/Marcas/FIERO_portada_vertical.jpg);
    }

    .bg_foset {
        background: url(/src/Marcas/FOSET_portada_vertical.jpg);
    }

    .bg_hermex {
        background: url(/src/Marcas/HRMEX_portada_vertical.jpg);
    }

    .bg_klintek {
        background: url(/src/Marcas/KLINTEK_portada_vertical.jpg);
    }

    .bg_volteck {
        background: url(/src/Marcas/VOLTECK_portada_vertical.jpg);
    }

    .bg_truper,
    .bg_klintek,
    .bg_foset,
    .bg_hermex,
    .bg_volteck,
    .bg_fiero {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }
}

/* @media (max-width:768px) {
    .detalle-container {

        display: block;
        top: 5rem;
        height: 120rem;

    }

    .img-container {
        width: 100%;
        height: 50%;
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;

    }

    .img-container .img-slide img {
        width: 68%;
    }

    .marca-container {

        top: 1%;
    }

    .img-zoom-result {
        border: .5rem solid #d4d4d4;
        /*set the size of the result div:*/
        /* width: 50%;
        height: 70%;
        position: absolute;
        left: 50%;
        top: 135%;
        transform: translate(-50%, -50%);
        z-index: 3000;
        display: none;
        border-radius: 10%;
    }

    .info-container {
        width: 100%;

        bottom: 0;
        padding: 0;
        display: grid;
        grid-template-rows: 2fr auto minmax(10%, 50%);

    }

    .info-container .info {
        top: 1%;
        left: 50%;
        transform: translate(-50%);
        padding: 1rem 2rem;
        height: 50%;

    }

    .info-container h1 {
        font-weight: 500;
        font-size: 2rem;
    }

    .info-container ul li {
        font-size: 1.5rem;
    }

    .info-container .img-info {
        margin: 0;
        position: relative;
        display: grid;
        grid-template-columns: 45% 45%;
        column-gap: 1rem;
        left: 50%;
        transform: translateX(-45%);
        top: 1%;
    }

    .info-container .img-info img {
        width: 100%;
        height: 100%;
        max-height: 45rem;
        object-fit: cover;

    }

    .detalle-producto .mas_info-container {

        display: block;
        width: 100%;
        top: 6rem;
    }

    .detalle-producto .specs-container {
        position: relative;
        display: block;
        width: 100%;
        bottom: 2rem;
        padding-top: 2rem;
    }

    .specs-container .specs h1,
    .specs-container .specs h2 {
        font-size: 1.4rem;
    }

    .bg_truper {
        background: url(/src/Marcas/TRUPER_portada_vertical.jpg);
    }

    .bg_fiero {
        background: url(/src/Marcas/FIERO_portada_vertical.jpg);
    }

    .bg_foset {
        background: url(/src/Marcas/FOSET_portada_vertical.jpg);
    }

    .bg_hermex {
        background: url(/src/Marcas/HRMEX_portada_vertical.jpg);
    }

    .bg_klintek {
        background: url(/src/Marcas/KLINTEK_portada_vertical.jpg);
    }

    .bg_volteck {
        background: url(/src/Marcas/VOLTECK_portada_vertical.jpg);
    }

    .bg_truper,
    .bg_klintek,
    .bg_foset,
    .bg_hermex,
    .bg_volteck,
    .bg_fiero {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }
}  */

@media (max-width:600px) {

    

    .detalle-container {
        top: 0;
        height: 155rem;
        
    }

    .detalle-producto .specs-container {
        padding: 1rem .5rem;
    }

    .specs-container .specs {
        
        height: 8rem;
        
    }

}

@media (max-width:500px) {

    section {

        padding: 0;
        margin: 0;
        overflow: hidden;       
        position: relative;
    }

    .marca-container img {
        width: 38%;
    }

    .detalle-container {
        width: 100%;
        height: 140rem;
        overflow-wrap: break-word;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        border: none;

    }

    .info-container h1 {
        font-weight: 500;
        font-size: 2rem;
    }

    .info-container ul li {
        font-size: 1.7rem;
    }


    .img-container .img-slide img {
        width: 90%;
        object-fit: cover;
        border-radius: 2rem;
        transition: 1.25s ease;
        -webkit-transition: all .9s ease;
        /* Safari y Chrome */
        -moz-transition: all .9s ease;
        /* Firefox */
        -o-transition: all .9s ease;
        /* IE 9 */
        -ms-transition: all .9s ease;
        /* Opera */
    }

    .img-swiper .swiper-button-next {
        right: -.5rem;
        position: absolute;
        color: var(--whitecolor);
    }

    .img-swiper .swiper-button-prev {
        left: -.5rem;
        position: absolute;
        color: var(--whitecolor);
    }

    .info-container .info {
        padding: 1rem 2.5rem;
        height: auto
    }

    .detalle-producto .specs-container {
        padding: .5rem;
        
    }

    .detalle-producto .specs-container .specs {
        height: 10rem;
        padding: 0;
    }

    .specs-container .specs-header h1 {
        font-size: 2rem;
        
    }

    .specs-container .specs h1,
    .specs-container .specs h2 {
        font-size: 1.5rem;
    }

}

@media (max-width:425px) {
    .detalle-container {
        position: relative;
        display: block;
        top: 0;
        width: 100%;
        height: 125rem;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        padding: 0;
        
    }

    

    .info-container .img-info {
        
        top: 5rem;
        height: 100%;
        }
}

@media (max-width:375px) {

    .marca-container img {
        width: 48%;
    }

    .info-container h1 {
        font-weight: 500;
        font-size: 1.8rem;
    }

    .info-container ul li {
        font-size: 1.5rem;
    }

    
    

    .detalle-producto .specs-container {
        
        position: relative;
        margin: 0;
    }

    .specs-container .specs-header h1 {
        font-size: 1.8rem;
        
    }

    .specs-container .specs h1,
    .specs-container .specs h2 {
        font-size: 1.4rem;
    }

    /* .detalle-producto .specs-container {
        position: relative;
        display: block;
        width: 100%;
        bottom: 2rem;
        
        margin-top: 2rem;
    } */
}