body{font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
h2 {font: 2em Arial, Sans-Serif;margin: 0;padding: 0;}
p.noResultado {display: none;}
p.buscadorNoResultado {font-size: large;}
.df-card__pricing {display: none !important;}
.df-branding {display: none !important;}
.df-card__title {font-weight: 500;}
.df-classic .df-panel .df-panel__title:hover {color: white !important;}
@media (min-width: 1300px){
.sin-columnas.Ofertas {width: 1400px !important;}
}
button.adyen-checkout__button.adyen-checkout__button--pay {
background-color: #fb6a12 !important;
}
svg.adyen-checkout__card__cvc__hint.adyen-checkout__card__cvc__hint--back {
margin-left: -13px !important;
}
/* INICIO PARA LAS PAGINAS DE OFERTAS */
ol.listaExplicacion {list-style: circle;}
ol.listaExplicacion > li {font-size: larger;}
@media screen and (max-width: 767px) {
p.textoExplicacion{text-align: justify !IMPORTANT;font-size: 1.2em;line-height: 22px;margin-top: 5px;}
}
/* FIN PARA LAS PAGINAS DE OFERTAS */
.suscripciones {border: 0px !important;}
h1,h2,h3,h4 {font-family: 'Baloo Bhaina 2', cursive;}
p,span,a,label,b,form {font-family: 'Baloo Bhaina 2', cursive;}
button.btn.btn-link.btn-block.text-left.collapsed {font-family: 'Baloo Bhaina 2', cursive;}
button.btn.btn-link.btn-block.text-left {font-family: 'Baloo Bhaina 2', cursive;}
.card-body {font-family: 'Baloo Bhaina 2', cursive;}
h2.products-section-title.text-uppercase.home_secttion_title {font-family: 'Baloo Bhaina 2', cursive;}
.search-izq{font-family: 'Baloo Bhaina 2', cursive;}
.category_name{font-family: 'Baloo Bhaina 2', cursive;}
.breadscrumb{font-family: 'Baloo Bhaina 2', cursive;}
.carritoDesktop{font-family: 'Baloo Bhaina 2', cursive;}
.boton-guardar, .boton-guardar2{font-family: 'Baloo Bhaina 2', cursive;}
input.botonRealizarPedido.botonCarrito{font-family: 'Baloo Bhaina 2', cursive;}
div#pc-lineas-pedido{font-family: 'Baloo Bhaina 2', cursive;}
span.numeroGlobo.numeroGloboSeleccionado {font-family: auto;}
span.numeroGlobo {font-family: auto;}
a.cn_v3_dynamic_element_button{font-family: 'Baloo Bhaina 2', cursive;}
.subcategory-title {text-transform: capitalize;}
input.inputDeshabilitado.botonRealizarPedido.botonCarrito[disabled] {cursor: default;background-color: #e0e0e0;color: #a0a0a0;border: 1px solid #c0c0c0;opacity: 0.6;pointer-events: none;}
/* Contenedor de la imagen con tamaño fijo y centrado */
.image-contrainer {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
margin: 0 auto; /* Centra el contenedor horizontalmente dentro de la columna */
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease; /* Añade la transición del border-radius */
border-radius: 0; /* Inicialmente cuadrado */
}
.image-contrainer img {
width: 100%;
height: 100%;
object-fit: cover; /* Mantener proporciones de la imagen */
transition: border-radius 0.3s ease; /* Suaviza la transición del borde */
}
/* Efecto de la capa oscura y animación */
.overlay {
position: absolute;
top: 100%; /* Inicia fuera del contenedor, en la parte inferior */
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Capa oscura */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(20px); /* Inicia desplazado hacia abajo */
transition: opacity 0.5s ease, transform 0.5s ease, border-radius 0.3s ease; /* Transición suave */
backdrop-filter: blur(5px); /* Añade un blur a la capa */
}
/* Efecto hover en el contenedor */
.image-contrainer:hover {
transform: translateY(-5px); /* Eleva un poco el contenedor al hacer hover */
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra suave en el hover */
border-radius: 50%; /* Cambia el contenedor a circular */
}
/* Efecto hover en la capa oscura */
.image-contrainer:hover .overlay {
opacity: 1; /* Muestra la capa */
top: 0; /* La capa se desliza hacia arriba */
transform: translateY(0); /* Resetea el desplazamiento vertical */
border-radius: 50%; /* Cambia el borde de la capa a circular */
}
.image-contrainer:hover .image-name {
opacity: 1;
transform: translateY(0); /* Resetea el desplazamiento del texto */
}
/* Ajustes del texto dentro del overlay */
.overlay .image-name {
color: #fff; /* Texto completamente blanco */
font-size: 1.8rem; /* Aumenta el tamaño del texto */
font-weight: bold; /* Texto más grueso */
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Texto debajo de la imagen en móvil */
.image-name-mobile {
text-align: center;
font-size: 1.8rem;
margin-top: 8px;
}
/* Ocultar el texto en pantallas más grandes */
@media (min-width: 768px) {
.image-name-mobile {
display: none;
}
}