.w-100 { width: 100%; height: auto;}
.mejores-marcas-hotspots.image-hotspot-container {
    position:relative;
    display:inline-block;
    width:100%;
    font-family: 'Lato', sans-serif;
}
.mejores-marcas-hotspots.image-hotspot-container img {
    width:100%;
    height:auto;
    display:block;
}
.mejores-marcas-hotspots .hotspot {
    position:absolute;
    transform:translate(-50%,-50%);
}
.mejores-marcas-hotspots .hotspot .dot {
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    -webkit-tap-highlight-color:transparent;
}
.mejores-marcas-hotspots.image-hotspot-container {
    position:relative;
    display:inline-block;
    width:100%;
}
.mejores-marcas-hotspots.image-hotspot-container img {
    width:100%;
    height:auto;
    display:block;
}
.mejores-marcas-hotspots .hotspot {
    position:absolute;
    transform:translate(-50%,-50%);
}
.mejores-marcas-hotspots .hotspot .dot {
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    -webkit-tap-highlight-color:transparent;
}
.mejores-marcas-hotspots .hotspot .dot::before {
    content:"";
    width:20px;
    height:20px;
    background:#222;
    border-radius:50%;
    box-shadow:1px 3px 7px 5px rgb(0 0 0 30%);
    position:absolute;
}
.mejores-marcas-hotspots .hotspot .dot::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(#0072ce, #0072ce) center / 10px 2px no-repeat, linear-gradient(#0072ce, #0072ce) center / 2px 10px no-repeat;
}
.mejores-marcas-hotspots .tooltip { 
    position:absolute;
    bottom:90%;
    left:50%;
    transform:translateX(-50%) translateY(10px);
    background:rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    padding:10px;
    font-weight:400;
    font-size: 14px;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
    white-space:normal;
    width:140px;
    text-align:left;
    z-index:10;
    border-radius:8px;
    border-left: solid 4px #0072ce;
    text-rendering: geometricPrecision;
}
.mejores-marcas-hotspots .hotspot .tooltip.active { 
    opacity:1!important;
    visibility:visible!important; 
    transform:translateX(-50%) translateY(0)!important;
}
.mejores-marcas-hotspots .tooltip a{
    color:inherit!important;
    text-decoration:none;
}
.mejores-marcas-hotspots .tooltip-title{
    font-weight:800;
}
.mejores-marcas-hotspots .tooltip-price{
    font-weight:600;
    color:#fff;
    font-size: 18px;
}
.mejores-marcas-hotspots .tooltip-link {
    font-weight: normal;
    font-size: 12px;
    padding: 2px 6px;
    background-color: #0072ce;
    display: inline-block;
    border-radius: 4px;
    margin-top: 4px;
}

.prodCard {}
.prodCard .marca {font-weight:800; font-size: 12px;}
.prodCard .nombre {font-weight: normal; line-height: 120%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.prodCard .price .tool {font-weight: normal;}
.prodCard .price .oferta {font-size: 18px;}
.prodCard .price .normal {font-weight: normal;}
.prodCard .price .normal-solo {font-size: 18px;}
.ico-opu {
    background-image: url("https://images.contentstack.io/v3/assets/blt6a203fe6c6a9b6dd/blt2969fa7cd1730fdb/69dd549038de869a461e741d/ico-opu-md.png");
    background-repeat: no-repeat;
    width: 64px;
    height: 32px;
    position: absolute;
    top: -24px;
    right: 8px;
}
.ico-amb { display: none;}