:root{

}
/* destacados */
/*div contenedor completo */
	.vitrinas{
		background: var(--vitrina-destacado-fondo);
		width: 100%;
		max-width: 1000px;
		overflow: hidden;
		display: block;
		/*box-sizing: border-box;*/
	}

/*section */
	.destacado{
	    width: 100%;
	    overflow: hidden;
	    position: relative;
	    min-width: 0;
	}

/*div del titulo del modulo*/
	.destacado__cate{
		width: 100%;
		display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 20px;
	    background: var(--vitrina-destacado-fondo-titulo);
	    color: var(--vitrina-destacado-color);
	    font-size: var(--vitrina-destacado-titulo-font-size);
	    font-family: var(--vitrina-destacado-titulo-font-family);
	}

/*carrucel*/
	.destacado__slider-wrapper {
	    position: relative; /* Para que las flechas floten respecto a esto */
	    width: 100%;
	    display: flex;
	    align-items: center;
	}

/*botones carrucel*/
	.destacado__btn {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    background: var(--vitrina-btn-carrucel-bg);
	    border: var(--vitrina-btn-carrucel-border);
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	    cursor: pointer;
	    z-index: 10;
	    font-size: 20px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    box-shadow: var(--vitrina-btn-carrucel-shadow);
	}
	.destacado__btn:hover{
		background: var(--vitrina-btn-carrucel-bg-hover);
	}

	.prev { left: 5px; }
	.next { right: 5px; }

/*contenedor dentro del carrucel para las card*/
	.destacado__container {
		display: flex;
	    flex-wrap: nowrap;
	    overflow-x: auto;  /* El scroll ocurre AQUÍ adentro */
	    width: 100%;
	    gap: 15px;
	    padding: 20px 10px;
	    scroll-behavior: smooth;
	    -webkit-overflow-scrolling: touch;
	    box-sizing: border-box;
	}
	.destacado__container::-webkit-scrollbar {
	    display: none;
	}
/*card*/
	.destacado__card {
	    flex: 0 0 auto;
	    padding: 15px;
	    text-align: center;
	    background: var(--vitrina-card-bg);
	    width: 200px; /* Mantenemos tu ancho estándar */
	    height: 280px; /* Un poco más de alto para dar aire */
	    border-radius: var(--vitrina-card-radius);
	    border: var(--vitrina-card-border);
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between; /* Empuja el botón siempre al fondo */
	    transition: all 0.3s ease;
	}

	.destacado__card:hover {
	    transform: translateY(-5px);
	    box-shadow: var(--vitrina-card-shadow);
	    border: var(--vitrina-card-border-hover);
	}

	/* Contenedor de imagen para que todas midan igual */
	.destacado__conte-card-image {
	    width: 100%;
	    height: 150px; /* Altura fija para uniformidad */
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 10px;
	}

	.destacado__card-image {
	    max-width: 100%;
	    max-height: 100%;
	    object-fit: contain; /* Mantiene la proporción sin estirar */
	    transition: transform 0.5s ease;
	}

	.destacado__card:hover .destacado__card-image {
	    transform: scale(1.05); /* Zoom suave a la foto al hacer hover */
	}

/* Título del producto: limitar a 2 líneas para que no se descuadre */
	.destacado__card-name {
	    font-weight: 600;
	    font-size: 15px;
	    margin: 10px 0;
	    color: #333;
	    height: 40px; /* Altura fija para alinear todas las cards */
	    display: -webkit-box;
	    -webkit-line-clamp: 2; /* Corta el texto a 2 líneas con puntos suspensivos */
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	}

	/* Botón "Ver más" más estilizado */
	.destacado__btn-mas {
	    width: 100%;
	    height: 38px;
	    background: var(--vitrina-btn-bg);
	    color: var(--vitrina-btn-text);
	    font-weight: bold;
	    font-size: 12px;
	    text-transform: uppercase;
	    letter-spacing: 0.5px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: var(--vitrina-btn-radius);
	    transition: background 0.3s;
	}

	.destacado__btn-mas:hover {
	    background: var(--vitrina-btn-hover);
	    cursor: pointer;
	}

/*movil*/
	@media (max-width: 720px) {
	    .destacado__btn {
	        width: 30px;
	        height: 30px;
	        font-size: 14px;
	    }
	    .destacado__card {
	        width: 170px; /* Un pelín más pequeñas ayuda a que se vea la siguiente card cortada */
	    }
	    .destacado__cate{
	    	/*font-size: var(--vitrina-titulo-720);*/
	    }
	}

	@media (max-width: 400px){
		.destacado__cate{
	    	/*font-size: var(--vitrina-titulo-400);*/
	    }


	}

	@media (max-width: 366px){
		.destacado__cate{
	    	/*font-size: var(--vitrina-titulo-366);*/
	    }

	}