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;
    }
}