/* Extraído de views/base.html. Al editar este archivo hay que subir el ?v= del enlace en la plantilla,
si no Cloudflare y el navegador siguen sirviendo la versión anterior (caché de 1 año). */
/* ===== Estilos generales del tema ===== */
.navbar-toggle{
margin-top: 5px;
margin-bottom: 1px;
}
.navbar-brand {
height: 46px;
padding: 0px 0px;
}
/* Clases para la transición hover en imagenes del producto */
.hoverControls {
z-index: 2;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #425aad;
}
.thumbnail-images {
overflow: hidden;
position: relative;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 100%;
}
.thumbnail-images img {
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.thumbnail-images img~img {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.thumbnail-images:hover img {
opacity:0;
visibility: hidden;
}
/* Clases de la tienda */
.thumbnail-images:hover img~img {
opacity: 1;
visibility: visible;
position: absolute;
}
.footerfinal{
background-color: #eef0f8;
padding: 25px 0 15px;
text-align: center;
font-size: 12px;
}
.panel-default>.panel-heading {
color: #4960b0;
background-color: #eef0f8;
border: 0;
}
.panel-group .panel {
border: 0;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #425aad36;
}
.avatar {
height: 70px;
width: 70px;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% auto;
}
.width300{
width: 180px;
background-color: #eef0f8;
border-radius: 50%;
height: 180px;
text-align: center;
}
.chkColor {
border: 4px solid #425aad;
}
/* Color (swatch) sin stock: se apaga y se tacha en diagonal. No toca el borde,
así un color agotado que esté seleccionado conserva el azul de .chkColor y
se sigue distinguiendo. Se marca de entrada desde el render (.sinStockColor)
y también vía JS al cambiar de medida/color (.outStock). */
.outStock,
.sinStockColor {
position: relative;
box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.5);
}
.outStock::after,
.sinStockColor::after {
content: "";
position: absolute;
top: 50%;
left: -2px;
right: -2px;
height: 2px;
margin-top: -1px;
background: #444441;
transform: rotate(45deg);
pointer-events: none;
}
/* Producto sin stock en el color seleccionado: imagen apenas atenuada.
El enlace queda activo a propósito para que el usuario igual entre a la ficha. */
img.outStockLink {
opacity: 0.72;
}
.outStockLink {
cursor: pointer;
}
/* Etiqueta "Agotado" centrada sobre la imagen del producto (se muestra sola
cuando el enlace de la imagen recibe la clase .outStockLink) */
.thumbnail-images > a.outStockLink {
position: relative;
display: block;
}
.thumbnail-images > a.outStockLink::after {
content: "Agotado";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(22, 24, 30, 0.82);
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
padding: 4px 12px;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
z-index: 3;
}
/* Mismo aviso, pero ya en el primer pintado: el color seleccionado (.chkColor)
viene marcado sin stock desde el render, sin esperar a que corra el JS.
Va en reglas aparte a propósito: si el navegador no soporta :has(), solo se
ignora este bloque y el aviso por .outStockLink sigue funcionando igual. */
.thumbnail-images:has(.chkColor.sinStockColor) > a[class*="urlProduct-"] {
position: relative;
display: block;
}
.thumbnail-images:has(.chkColor.sinStockColor) > a[class*="urlProduct-"] img {
opacity: 0.72;
}
.thumbnail-images:has(.chkColor.sinStockColor) > a[class*="urlProduct-"]::after {
content: "Agotado";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(22, 24, 30, 0.82);
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
padding: 4px 12px;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
z-index: 3;
}
.swiper-container-horizontal{
background-color: #eef0f8d1;
padding: 4px!important;
}
.itemColorsEmpty {
background-color: rgb(255 255 255 / 0%);
}
.optionColors {
text-align: center;
padding:0!important;
}
.optionColors > div {
border-radius: 50%;
width: 100%!important;
height: 25px;
cursor: pointer;
border: 1px solid #d2d2d2;
}
.optionColors > div:focus{
border: 1px solid #868686;
}
.breadcrumb{
background-color: #eef0f8;
}
.item-sub {
background-color: #ffffff;
}
/* swiper slider */
.swiper {
width: 100%;
}
.swiper-slide-custom {
text-align: center;
font-size: 8px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
max-width: 25px;
}
.swiper-slide-custom img {
display: block;
height: 100%;
object-fit: cover;
}
.color-four {
background-color: #ffffff;
}
.row .item{
padding-right: 5px;
padding-left: 5px;
}
.carousel-inner{
margin-bottom: 10px;
}
.thumbnail {
background-color: #eef0f8;
}
.thumbnail .form-control{
margin-top: 10px;
}
.thumbnail .caption{
min-height: 120px;
}
.onecredit{
width: 7px;
height: 7px;
background-color: #00cc00;
display: inline-block;
border-radius: 50%;
}
.modal-dialog{
width: 70%;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
background-color: #383838;
border-color: #383838;
}
.pagination>li>a, .pagination>li>span{
color: #000000;
}
.alert-success {
color: #ffffff;
background-color: #3eb90b;
border-color: #3eb90b;
}
.prghjysth{
text-transform: uppercase;
font-size: 9px;
margin-top: 15px;
text-align: center;
padding: 0 5px;
}
.subcategibox{
background-color: #989898;
padding: 13px 0 3px;
border-radius: 6px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
}
.subcategibox:hover{
background-color: #b7b7b7;
}
.modal-content {
background-color: transparent;
}
.modal-header {
border-bottom: 0px solid #e5e5e5;
}
.thumbnail .lead {
font-size: 14px;
margin-top: 10px;
}
.thumbnail small {
font-size: 80%;
}
.regalofh{
background-color: #eef0f8;
padding: 15px 15px;
margin: 10px 0;
border-radius: 4px;
font-size: 12px;
color: #756e6e;
text-align: left;
}
.cartyug{
background-color: #eef0f8;
padding: 12px 18px;
margin-top: 20px;
border-radius: 4px;
}
.cartyug p{
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #4960b0;
}
.rrtypu{
margin-top: 20px
}
.cartyug .fgrt{
max-width: 400px;
max-height: 25px
}
.prefooter p{
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
margin: 0px 0 0px;
color: #4960b0;
}
.header {
padding: 10px 0px;
background-color: #eef0f8;
}
.searchtyy{
margin-top: 7px
}
.text-prod {
padding: 0px 8px 5px;
}
span.twitter-typeahead .tt-menu, span.twitter-typeahead .tt-dropdown-menu{
font-size: 12px
}
span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .tt-suggestion:hover, span.twitter-typeahead .tt-suggestion:focus{
color: #000;
background-color: #e3e3e3;
}
span.twitter-typeahead .tt-menu, span.twitter-typeahead .tt-dropdown-menu{
border-radius: 0px;
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.175);
box-shadow: 0 0 0 rgba(0,0,0,.175);
}
.form-control:focus {
border-color: #33d446;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(51, 212, 70);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(115, 223, 127);
}
.prefooter .rtlpoem{
margin: 10px auto 25px;
max-width: 800px;
}
.carousel-indicators li{
border: 1px solid #30498c;
}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
top: -2px;
}
.carousel-indicators .active {
background-color: #30498c;
}
.dfgdfgj {
padding-top: 0;
margin: 25px 0 5px;
}
.btn-default:hover {
background-color: #e00000;
border-color: #e00000;
color: #fff;
}
.btn-warning.disabled, .btn-warning.disabled.active, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled], .btn-warning[disabled].active, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning.active, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color: #3c4b7f;
border-color: #3c4b7f;
}
/* Botón de compra sin stock. La clase .sinStockShow la pone el script de la
ficha SOLO cuando el sin-stock es real: el [disabled] a secas también lo usa
el JS del CDN como estado transitorio mientras consulta la combinación
(cambio de medida/color), y ese lapso no debe verse como "sin stock". */
#product-addtocart-button.sinStockShow {
position: relative;
background-color: #d9dbe0 !important;
border-color: #d9dbe0 !important;
color: transparent !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
#product-addtocart-button.sinStockShow::after {
content: "Sin stock disponible";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
color: #8b8e98;
font-size: 15px;
letter-spacing: 1px;
}
/* Mensaje + CTA de WhatsApp: ocultos salvo sin stock confirmado */
.sinStockExtra {
display: none;
}
#product-addtocart-button.sinStockShow ~ .sinStockExtra {
display: block;
}
.sinStockMsg {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 12px 0 0;
font-size: 13px;
color: #5f6470;
line-height: 1.4;
}
.sinStockMsg svg {
flex: 0 0 auto;
margin-top: 1px;
}
.btnWhatsappStock {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
padding: 12px;
border-radius: 8px;
background-color: #25d366;
color: #fff !important;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.btnWhatsappStock:hover {
background-color: #1ebe5b;
color: #fff !important;
}
.merepys {
color: #fff;
}
a {
color: #000000;
}
.btn-group-lg>.btn, .btn-lg{
font-weight: 400;
letter-spacing: 3px;
}
.title-related{
margin-top: 10px;
margin-bottom: 10px;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
}
.product{
background-color: #fff;
padding: 10px 0;
}
.summary {
background-color: #eef0f8;
}
.summary h2 {
font-size: 16px;
text-transform: uppercase;
text-align: center;
}
.panel-title{
font-size: 13px
}
.sfptlyih{
margin-top: 15px;
font-size: 12px;
}
.tyuty{
font-size: 15px;
margin-top: 10px;
}
.item-sub a .image-container{
line-height: 45px;
}
.navbar-default{
background-color: #d8ddee;
}
.navbar-default .navbar-nav>li>a{
border-right: 0px solid #d5d5d5;
font-size: 14px;
text-transform: none;
}
.navbar-default .nuevos{
background-color: #d8ddee;
color: #03457c!important;
font-weight: 700;
}
.navbar-default .outlet{
background-color: #d8ddee;
color: #000!important;
font-weight: 700;
}
.navbar-default .ofertadeldia-nav{
background-color: #d8ddee;
color: #ff0000!important;
font-weight: 700;
}
.product-card h1 {
font-size: 16px;
}
.product-card {
padding: 0px 10px 20px;
margin-top: 0;
}
.group-product {
margin: 15px 0;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background-color: #425aad;
color: #fff;
}
.thumbnail{
margin-bottom: 15px
}
.reteyuj {
font-size: 11px;
margin-bottom: 5px;
line-height: 14px;
min-height: 20px;
}
.thumbnail .btn-primary {
font-size: 11px;
margin-top: 29px;
background-color: #ececec;
border-top: 0;
border-left: 0;
border-right: 0;
border-color: #000;
color: #000;
}
.thumbnail span.label {
width: auto;
height: 25px;
line-height: 20px;
font-size: 11px;
border-radius: 3px;
top: 0;
left: 0;;
}
body {
background-color: #fff;
letter-spacing: 1.1px;
margin-top: 43px;
font-family: "Roboto", sans-serif;
}
.footer {
background-color: #eef0f8;
margin-top: 0;
padding: 5px 0 20px;
margin-bottom: 15px;
}
.footer p{
color: #4960b0;
text-transform: none;
font-size: 14px;
text-transform: uppercase;
}
.footer a {
color: #000;
font-size: 12px;
}
.footer small {
color: #000;
font-size: 12px;
}
/* Iconos tipo Bootstrap Icons dibujados con SVG enmascarado.
No cargamos la fuente de bootstrap-icons (~120 KB) solo por un par de iconos:
la mascara toma el color del enlace con currentColor. */
[class^="bi-"],
[class*=" bi-"] {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.bi-box-arrow-up-right {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E");
opacity: .6;
}
.toprg {
text-align: center;
margin-bottom: 25px;
}
.overlay-blue {
background: rgba(0, 0, 0, 0.79);
}
.trytyu {
padding: 5px 6px 6px 10px;
color: #7b7b7b;
margin-top: 3px;
border-bottom: 4px solid #425aad;
font-size: 11px;
}
.trytyu strong {
font-size: 15;
}
.hpeshi{
padding: 5px 6px 6px 10px;
color: #7b7b7b;
display: inline-block;
margin-top: 3px;
border-bottom: 2px solid #00457c;
font-size: 11px;
}
.btn-warning {
color: #fff;
background-color: #425aad;
border-bottom: 1px solid #3c4b7f;
border-radius: 8px;
font-size: 16px;
}
.btn-warning:hover {
color: #fff;
background-color: #3c4b7f;
border-color: #3c4b7f;
}
.btn-warning.focus, .btn-warning:focus {
color: #fff;
background-color: #3c4b7f;
border-color: #3c4b7f;
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover {
color: #fff;
background-color: #3c4b7f;
border-color: #3c4b7f;
}
.btn-warning.active, .btn-warning:active, .open>.dropdown-toggle.btn-warning {
color: #fff;
background-color: #3c4b7f;
border-color: #3c4b7f;
}
.carousel-control{
width:10%;
}
.zoom {
display:inline-block;
position: relative;
}
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
/*background:url(icon.png);*/
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #000;
}
::selection {
color: #fff;
background: #000;
}
.input-group span.twitter-typeahead:first-child .form-control{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.minis img {
max-width: 80px;
}
.dfphordisco{
padding: 10px;
border: 2px dashed #e26d9b;
border-radius: 1px;
margin: 5px 0px;
background-color: #e26d9b;
color: #fff;
}
.dfphordiscocredito{
padding: 10px;
border: 1px dashed #dadada;
border-radius: 1px;
margin: 5px 0px;
background-color: #f7f7f7;
color: #000;
font-size: 10px;
margin-top: 20px;
}
.dfphordiscocredito strong{
margin-bottom: 5px;
display: block;
font-size: 12px;
}
.descropto-prod {
margin: 10px auto 10px;
}
.dfphordiscocredito a{
text-decoration: underline;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
}
.dfphordiscocredito .htyyuisrt{
margin-top: 20px;
font-size: 7px;
margin-bottom: 0;
}
.item-sub a{
padding-top: 30px;
background-color: #eef0f8;
border-radius: 50%;
height: 150px;
width: 150px;
}
.item-sub a:hover{
background-color: #425aad;
color: #fff;
}
.item-sub a.nuevos{
background-color: #03457c;
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
font-size: 16px;
}
.item-sub a.nuevos:hover{
background-color: #02304f;
}
.item-sub a.outlet{
background-color: #000;
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
font-size: 16px;
}
.item-sub a.outlet:hover{
background-color: #222;
}
.item-sub a.ofertadeldia-nav{
background: #8c0a06;
background: linear-gradient(90deg, rgba(140,10,6,1) 0%, rgba(199,23,24,1) 100%);
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
font-size: 16px;
}
.item-sub a.ofertadeldia-nav:hover{
background: #6e0804;
}
.item-sub a.campaniames{
background: #008acf;
background: linear-gradient(90deg, rgba(0,138,207,1) 0%, rgba(164,227,177,1) 100%);
color: #fff!important;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
font-size: 16px;
}
.item-sub a.campaniames:hover{
background: #006fa0;
}
.item-sub a img{
width: 90%;
}
.landing{
text-align: center;
padding: 5px 0px;
margin-bottom: 0px;
color: #fff;
letter-spacing: 1.1px;
width: 100%;
top: 0px;
background: #EA4DA3;
background: linear-gradient(90deg,rgba(234, 77, 163, 1) 1%, rgba(4, 165, 213, 1) 28%, rgba(89, 164, 38, 1) 65%, rgba(123, 78, 153, 1) 100%);
}
.landing a{
color: #ffffff!important;
}
.landing strong{
display: block;
margin-bottom: 0;
text-transform: uppercase;
}
.landing p{
margin: 0;
}
.cybermondayoutlet{
background-color: #000;
color: #ffffff;
}
.cybermonday{
background: #EA4DA3;
background: linear-gradient(90deg,rgba(234, 77, 163, 1) 1%, rgba(4, 165, 213, 1) 28%, rgba(89, 164, 38, 1) 65%, rgba(123, 78, 153, 1) 100%);
color: #ffffff;
}
.ofertadeldia{
background: #8c0a06;
background: linear-gradient(90deg,rgba(140, 10, 6, 1) 0%, rgba(199, 23, 24, 1) 100%);
color: #ffffff;
}
.ofertadeldia::before{
content: '⏰ ';
}
#beetrack_widget .form-footer{
display: none!important;
}
@media (max-width: 1200px) and (min-width: 768px) {
.trytyu {
font-size: 10px;
padding: 6px 0px 6px 0px;
}
.hpeshi{
font-size: 10px;
padding: 5px 0px 6px 0px;
}
}
@media (max-width: 995px) and (min-width: 768px) {
.navbar-default .navbar-nav>li>a{
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 950px) and (min-width: 768px) {
.thumbnail .caption {
min-height: 150px;
padding: 9px 3px;
}
}
@media (max-width: 991px){
.reteyuj {
min-height: 29px;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.hpeshi{
padding: 5px 3px 6px 3px;
font-size: 10px;
}
.trytyu{
padding: 5px 3px 6px 3px;
font-size: 10px;
}
}
@media (max-width: 768px) {
.header{
padding: 5px 0px;
}
.navbar-nav{
margin: 0px -15px;
}
.thumbnail .caption {
padding: 6px;
min-height: 130px;
}
#product-minis img{
max-width: 70px;
}
#product-minis {
margin: 0px auto!important;
}
.toprg{
padding: 5px 0px;
}
.btn-group-lg>.btn, .btn-lg{
font-size: 15px;
}
.cartyug .fgrt{
max-width: 250px
}
.modal-dialog {
width: 100%;
}
.searchtyy {
margin-top: 7px;
}
.hpeshi{
margin-top: 3px;
text-align: center;
}
.hpeshi span{
display: block;
margin-top: 5px;
}
.trytyu{
margin-top: 3px;
text-align: center;
}
.trytyu span{
display: block;
margin-top: 0px;
}
.searchtyy .input-sm{
height: 36px;
}
.cybermonday{
position:absolute;
}
.landing{
font-size: 11px;
padding: 8px 5px;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 5px;
}
.navbar-toggle .icon-bar {
width: 29px;
height: 3px;
border-radius: 2px;
}
.footer{
text-align: center;
}
.subcategibox{
font-size: 9px
}
.footer p {
border-bottom: 1px solid #3c4b7f33;
padding-bottom: 5px;
margin-bottom: 10px;
margin-top: 20px;
}
.navbar-nav{
text-align: center;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #000000;
text-align: center;
border-bottom: 1px solid #d3d1d1;
font-size: 12px;
padding: 10px 0;
text-transform: uppercase;
background-color: #425aad2b;
}
.navbar-nav .open .dropdown-menu{
padding-top: 0;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a.nuevos{
background-color: #03457c;
color: #fff!important;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a.outlet{
background-color: #000;
color: #fff!important;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a.ofertadeldia-nav{
background: linear-gradient(90deg, rgba(140,10,6,1) 0%, rgba(199,23,24,1) 100%);
color: #fff!important;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a.campaniames{
background: linear-gradient(90deg, rgba(0,138,207,1) 0%, rgba(164,227,177,1) 100%);
color: #fff!important;
}
.thumbnail .btn-primary {
font-size: 8px;
margin-top: 15px;
}
.thumbnail span.label {
height: 22px;
line-height: 18px;
font-size: 9px;
}
.thumbnail .form-control {
font-size: 9px;
padding: 0 0 0 5px;
}
.reteyuj {
font-size: 10px;
min-height: 18px;
}
.thumbnail .lead {
font-size: 15px;
}
.thumbnail small {
display: block;
}
.product{
text-align: center;
}
.text-prod {
padding: 0px 6px;
}
.descropto-prod {
min-height: 245px;
background-color: #fff;
margin: 8px auto 0;
}
.descropto-prod img{
max-width: 84px;
}
}
@media (max-width: 767px) {
.navbar-default .navbar-nav>li>a {
border-right: 2px solid #425aad;
font-size: 14px;
text-transform: uppercase;
padding: 17px 0;
}
}
@media (max-width: 550px){
.prefooter .rtlpoem {
max-width: 300px;
}
.title-related{
margin-top: 15px;
font-size: 13px;
margin-bottom: 12px;
}
.descropto-prod{
min-height: 200px;
}
}
@media (max-width: 400px) {
.reteyuj {
min-height: 29px;
}
}
@media (max-width: 370px) {
.hpeshi{
padding: 5px 0px 6px 0px;
}
.trytyu {
padding: 5px 0px 6px 0px;
}
}
@media (max-width: 340px){
.reteyuj {
font-size: 10px;
min-height: 28px;
}
.subcategibox{
padding: 9px 0 1px;
font-size: 8px;
}
.subcategibox p {
margin: 0 0 8px;
}
}
@media (max-width: 300px) {
.hpeshi{
font-size: 9px;
}
.trytyu {
font-size: 9px;
}
.prefooter .rtlpoem{
max-width: 200px;
}
}
/* ===== Librería CSS/AR-3D mudi.com.co ===== */
.iframeMundi {
width: 100%;
height: 500px;
border: 0px;
z-index: 100;
position: absolute;
background-color: #fff;
}
.modalMundi {
width: 60%;
margin: 0 auto;
color: #000;
background-color: #fff;
}
.modalMundi .modal-header {
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.modalMundi .close {
cursor: pointer;
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
padding: 1rem;
margin: -3rem -1rem -1rem auto;
}
.modalSpamMundi {
font-weight: bold;
}
.divMundi {
width: 150px;
float: right;
margin: 5px;
cursor: pointer;
}
.btnExpMundi {
width: 100%;
position: absolute;
z-index: 100;
margin-top: 5px;
}
.lnkQrMundi {
float: left;
width: 200px;
height: 200px;
}
.iconMundi {
top: 1%;
right: 1%;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
}
@media (max-width: 768px) {
.iframeMundi {
width: 100%;
height: 100%;
border: 0px;
z-index: 100;
position: absolute;
background-color: #fff;
}
.modalMundi {
width: 360px;
margin: 0 auto;
color: #000;
background-color: #fff;
padding: 5px;
overflow: hidden;
}
.modalImgMundi {
text-align: center;
}
.modalMundi .close {
cursor: pointer;
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
padding: 0.5rem;
margin: -5rem -1rem -1rem auto;
}
.modalSpamMundi {
font-size: 1.130rem;
}
.divMundi {
width: 100px;
float: right;
margin: 5px;
cursor: pointer;
}
#divStepsMundi {
text-align: justify;
font-size: 1.125rem;
}
}
/* ===== Pop-up oferta del día (#odd-popup) ===== */
#odd-popup {
position: fixed;
bottom: 24px;
left: 24px;
width: 280px;
background: linear-gradient(135deg, #7a0000 0%, #e00000 60%, #c41a1a 100%);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.28);
z-index: 9999;
overflow: hidden;
transform: translateY(120px);
opacity: 0;
transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
font-family: 'Roboto', sans-serif;
}
#odd-popup.odd-popup-show {
transform: translateY(0);
opacity: 1;
}
#odd-popup::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 10% 50%, rgba(255,180,180,0.12) 0%, transparent 70%);
pointer-events: none;
}
.odd-popup-close {
position: absolute;
top: 6px; right: 8px;
background: rgba(0,0,0,0.2);
border: none;
border-radius: 50%;
color: #fff;
font-size: 1.4rem;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.2s;
z-index: 10;
}
.odd-popup-close:hover { background: rgba(0,0,0,0.4); }
@media (max-width: 768px) {
.odd-popup-close { width: 38px; height: 38px; font-size: 1.6rem; }
}
.odd-popup-inner {
padding: 16px 14px 14px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.odd-popup-top {
display: flex;
align-items: center;
gap: 12px;
}
.odd-popup-clock {
width: 52px;
height: 52px;
flex-shrink: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.odd-popup-texts { flex: 1; }
.odd-popup-tag {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffcccc;
display: block;
margin-bottom: 2px;
}
.odd-popup-title {
font-size: 1.35rem;
font-weight: 900;
color: #fff;
text-transform: uppercase;
line-height: 1;
}
.odd-popup-title span { color: #ffcccc; }
.odd-popup-subtitle {
font-size: 0.6rem;
color: rgba(255,255,255,0.65);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 3px;
display: block;
}
.odd-popup-countdown {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.odd-popup-cd-block {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0,0,0,0.22);
border-radius: 7px;
padding: 5px 10px 4px;
min-width: 52px;
}
.odd-popup-cd-num {
font-size: 1.5rem;
font-weight: 900;
color: #fff;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.odd-popup-cd-unit {
font-size: 0.48rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-top: 2px;
}
.odd-popup-cd-sep {
font-size: 1.2rem;
font-weight: 900;
color: #ffcccc;
margin-bottom: 10px;
animation: odd-popup-blink 1s step-end infinite;
}
@keyframes odd-popup-blink {
0%,100% { opacity: 0.8; }
50% { opacity: 0.15; }
}
.odd-popup-btn {
display: block;
background: #fff;
color: #e00000;
font-family: 'Roboto', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px;
border-radius: 8px;
text-align: center;
text-decoration: none;
transition: background 0.2s, color 0.2s;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.odd-popup-btn:hover {
background: #ffcccc;
color: #7a0000;
text-decoration: none;
}