﻿#articuloIndex {
    display:flex;
    flex-direction:column;
    grid-gap:50px;
}


#articuloIndex  h1 {
    margin-bottom:20px;
    text-align:left;
}
#articuloIndex .wrpImgCont {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    grid-gap:40px;
    max-width:100%;
    width:100%;
}


#articuloIndex .wrpArticulo {
    position:relative;
}


#articuloIndex .wrpImagenes {
    flex-grow:1;
    max-width:50%;
    display:flex;
    flex-direction:column;
}


#articuloIndex .wrpContenido {
    min-width:45%;
    max-width:45%; 
}




#articuloIndex .wrpImagenes .imagen {
    height    :450px;
    min-height:450px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:10px 0 20px 0;
}

#articuloIndex .wrpImagenes .imagen.cargando {
    background-image: url(../../img/layout/cargando.svg);
    background-position:center center;
    background-size:100px;
    background-repeat:no-repeat;
}


#articuloIndex .wrpImagenes .imagen img {
    max-width:100%;
    max-height:100%;    
}




#articuloIndex .wrpImagenes .lstImagenes {
    display:flex;
    max-width:100%;
    overflow-x:auto;    
    padding: 0 10px 10px 10px;
}


#articuloIndex .wrpImagenes .lstImagenes ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: nowrap;
    grid-gap:10px;
    
}

#articuloIndex .wrpImagenes .lstImagenes li {
    cursor:pointer;
    width:100px;
    height:100px;
    background-color:white;
    border:1px solid var(--productBox_titulo);
    border-radius:10px;
    padding:5px;
    opacity:0.5;
    display:flex;
    align-items: center;
    justify-content: center;
}

#articuloIndex .wrpImagenes .lstImagenes li.selected,
#articuloIndex .wrpImagenes .lstImagenes li:hover {
    opacity:1;
}

#articuloIndex .wrpImagenes .lstImagenes li img {
    max-width:100%;
    max-height:100%;
}

#articuloIndex .wrpImagenes .lstImagenes .thumbVideo {
    background-image:url(../../img/layout/play.png);
    background-size:64px;
    background-repeat:no-repeat;
    height:64px;
    width :64px;

}


#articuloIndex  .wrpSkuPrecio {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 20px 0;
}


#articuloIndex .wrpSkuPrecio  .sku {
    font-size:14px;
}


#articuloIndex .wrpSkuPrecio .precio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#articuloIndex .wrpSkuPrecio .pvp {
    color:var(--productBox_pvp);
    font-weight:bolder;
    font-size:24px;
}

#articuloIndex .wrpSkuPrecio .pvpAnterior {
    color: var(--productBox_pvpanterior);
    font-size: 16px;
    font-weight: bold;
    text-decoration: line-through;
}



#articuloIndex .buyBox {
    display: flex;
    padding: 20px 0;
    flex-direction: column;
}

#articuloIndex .noDisponible {
    text-align:center;
    margin: 0px 20px 20px 20px;
    font-weight:bold;
    font-size:20px;
    color:var(--fichaArticulo_textoNoDisponible);
}

#articuloIndex .buyBox form {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    grid-gap:30px;
    justify-content: space-evenly;
}

#articuloIndex .buyBox .btnComprar {
    cursor:pointer;
    border:none;
    padding:5px 10px;    
    color:var(--boton_comprar_texto);
    background-color:var(--boton_comprar_fondo);
    font-weight:normal;
    font-size:15px;
    border-radius:5px;
    background-repeat:no-repeat;
    background-image:url(../../img/layout/btnCarrito.png);
    background-position:10px center;
    background-size:24px;
    padding-left:50px;
    margin:0;
}


#articuloIndex .buyBox .portesGratisBarra {
    margin-top:20px;
}



#articuloIndex .liberadoresStress .widgetBanner {    
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-around;
    grid-gap:10px;

    border:2px solid var(--liberadorStress_borde);
    border-left:none;
    border-right:none;
    padding:5px 0px;
    margin-bottom:20px;
}


#articuloIndex .liberadoresStress .widgetBanner .bannerItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
}

#articuloIndex .liberadoresStress .widgetBanner .bannerItem .texto {
    font-weight:bold;
    color:var(--liberadorStress_texto);
    font-size:14px;
}
#articuloIndex .liberadoresStress .widgetBanner .bannerItem img {
    max-height:40px;
}



#articuloIndex .wrpMarcasLicenciasFamilias {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    grid-gap: 20px;    
}

#articuloIndex .wrpMarcasLicencias,
#articuloIndex .wrpFamilias {
    display:flex;
    flex-direction:column;
    height:100%;
    flex-grow:1;
    flex-basis:50%;
    padding-top:20px;
    
}

#articuloIndex .wrpMarcasLicencias .titulo, 
#articuloIndex .wrpFamilias .titulo {
    font-size:16px;
    border-bottom-width:2px;
}
#articuloIndex .wrpMarcasLicencias .titulo::after,
#articuloIndex .wrpFamilias .titulo::after {
    height:2px;
    bottom:-2px;
}

#articuloIndex .wrpMarcasLicencias ul,
#articuloIndex .wrpFamilias ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    grid-gap: 10px;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-around;
}
#articuloIndex .wrpMarcasLicencias li,
#articuloIndex .wrpFamilias li {
    display:flex;
    align-items: center;
    justify-content: center;
    min-height:120px;
}
    
#articuloIndex .wrpMarcasLicencias a, 
#articuloIndex .wrpFamilias a{
    display: flex;
    width: 150px;
    min-height: 50px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position:relative;
}
#articuloIndex .wrpMarcasLicencias .nombre {
    display:none;
}

#articuloIndex .wrpMarcasLicencias .wrpImagen,
#articuloIndex .wrpFamilias .wrpImagen {
    height:100px;
    max-height:100%;
    max-width:100%;
}

#articuloIndex .wrpFamilias .wrpImagen {
    width:100px;
}

#articuloIndex .wrpMarcasLicencias img,
#articuloIndex .wrpFamilias img {
    max-height:100%;
    max-width:100%;
}

#articuloIndex .wrpFamilias .nombre {
    text-align:center;
    width:100%;
    color:var(--colorTexto);
    display:none;
}

#articuloIndex .wrpFamilias .sinImagen .nombre {
    display: flex;
    flex-grow: 1;
    font-weight: bold;
    border: 2px solid var(--colorTexto);
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    line-height: 16px;
    font-size: 14px;
    padding: 5px 10px;
}

#articuloIndex .wrpFamilias .sinImagen .nombre:hover {
    background-color:var(--colorTexto);
    color:white;
}


#articuloIndex .wrpFamilias .conImagen .nombre {
    display:block;
    font-weight:bold;
}

#articuloIndex .wrpFamilias .familiaItem.conImagen {
}






#articuloIndex .wrpEtiquetas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#articuloIndex .wrpEtiquetas span {
    font-size: 15px;
}


#articuloIndex .tituloSeccion {
    width:auto;
    padding:0;
}


#articuloIndex .descripcion {
        margin-bottom:20px;
    }


#articuloIndex  .atributos,
#articuloIndex  .atributosGpsr,
#articuloIndex  .descripcionLarga,
#articuloIndex  .articulosRelacionados
{
    background-color:var(--fichaArticulo_fondoPanel);
    padding:20px 30px;
    border-radius:20px;
}

#articuloIndex  .articulosRelacionados:not(.articulosRelacionados:has(h2)) {
  display: none;
}


#articuloIndex  .atributos .titulo,
#articuloIndex  .atributosGpsr .titulo
 {
    margin:0;
}
#articuloIndex  .atributos ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

#articuloIndex  .atributosGpsr ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    clear:both;
}

#articuloIndex  .atributos li {
    display: flex;
    flex-direction: column;
    flex-basis:25%;
    margin-top:20px;
    padding-right:5px;
}

#articuloIndex  .atributosGpsr li {
    display: flex;
    flex-direction: column;
    /*flex-basis:25%;*/
    margin-top:20px;
    padding-right:5px;
}




#articuloIndex  .atributos .nombre, 
#articuloIndex  .atributosGpsr .nombre {
    font-size:13px;
}

#articuloIndex  .atributos .valor, 
#articuloIndex  .atributosGpsr .valor{
    font-weight:bold;
    font-size:15px;
}

#articuloIndex  .atributosGpsr li.jtAtributo_241973 span {
    display:none;
}

#articuloIndex .atributosGpsr li.jtAtributo_241973.valorBit_True {
    height:50px;
    width:117px;
    background-image:url(../../img/layout/marcadoCE.jpg);
    background-repeat:no-repeat;
    border-radius:10px;
}

@media (max-width: 900px) {
    #articuloIndex .wrpImgCont {
        flex-direction:column;
        grid-gap:10px;
    }

    #articuloIndex .wrpImagenes {
        max-width:100%;
        width:100%;
    }

    #articuloIndex .wrpImagenes .imagen {
        min-height:400px;
        height:400px;
    }



    #articuloIndex .wrpContenido {
        max-width:unset;
        width:100%;
    }

    
    #footer {
        padding-bottom:150px;
    }

    #articuloIndex .buyBox {
        position:fixed;
        flex-direction:column-reverse;
        right:0;
        left:0;
        background-color:white;
        bottom:0;
        z-index:50;
        padding:10px;
        align-items: center;
        box-shadow: 0px -3px 15px 0px rgba(0,0,0,0.24);
    }

    #articuloIndex .atributos, 
    #articuloIndex .atributosGpsr, 
    #articuloIndex .descripcionLarga, 
    #articuloIndex .articulosRelacionados {
        padding:10px 10px;
    }


    #articuloIndex .liberadoresStress .widgetBanner .bannerItem {
       flex-direction:column;
       text-align:center;
       height:auto;
    }
    #articuloIndex .liberadoresStress .widgetBanner .bannerItem img {
        max-height:32px;
    }

    #articuloIndex .buyBox .portesGratisBarra {
        margin-top:0px;
        font-size:12px;
        width:100%;
    }

    #articuloIndex .buyBox form {
        margin-top:10px;
        width:100%;
        grid-gap:10px;
    }


    #articuloIndex  .atributos li,
    #articuloIndex  .atributosGpsr li
     {
        display: flex;
        flex-grow:1;
        flex-shrink:1;
        flex-direction: column;
        flex-basis:50%;
        margin-top:10px;
    }

    
}