/*

------------------------------------------------------------------------------------------------

      _  _____ _____  _    _ _____   ____  
     | |/ ____|  __ \| |  | |  __ \ / __ \ 
     | | |    | |  | | |  | | |__) | |  | |
 _   | | |    | |  | | |  | |  _  /| |  | |
| |__| | |____| |__| | |__| | | \ \| |__| |
 \____/ \_____|_____/ \____/|_|  \_\\____/ 
                                           

___  _
\  \//
 \  / 
 / /  
/_/   
      
                                                     ,--,    
       ,--.                             ,----..   ,---.'|    
   ,--/  /|   ,---,       ,-.----.     /   /   \  |   | :    
,---,': / '  '  .' \      \    /  \   /   .     : :   : |    
:   : '/ /  /  ;    '.    ;   :    \ .   /   ;.  \|   ' :    
|   '   ,  :  :       \   |   | .\ :.   ;   /  ` ;;   ; '    
'   |  /   :  |   /\   \  .   : |: |;   |  ; \ ; |'   | |__  
|   ;  ;   |  :  ' ;.   : |   |  \ :|   :  | ; | '|   | :.'| 
:   '   \  |  |  ;/  \   \|   : .  /.   |  ' ' ' :'   :    ; 
|   |    ' '  :  | \  \ ,';   | |  \'   ;  \; /  ||   |  ./  
'   : |.  \|  |  '  '--'  |   | ;\  \\   \  ',  / ;   : ;    
|   | '_\.'|  :  :        :   ' | \.' ;   :    /  |   ,/     
'   : |    |  | ,'        :   : :-'    \   \ .'   '---'      
;   |,'    `--''          |   |.'       `---`                
'---'                     `---'                                 

                                           

------------------------------------------------------------------------------------------------
*/ 




@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap" rel="stylesheet');












/****************************************************************************/
/*-- Cuerpo donde están los productos -- */
/****************************************************************************/

.maque-main {


  
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  margin-top: 80px;
  min-height: 100vh;
  padding: 20px;
}


/****************************************************************************/
 /*-- el que hace Rotar  los productos -- */
/****************************************************************************/



.contenedor-padre {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 380px; /* Ajusta la altura según tus necesidades */
  
    padding: 20px; /* Añade un poco de espacio alrededor del contenido */
   
    position: relative;
}


.iconos {
    position: absolute;
    top: -10px; /* Ajusta la posición vertical */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajusta para centrar completamente */
    
    z-index: 1; /* Aumenta el z-index para asegurarte de que esté por encima de otros elementos */
    pointer-events: auto; /* Asegura que el icono sea clicable */
}

.iconos i {
    margin-left: 10px; /* Ajusta el espaciado entre los iconos */
    font-size: 20px; /* Ajusta el tamaño de los iconos */
}

.iconos a {
     color: rgba(131, 31, 173);
    text-decoration: none; /* Elimina el subrayado del enlace */
     transform: scale(1.05); /* Escala ligeramente el botón */
   
}

.iconos a:hover {
    color: #fff;
      transform: scale(1.05); /* Escala ligeramente el botón */
}




/****************************************************************************/
/*-- Boton de compra y whats apo dentro de las paginas-- */
/****************************************************************************/


.btn-8 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Ajusta el padding para reducir el área clicable */
    font-size: 14px;
    margin-top: 15px;
    transform-origin: center; /* Escala desde el centro */
    border: none; /* Elimina el borde */
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    color: #fff; /* Asegura que el texto sea visible */
    pointer-events: auto; /* Asegura que el botón sea clicable */
    
}

.btn-8 i {
    font-size: 20px; /* Ajusta el tamaño del icono */
    color: inherit; /* Asegura que el color del icono sea el mismo que el del texto */
}





.tarjeta-wrap.activado .producto__contenedor {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


    /*-- Tarjeta donde cada uno de los productos -- */
.producto__contenedor {

  width: 350px;
  height: 450px;
  background-color: rgba(140, 91, 200, 0.1);
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s ease;
  transition: .7s ease;
  box-shadow: 15px 8px 8px rgba(0, 0, 0, 0.3); /* Sombras a la izquierda y abajo */
  border-radius: 15px; /* Ajusta este valor según tu preferencia para redondear las esquinas */
  z-index: 1; /* Asegura que los elementos sean clicables */
    margin-top: 20px; /* Ajusta el margen superior según tu preferencia */

}



.tarjeta-wrap .productos__imagen {

    width: 100%;
     height: auto; /* Mantiene la proporción de la imagen */
    display: flex;
     border-radius: 15px; /* Ajusta este valor según tu preferencia para redondear las esquinas */
    align-items: center;
    justify-content: center;
}


/*-- Imagen de cada uno de los productos -- */
.producto__imagen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.productos__imagen img {
    width: 320px; /* Ajusta el ancho de la imagen al 90% del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Asegura que la imagen mantenga sus proporciones */
     padding: 10px 10px 10px 10px; /* Ajusta el espacio alrededor del contenido */
}






/*-- Medidas de cada uno de los productos -- */
.adelante, .atras {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.adelante {
    width: 100%;
}

.adelante h3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, .4);
    text-align: center;
    border-bottom-left-radius: 15px; /* Redondea la esquina inferior izquierda */
    border-bottom-right-radius: 15px; /* Redondea la esquina inferior derecha */
}

/*-- Al voltear la Tarjeta del producto se ve la Información así: -- */
.atras {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    color: #fff;
    background-color: rgba(140, 91, 200, 0.6);
    border-radius: 15px;
    font-size: 12px;
}




.atras .link {
  border-top: solid 2px #f3f3f3; /* Ajusta el ancho de la línea */
  padding: 10px; /* Ajusta el espacio alrededor del contenido */
  text-align: center; /* Centra el contenido horizontalmente */
  width: 95%; /* Ajusta el ancho del contenedor al 95% */
  margin: 0 auto; /* Centra el contenedor */
}

.producto__contenedor .atras .link a {
  display: block; /* Coloca el enlace en una nueva línea */
  color: #fff;
  font-size: 16px; /* Ajusta el tamaño del texto si es necesario */
}

.producto__contenedor .atras .link h3 {
  margin-top: 10px; /* Espacio entre el enlace y el precio */
  font-size: 24px; /* Ajusta el tamaño del texto si es necesario */
}








/****************************************************************************/
/*-- Cuerpo de la pagina -- */
/****************************************************************************/



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    background-color: #ffdef8;
    font-family: 'Poppins', sans-serif;
}


.container {

    max-width: 1200px;
    margin: 0 auto;

}








  /****************************************************************************/
 /* Inicio del Menu */
   /****************************************************************************/




*{
	margin:0;
	box-sizing: border-box;
}
:before,:after{
	box-sizing: border-box;
}
.container{
	max-width: 1200px;
	margin:auto;
}
.row{
	display: flex;
	flex-wrap: wrap;
}
.v-center{
	align-items: center;
}
ul{
	list-style: none;
	margin:0;
	padding:0;
}
a{
	text-decoration: none;
}

.title{
text-shadow: 0 3px 15px #c103e7, 0 40px 60px #0404df;

}


/****************************************************************************/
/* Header inicial sin degradado */
/****************************************************************************/

.maque-header {
    width: 100%;
    height: 80px; /* Ajusta la altura según tus necesidades */

        visibility:none;
  
}

/****************************************************************************/
/* Header de la página */
/****************************************************************************/

.header {
    display: flex;
    width: 100%;
    position: fixed; /* Fijar el header en la parte superior */
    z-index: 999;
    font-size: 25px;
    background-color: rgba(131, 31, 173);
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    justify-content: space-between; /* Distribuye los elementos a lo largo del eje principal */
    padding: 20px; /* Ajusta el espaciado interno */
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el cambio de color */
}


  .header.scrolled {
    background: linear-gradient(to bottom, rgba(140, 91, 200, 0.6) 0%, rgba(140, 91, 200, 0) 100%);
    color: #fff; /* Cambia el color del texto al hacer scroll */
}

  /****************************************************************************/
 /* Logo del Header la pagina */
   /****************************************************************************/

/* Burger icon by default */
.burger {
    display: none; /* Oculto por defecto en pantallas grandes */
    transition: opacity 0.3s ease; /* Agrega una transición de opacidad */
    opacity: 1; /* Establece la opacidad predeterminada a 1 */
}









  /* Estilos para el Logo */
  .header .item-left {
	margin-right: 40px; /* Ajusta el margen derecho para mayor separación */
  }
  
  .header .logo img {
	margin-top: 0px;
	font-weight: 700;
	text-decoration: none;
	
  }
  
  /****************************************************************************/
 /* Menu de la  pagina */
   /****************************************************************************/
   .header .item-center {
	margin-right: 40px; /* Ajusta el margen derecho para mayor separación */
  }
  
  /****************************************************************************/
 /* Busqyeda, Corazon y Carrito de Compras del Menu la pagina */
   /****************************************************************************/


/* iconos de corazon lupita y carrito */


  .header .item-right {
	display: flex;
	justify-content: flex-end;
	align-items: center; /* Alinea los elementos verticalmente en el centro */
	margin-left: 5px; /* Ajusta el margen izquierdo para mayor separación */
  }
  
 
    /****************************************************************************/
   /* Ajusta para desaparecer las letras del menu a medida que baja el Scroll */
   /****************************************************************************/





    .header .item-left,
  .header .item-center,
  .header .item-right {
	transition: opacity 0.3s ease; /* Agrega una transición de opacidad */
  }


  .header .item-left,
  .header .item-center {
	margin-right: 40px;
  }




  .header .item-left,
  .header .item-center,
  .header .item-right {
	opacity: 1; /* Establece la opacidad predeterminada a 1 */
  }


  .header.scrolled .item-left,
  .header.scrolled .item-center,
  .header.scrolled .item-right {
	opacity: 0; /* Cambia la opacidad a 0 cuando se hace scroll */
  }

  .header.scrolled {
	color: #000000;
}
  
  
  

/* Estilos para hipervinculos de carrito */

/* iconos de corazon lupita y carrito */

.header .item-right a{ 
     text-decoration: none;
     font-size: 16px;
     color:#faf8f5;
     display: inline-block;
	 
     margin-left: 10px;
     transition: color 0.3s ease;
}
.header .menu > ul > li{
	display: inline-block;
	line-height: 50px;
	margin-left: 25px;
}
.header .menu > ul > li > a{
	font-size: 12px;  /* Ajusta tamaño de la letra de los titulos de los Submenus */
	font-weight: 500;
	color:#faf8f5;
	position: relative;
	text-transform: capitalize;
	transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu{
	position: absolute;
	z-index: 500;
	background-color:#f1ecf1;   /* color del menu al abrirse  */
	box-shadow: -2px 2px 70px -25px rgba(231, 4, 212, 0.705);   /* color de la sombra del menu cuando paso el raton  */
	padding: 20px 30px;
	transition: all 0.5s ease;
	margin-top:25px;
	opacity:0;
	visibility: hidden;
}




@media(min-width: 992px){
.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

}


.header .menu > ul > li .sub-menu > ul > li{
	line-height: 1;
}


.header .menu > ul > li .sub-menu > ul > li > a{
	display: inline-block;
	padding: 10px 0;
	font-size: 4px;  /* Ajusta tamaño de la letra de los titulos de los Submenus */
	
	transition: color 0.3s ease;
	text-decoration: none;
	text-transform: capitalize;
}




.header .menu > ul > li .single-column-menu{
	min-width: 280px;
	max-width: 350px;

}

.header .menu > ul > li .single-column-menu > .list-item > ul > li {
	line-height: 1;
	display: block;
  }
  
  .header .menu > ul > li .single-column-menu > .list-item > ul > li > a {
	padding: 10px 0;
	display: inline-block;
	font-size: 15px;
	color: #555555;
	transition: color 0.3s ease;
  }
  

  .header .menu > ul > li:hover > .single-column-menu {
	display: block; /* Muestra el menú al pasar el ratón sobre el elemento padre */
  }
  
  .header .menu > ul > li .single-column-menu a:hover {
	color: hwb(282 12% 32%) !important; /* Usa !important para aumentar la especificidad Color al pasar el mouse por el Menu */
  }
  
  .header .menu > ul > li .single-column-menu {
	position: absolute;
	top: 100%; /* Ajusta según tus necesidades */

	display: flex;
	width: 100%; /* Ajusta el ancho del menú según tus necesidades */


  }
  


 
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li{
   line-height: 1;
   display: block; 
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
	padding:10px 0;
	display: inline-block;
	font-size: 15px;
	color:#555555;
	transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu.mega-menu{ 
    left: 50%;
    transform: translateX(-50%);	
}



/*ancho del menu a 5 Columnas*/
.header .menu > ul > li .sub-menu.mega-menu-column-5{
  max-width: 1100px; /*ancho del menu desplegable*/
  width: 100%; 	
  display: flex;
  flex-wrap: wrap;
  padding:20px 15px;
  
}
.header .menu > ul > li .sub-menu.mega-menu-column-5 > .list-item{
  flex:0 0 20%;
  padding:0 15px;
  
}
.header .menu > ul > li .sub-menu.mega-menu-column-5 > .list-item .title{
	
	font-size: 14px;  /* Ajusta tamaño de la letra de los titulos de los Submenus */
	color:#831fad;
	font-weight: 500;
	line-height: 1;
	padding:10px 0;
}
.header .menu > ul > li .sub-menu.mega-menu-column-5 > .list-item.text-center .title{
	text-align: center;
	
}
.header .menu > ul > li .sub-menu.mega-menu-column-5 > .list-item img{
	max-width: 100%;
	width: 100%;
	vertical-align:auto;
	margin-top: 10px;
	
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
.header .menu > ul > li .sub-menu > ul > li > a:hover,
.header .item-right a:hover,  /* iconos de corazon lupita y carrito */
.header .menu > ul > li:hover > a{
	color: hwb(284 47% 4%) !important; /* Usa !important para aumentar la especificidad Color al pasar el mouse por el Menu */
	
}


/* banner section */
.banner-section{
  background-image: url('img/banner.jpg');
  background-size: cover;
  background-position: center;
  height: 700px;
  width: 100%;
  display: block;
}
.mobile-menu-head,
.mobile-menu-trigger{
	display: none;
}

/*responsive*/
@media(max-width: 991px){

	.header .item-center{
		order:3;
		flex:0 0 100%;
	}
	.header .item-left,
	.header .item-right{
		margin-left: 270px; /* Agrega margen al lado izquierdo */
		margin-right: 20px; /* Agrega margen al lado derecho */
		flex:0 0 auto;
	}
	.v-center{
		justify-content: space-between;
	}
	.header .mobile-menu-trigger{
		display: initial;
		height: 30px;
		width: 30px;
		margin-left: 15px;
		cursor: pointer;
		align-items: center;
		justify-content: center;
	}
	
	
	.header .mobile-menu-trigger span{
		display: block;
		height: 2px;
		background-color: hsl(0, 12%, 97%);
		width: 24px;
		position: relative;
	}
	.header .mobile-menu-trigger span:before,
	.header .mobile-menu-trigger span:after{
		content: '';
		position: absolute;
		left:0;
		width: 100%;
		height: 100%;
		background-color: hsl(0, 12%, 97%);
	}
	.header .mobile-menu-trigger span:before{
		top:-6px;
	}
	.header .mobile-menu-trigger span:after{
		top:6px;
	}
	
	/* iconos de corazon lupita y carrito */
	
	
	.header .item-right{
		align-items: center;
	}

	.header .menu{
		position: fixed;
		width: 320px;
		background-color: rgb(140, 91, 200, .6);   /* color del menu en el celular  */
		left:0;
		top:0;
		height: 100%;
		overflow: hidden;
		transform: translate(-100%);
		transition: all 0.5s ease;
		z-index: 1099;
		
	}
	.header .menu.active{
	   transform: translate(0%);	
	}
	.header .menu > ul > li{
		line-height: 1;
		margin:0;
		display: block;
	}
	.header .menu > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.header .menu > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px;
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-90deg);
	}
	.header .menu .mobile-menu-head{
		display: flex;
		height: 50px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 501;
		position: sticky;
		background-color: #e8a4fe;
		top:0;
	}
	.header .menu .mobile-menu-head .go-back{
		height: 50px;
		width: 50px;
		border-right: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;
		font-size: 16px;
		display: none;
	}
	.header .menu .mobile-menu-head.active .go-back{
		display: block;
	}
	.header .menu .mobile-menu-head .current-menu-title{
		font-size: 25px;
		margin-left: auto;
		font-weight: 500;
		color:#000000;
	}
	.header .menu .mobile-menu-head .mobile-menu-close{
	    height: 50px;
		width: 50px;
		border-left: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;	
		font-size: 25px;
	}
	.header .menu .menu-main{
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header .menu > ul > li .sub-menu.mega-menu,
	.header .menu > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0;
		padding:15px;
		top:35px;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
.header .menu > ul > li .sub-menu.active{
	display: block;
}}

@keyframes slideLeft{
	0%{
		opacity:0;
		transform: translateX(100%);
	}
	100%{
	    opacity:1;
		transform: translateX(0%);	
	}
}
@keyframes slideRight{
	0%{
		opacity:1;
		transform: translateX(0%);
	}
	100%{
	    opacity:0;
		transform: translateX(100%);	
	}
}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		margin-top:0;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
		margin-bottom: 20px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center:last-child .title{
		margin-bottom:0px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
		flex: 0 0 100%;
        padding: 0px;
	}
	.header .menu > ul > li .sub-menu > ul > li > a,
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display: block;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom: 15px;
	}
	.menu-overlay{
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 1098;
		visibility: hidden;
		opacity:0;
		transition: all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility: visible;
	  opacity:1;	
	}






 
    /****************************************************************************/
   /* Ajusta Boton buscar en el menu */
   /****************************************************************************/




.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-field {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1;
}

.search-btn1 {

    color: #fff;

}

.search-btn1 i {
    font-size: 18px;
}

.search-btn2 {
    margin-left: 10px;
    color: rgba(131, 31, 173);
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
     font-size: 18px;
}



.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.4); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    display: flex;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: auto; /* Ajusta automáticamente al contenido */
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-form {
    display: flex;
    align-items: center;
    width: 100%;
}

.modal-form .search-input-field {
    flex: 1;
    margin-right: 10px;
}



/****************************************************************************/
/*-- Carrito -- */
/****************************************************************************/

.submenu {
    position: relative;
    right: -10px;
}

.submenu #carrito {
    display: none;
}

.submenu:hover #carrito {
    display: block;
    position: absolute;
    right: 0;
    backdrop-filter: blur(10px);
    top: 100%;
    z-index: 1;
    background-color: #faf8f5;
    padding: 20px;
    font-size: 15px;
    min-width: 600px;
}

/****************************************************************************/
/*-- Conteo del Carrito -- */
/****************************************************************************/

.count-product {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #e8a4fe;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    font-size: 12px;
}

.count-product2 {
    font-weight: bold;
    color: #9c59b7;
     font-size: 14px;
}

.price-total {
    font-weight: bold;
     font-size: 14px;
}

.carritab table {
    width: 100%;
    border-collapse: collapse;
}

.carritab th, td {
    border: 0px solid black;
    padding: 8px;
    text-align: left;
    color: #9c59b7;
}





.borrar {
    background-color: #9c59b7;
    border-radius: 50%;
    padding: 5px 10px;
    text-decoration: none;
    color: bisque;
    font-weight: 800;
}

/* Estilo para las imágenes en el carrito */
#lista-carrito img {
    width: 80px; /* Tamaño por defecto para pantallas grandes */
    height: auto;
}



.cart {
    display: flex;
    flex-direction: column;
    align-items: left;
     color: #9c59b7; 
}

.cart p {
    margin: 0 0 10px 0; /* Margen inferior para separar los párrafos */
}



.buttons {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 200px; /* Espacio entre los botones */
}

.buttons a {
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    color: #fff;
}



/****************************************************************************/
/*-- Boton de vaciar en el carrito -- */
/****************************************************************************/




.btn-6 {
    padding: 8px 16px; /* Reducir el padding para móviles */
     font-size: 12px; /* Tamaño de letra más pequeño */
     border-radius: 25px;
    background-color: #a8778e;
    border: 3px solid #c5b186;
}

.btn-6:hover {
    background-color: #c5b186;
}



/****************************************************************************/
/*-- Boton de comprar en el carrito -- */
/****************************************************************************/
.btn-7 {
     padding: 8px 16px; /* Reducir el padding para móviles */
     font-size: 12px; /* Tamaño de letra más pequeño */
     border-radius: 25px;
    background-color: #9c59b7;
    border: 3px solid #c5b186;
}

.btn-7:hover {
    background-color: #7b3a7f;
}







/****************************************************************************/
/*-- Portada -- */
/****************************************************************************/



.swiper-slide {

    padding: 0 80px 50px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-prev::after {

font-size: 25px;

}

.swiper-button-next::after {

    font-size: 25px;
    
    }

.swiper-button-prev {

    color: #c5b186;
}

.swiper-button-next {

    color: #c5b186;
}

.swiper-pagination-bullet {

    background-color: rgb(139, 139, 139);
    opacity: 1;
}

.swiper-pagination-bullet-active {

    background-color: rgb(34, 14, 53);
}





/****************************************************************************/
/*-- Menu 2 -- */
/****************************************************************************/


.header-content {

padding: 200px 0 100px 0;

}

.header-info {

display: flex;

}


.header-text {

width: 50%;

}


.header-text h1 {

font-size: 50px;
color: #831fad;
text-transform: capitalize;

}

.header-img {

width: 50%;
text-align: right;

}

.header-img img {

    width: 500px;
}

.info {
display: flex;
margin: 20px 0;

}

.info-1{
font-size: 30px;
color: #831fad;
text-decoration-line: line-through;
margin-right: 25px;

}

.info-2 {
font-size: 30;
color: #831fad;
}


.prices {
    display: flex;
    margin: 20px 0;
    
    }
    
.price-1{
    font-size: 30px;
    color: rgb(173, 173, 173);
    text-decoration-line: line-through;
    margin-right: 25px;
    
    }
    
.prices-2 {
    font-size: 30;
    color: #3b434b;
    }



/****************************************************************************/
/*-- Boton de mas Informacion -- */
/****************************************************************************/



.btn-1 {
    display: inline-block;
    background-color: #9c59b7;
    border-color: #e8a4fe;
    color: #e8a4fe;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 25px;
    margin-top: 40px;
    
    }
    
    .btn-1:hover {
    background-color: #831fad;
    
    }

    
    
    


hr { 
 
  border: 0; 
  height: 3px;
  margin: 20px 0;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #e8a4fe, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #e8a4fe, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #e8a4fe, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #e8a4fe, #f0f0f0); 
}





/****************************************************************************/
/*-- Promociones -- */
/****************************************************************************/

.promos {

    padding: 50px 0;
    text-align: center;
}


.promos h2 {
font-size: 50px;
color: #831fad;
margin-bottom: 35px;
}




/****************************************************************************/
/*-- link ver mas -- */
/****************************************************************************/

 .custom-h4 {
        font-family: 'Nunito', Helvetica, sans-serif; /* Fuente redondeada y delgada */
        font-size: 18px; /* Tamaño de fuente del encabezado */
        font-weight: 200; /* Peso de fuente del encabezado */
        margin-bottom: 10px; /* Espaciado inferior */
        color: #9c59b7; 
    }

    .custom-link {
        color: #9c59b7;
        text-decoration: none; /* Sin subrayado para el enlace */
        transition: color 0.3s ease, border-bottom 0.3s ease; /* Transición suave */
        border-bottom: 1px solid transparent; /* Subrayado controlado */
    }

    .custom-link:hover, 
    .custom-link:focus {
        color: #a8778e; 
        border-bottom: 1px solid #c5b186; /* Subrayado al hacer hover o enfocar */
        text-decoration: none; /* Asegura que el subrayado sea controlado por border-bottom */
    }

    /* Estilo responsivo */
    @media (max-width: 600px) {
        .custom-h4 {
            font-size: 16px; /* Ajuste del tamaño de la fuente en dispositivos móviles */
        }

        .custom-link {
            font-size: 14px; /* Tamaño de fuente más pequeño para enlaces en móviles */
        }
    }



/****************************************************************************/
/*-- Categorias -- */
/****************************************************************************/

.categorias {

    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
   
}

.categoria {
display: flex;
align-items: center;
padding: 35px;

}

.categoria img {
width: 150px;

}

.categoria-1 {
width: 50%;

}

.categoria-1 h1 {
color: #831fad;

}


.categoria-1 h3 {

    color: #9c59b7;
    font-size: 22px;
    font-weight: 600;
}

.categoria-1 p{

    color: #9c59b7;
    font-size: 18px;
}

.categoria-img {
width: 50%;

}



.product {

    padding: 50px 0;
     text-align: center;
}

.productos h2 {

    font-size: 50px;
    color: #9c59b7;
    margin-bottom: 70px;
}



.product img {

    width: 150px;
    margin-bottom: 15px;
}

.product-txt h3 {

font-size: 18px;
color: #831fad;
margin-bottom: 15px;

}

.product-txt p{

    color: #9c59b7;
    font-size: 16px;
    margin-bottom: 15px;
    

}

.precio {

    color: #a8778e;
}


/****************************************************************************/
 /* Botones del index */
 /****************************************************************************/
 
.btn-3 {

    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
     font-weight: bold;
    background-color: #9c59b7;
    border: 3px solid #c5b186;
    border-radius: 25px;
    margin-top: 15px;
    color: #fff;
}

.btn-3:hover {

    background-color: #c5b186;
}




.link {
    flex: 1; /* Ocupar todo el espacio disponible */
    padding: 0 50px; /* Agregar espaciado opcional */
}

.link h3 {

    color: aliceblue;
    margin-bottom: 20px;
}

.link a{

    color: #5c5861;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}


.link p {

    color: #5c5861;
    font-size: 16px;

}








/****************************************************************************/
/* Footer de la pagina */
/****************************************************************************/


.maque-footer {
    width: 100%;
    min-height: 90px; /* Ajusta la altura mínima según tus necesidades */
    background-color: rgba(131, 31, 173);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center alignment */
    position: relative;
    bottom: 0;
}


/* Acomoda las redes sociales y los enlaces en el Footer */
.maque-footer .social,
.maque-footer .footer-links {
  display: flex;
  align-items: center;
}


/* Estilos para los enlaces en el Footer */
.maque-footer .footer-links a {
  text-decoration: none;
  color: white; /* Color del enlace blanco */
  margin-right: 30px; /* Ajusta el margen derecho según tus necesidades */
  position: relative;
}

/* Efecto de línea debajo al pasar el ratón */
.maque-footer .footer-links a::after {
  content: "";
  display: block;
  position: absolute;
  width: 0; /* Inicialmente sin ancho */
  height: 2px; /* Grosor de la línea */
  background-color: #fff; /* Color de la línea */
  bottom: -2px; /* Posición debajo del enlace */
  transition: width 0.3s ease; /* Transición gradual del ancho */
}

/* Ajusta la anchura de la línea al pasar el ratón */
.maque-footer .footer-links a:hover::after {
  width: 100%; /* Ancho completo al pasar el ratón */
}


.maque-footer .social i {
  color: white;
  font-size: 1.5em; /* Tamaño de las redes sociales */
  margin-right: 10px; /* Espacio entre iconos */
  margin-top: 10px; /* Espacio entre iconos */
}

.maque-footer .footer-links {
  margin-bottom: 8px; /* Ajusta el margen inferior según tus necesidades */
}

.maque-footer .footer-links a {
  text-decoration: none;
  color: white; /* Color del enlace blanco */
  margin-right: 30px; /* Ajusta el margen derecho según tus necesidades */
  margin-top: 10px; /* Espacio entre iconos */

}

.maque-footer .footer-links a:hover {
  color: #fff; /* Puedes ajustar este color según tus preferencias */
}

/* Estilos para el copyright de Bexart */
.maque-footer .copycopy {
  text-align: center;
  color: white;
  font-size: 10px; /* Tamaño del texto de copyright */
  padding: 5px; /* Ajusta el espaciado */
}


/****************************************************************************/
/*-- Ventana Modal del Footer-- */
/****************************************************************************/
/* Estilos generales del modal */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%; /* Ajusta el ancho al 50% del viewport */
  height: auto; /* Ajusta la altura automáticamente según el contenido */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  transform: translate(-50%, -50%); /* Centra el modal horizontal y verticalmente */
  max-width: 600px; /* Define un ancho máximo para pantallas grandes */
  border-radius: 10px; /* Bordes redondeados */
}

/* Contenido del modal */
.modal-content {
  background-color: rgba(170, 168, 171, 0.8);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* Estilo del título */
.modal-content h2 {
  font-size: 20px; /* Ajusta el tamaño del texto */
  margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo del párrafo */
.modal-content p {
  font-weight: bold;
  font-size: 16px; /* Ajuste del tamaño de la fuente */
  margin-bottom: 20px; /* Espaciado inferior */
}

/* Estilo del botón de cierre */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

/* Estilos para los métodos de pago */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* Distribuye equitativamente los métodos de pago */
}

.method {
  margin: 10px;
  text-align: center;
  flex: 1 1 100%; /* Ocupa todo el ancho en pantallas pequeñas */
}

.method img {
  width: 80px; /* Ajusta el tamaño de las imágenes */
  height: auto; /* Mantener proporción */
  margin-bottom: 10px;
}

.method p {
  font-size: 14px; /* Texto más pequeño */
}

.whatsapp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.whatsapp-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  margin-right: 10px; /* Espacio entre el ícono y el texto */
}


/****************************************************************************/
/* Ajuste para resoluciones mayores a 2500px */
/****************************************************************************/

@media (max-width: 2560px) {
   .maque-main {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    
  }


.contenedor-padre {
  width: 240px;
}

  
    /*-- Tarjeta donde cada uno de los productos -- */
.producto__contenedor {
  width: 240px;
  height: 350px;

}
 .atras {
  font-size: 10px; /* Ajusta el tamaño del texto si es necesario */
}

.flexslider {
    height: 82vh; /* Ajusta la altura máxima según tus necesidades */

  }
  
  
  
  .slides img{
    width: 100%;
    height: 100%; /* Ajusta la altura según tus necesidades */
      object-fit: fill;
    object-position: 100% 100%;
  }
  
}




/****************************************************************************/
/* Ajuste para resoluciones mayores a 1600px */
/****************************************************************************/


/* Para que los productos vayan reduciendo las columnas a medida que se cambia el dispositivo hasta llegar a una para el celular */

@media (max-width: 1600px) {
  .maque-main {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    
  }
  .flexslider {
  	    height: 65vh; /* Ajusta la altura según tus necesidades */


  }
  
  .contenedor-padre {
  width: 200px;
}

  
    /*-- Tarjeta donde cada uno de los productos -- */
.producto__contenedor {
  width: 200px;
  height: 350px;

}
 .atras {
  font-size: 8px; /* Ajusta el tamaño del texto si es necesario */
}

}



/****************************************************************************/
/* Ajuste para resoluciones mayores a 1200px */
/****************************************************************************/


/* Para que los productos vayan reduciendo las columnas a medida que se cambia el dispositivo hasta llegar a una para el celular */

@media (max-width: 1260px) {
  .maque-main {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    
  }
  .flexslider {
  	    height: 158vh; /* Ajusta la altura según tus necesidades */


  }
  
  
  .contenedor-padre {
  width: 200px;
}

    /*-- Tarjeta donde cada uno de los productos -- */
.producto__contenedor {
  width: 200px;
  height: 350px;

}
 .atras {
  font-size: 8px; /* Ajusta el tamaño del texto si es necesario */
}

}







/****************************************************************************/
/* Ajuste para resoluciones mayores a 990px */
/****************************************************************************/

@media(max-width:991px) {

.menu {
    padding: 20px;
}

.menu label {

    display: initial;
}


.menu .navbar {

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #a8778e;
    display: none;
    color: #e8a4fe;

}

.menu .navbar ul li{
    width: 100%;
}

#menu:checked ~ .navbar {

    display: initial;
   
}

.logo {

    display: none;
 
}


.submenu:hover #carrito {

min-width: 100%;

}

.mySwiper-1 {
    width: 300px;
}

.swiper-slide {

    padding: 0 30px 50px 30px;
}

.header-content {

    padding: 10px 0 50px 0;
}

.header-info {

    padding: 0;
    flex-direction: column;
    text-align: center;
}

.header-text {

    width: 100%;
}

.header-text h1 {

    font-size: 40px;
}

.header-img {

    width: 70%;
}

.header-img img{

    width: 200px;
}


.info {

    flex-direction: column;
}

.info-1 {

    margin: 0;
}

.prices {

    flex-direction: column;
}

.price-1 {

    margin: 0;
}



.btn-1 {

    margin: 20px 0;
}

.promos {

    padding: 30px;
}

.promos h2 {

    font-size: 40px;
    margin-bottom: 0;
}

.categorias {

    grid-template-columns: repeat(1,1fr);
}

.categoria {

    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.categoria-1{

    width: 100%;
    margin-bottom: 25px;
    order: -1;
}

.categoria-img {

    width: 100%;
}

.productos {

    padding: 30px;
}

.productos {

    font-size: 40px;
    margin-bottom: 40px;

}



.link {

    width: 100%;
}


}







/****************************************************************************/
/* Ajuste para resoluciones mayores a 780px */
/****************************************************************************/

@media (max-width: 780px) {

.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: -15px;

}

   .maque-header {
        height: 70px; /* Ajusta la altura del header */
        visibility:none;
    }
  
  
    .header {
        font-size: 18px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
        padding: 10px 15px; /* Reduce el padding para adaptarse a pantallas más pequeñas */
        height: 70px; /* Ajusta la altura del header */
    }

    .header .logo {
        font-size: 20px; /* Ajusta el tamaño del logo si lo tienes */
    }

    .header .menu {
        font-size: 16px; /* Ajusta el tamaño del menú si lo tienes */
    }



  
  .maque-main {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  }
  
  

	.header .menu > ul > li .sub-menu{

		top:25px;

	}
	
	

  .explorador-colecc {
    width: 100%; /* Ocupa el 100% del ancho en dispositivos más pequeños */

  }

  .flexslider {
margin-top: 95px; /* Ajusta la altura según tus necesidades */

  }




.contenedor-padre {
  width: 180px;
}

    /*-- Tarjeta donde cada uno de los productos -- */
    .producto__contenedor {
      width: 180px;
      height: 400px;
      
    }


    .atras {
      font-size: 12px; /* Ajusta el tamaño del texto si es necesario */
    }

    .maque-footer {
      min-height: 50px; /* Ajusta la altura para dispositivos móviles */
    }
  
    .maque-footer .social i {
  
      font-size: 15px; /* Tamaño de las redes sociales para dispositivos móviles */
  
    }
  
    .maque-footer .footer-links {
      font-size: 11px; /* Tamaño del texto para dispositivos móviles */
    }
  
    .maque-footer .copycopy {
      font-size: 8px; /* Tamaño del texto de copyright para dispositivos móviles */
    }

    .modal-content {

      width: 80%;
      padding: 50px;
      text-align: center;

    }
  
  
  /****************************************************************************/
/*-- Boton de comprar y vaciar el carrito -- */
/****************************************************************************/  
    
/* Ajustes para dispositivos móviles */

    .buttons {
        
        align-items: center; /* Centrar los botones */
         justify-content: center;
        gap: 5px; /* Reducir el espacio entre los botones */
    }

    .btn-6, .btn-7 {
        width: 38%; /* Botones más anchos en móviles */
        padding: 12px 6px; /* Aumentar ligeramente el padding para mejorar la usabilidad */
        font-size: 14px; /* Tamaño de letra ligeramente más grande */
    }

}



/****************************************************************************/
/* Ajuste para resoluciones mayores a 768px */
/****************************************************************************/


/* Estilos específicos para dispositivos móviles */




@media (max-width: 768px) {
   
   .maque-header {
        height: 70px; /* Ajusta la altura del header */
        visibility:none;
    }
  
    .header {
        font-size: 18px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
        padding: 10px 15px; /* Reduce el padding para adaptarse a pantallas más pequeñas */
        height: 70px; /* Ajusta la altura del header */
    }
    




/* Difuminado al hacer scroll */
.header.scrolled .burger {
    opacity: 0; /* Cambia la opacidad a 0 cuando se hace scroll */
}


    .burger-icono {
        width: 30px; /* Ajusta el tamaño del ícono según tus necesidades */
        height: auto; /* Mantiene la proporción del ícono */
        
    }
    
    .submenu:hover #carrito {
        right: 0;
        min-width: 100%;
        font-size: 14px;
    }

    .carritab table {
        font-size: 14px; /* Ajusta el tamaño de la fuente para pantallas pequeñas */
    }

    .submenu #carrito {
        padding: 15px;
    }

    .cart tr td {
        display: block;
    }

    .titulo {
        width: 100%; /* Ancho ajustado para pantallas pequeñas */
        display: none; /* Ocultar el nombre del producto en pantallas pequeñas */
    }

    #lista-carrito img {
        width: 60px; /* Tamaño reducido para pantallas pequeñas */
    }


    .modal-content {
        width: calc(100% - 40px); /* 20px padding on each side */
    }

    .search-input-field {
        font-size: 14px;
        padding: 8px;
    }

    .search-btn2 {
        padding: 8px;
    }

    .search-btn2 i {
        font-size: 16px;
    }


/****************************************************************************/
 /* Ventana Modal del Footer */
 /****************************************************************************/
 
  .modal {
    width: 90%; /* Ancho del 90% en pantallas pequeñas */
    max-width: 90%; /* Asegura que no exceda el 90% */
  }

  .modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    grid-gap: 10px; /* Espaciado entre columnas */
    padding: 10px; /* Reducir padding en pantallas pequeñas */
  }

  .modal-content h2 {
    grid-column: 1 / -1; /* El título ocupa ambas columnas */
  }

  .modal-content p {
    grid-column: 1 / 2; /* Párrafo en la primera columna */
  }

  .payment-methods {
    grid-column: 2 / 3; /* Métodos de pago en la segunda columna */
  }

  .method img {
    width: 60px; /* Imágenes más pequeñas en dispositivos pequeños */
  }

  .method p {
    text-align: center;
    font-size: 16px; /* Tamaño del texto ajustado para móviles */
  }
  
  .close {
    font-size: 18px; /* Reducir tamaño de la 'X' de cierre */
  }
  

  .whatsapp-container {
    flex-direction: column;
    align-items: center;
  }

  .whatsapp-icon {
    margin-right: 0;
    margin-bottom: 10px; /* Añadir un poco de espacio debajo del ícono en dispositivos pequeños */
  }


  
/****************************************************************************/
 /* Botones del index */
 /****************************************************************************/
 
    .btn-3 {
        font-size: 12px;
        margin-top: 15px;
    }

    .submenu:hover #carrito {
        right: -60px;
        min-width: 100%;
        font-size: 7px;
    }
    


  .carritab table {
       
        font-size: 14px; /* Ajusta el tamaño de la fuente para pantallas pequeñas */
        
    }




    .submenu #carrito {
        padding: 15px;
    }
    


    .cart tr td {
          
        display: block;
        
      
    }


    .titulo {
         width: 300px; /* Ancho predeterminado, ajusta según tus necesidades */
        display: none; /* Ocultar el nombre del producto en pantallas pequeñas */
    }

    /* Tamaño de imagen para pantallas pequeñas */
    #lista-carrito img {
        width: 60px; /* Tamaño reducido para pantallas pequeñas */
    }
    
   
   


 
    .btn-1 {
 width: 50%; /* Botones más anchos en móviles */
        padding: 10px 26px; /* Aumentar ligeramente el padding para mejorar la usabilidad */
        font-size: 15px; /* Tamaño de letra ligeramente más grande */
        z-index:50;
}    
  




}







/****************************************************************************/
/* Ajuste para resoluciones mayores a 480px */
/****************************************************************************/

@media (max-width: 480px) {
  .maque-main {
    grid-template-columns: 1fr;


  }

    .maque-header {
        height: 60px; /* Ajusta la altura del header */
        visibility:none;
    }
  
    .header {
        font-size: 18px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
        padding: 10px 15px; /* Reduce el padding para adaptarse a pantallas más pequeñas */
        height: 60px; /* Ajusta la altura del header */
    }

 /* Estilos para el menú desplegable móvil */
  .header .menu {
    width: 100%; /* Asegura que el menú ocupe el 100% del ancho de la pantalla */
    left: 0; /* Posiciona el menú al inicio de la pantalla */
    padding: 0; /* Elimina cualquier padding adicional */
    box-sizing: border-box; /* Asegura que el padding y borde se incluyan en el ancho total */
  }

    .header .menu-icon {
        display: block; /* Mostrar el ícono de menú para pantallas pequeñas */
        font-size: 24px; /* Tamaño del ícono de menú */
    }



	
  .flexslider {
    height: 28vh; /* Ajusta la altura según tus necesidades */

  }

  .slider img {
    width: 100%;
    height: 130%;

  }



  
  .explorador-colecc {
    margin-top: 8px;
    width: 100%; /* Ocupa el 100% del ancho en dispositivos más pequeños */

  }

.contenedor-padre {
  width: 285px;
  left:20px;
}


      /*-- Tarjeta donde cada uno de los productos -- */
      .producto__contenedor {
        width: 285px;
        height: 500px;
      
      }

      .atras {
        font-size: 12px; /* Ajusta el tamaño del texto si es necesario */
      }
  




/* iconos de corazon lupita y carrito */

	.header .item-right{
		margin-left: 230px; /* Agrega margen al lado izquierdo */
		margin-right: 20px; /* Agrega margen al lado derecho */
		flex:0 0 auto;
	}
	
	
	.header .menu > ul {
    display: block; /* Asegura que la lista del menú se muestre en bloque */
    margin: 0;
    padding: 0;
  }

  .header .menu > ul > li {
    width: 100%; /* Asegura que cada ítem del menú ocupe el ancho completo */
    padding: 10px 0; /* Ajusta el padding para mejor espaciado */
    text-align: center; /* Centra el texto en los elementos del menú */
    border-bottom: 1px solid #ccc; /* Agrega una línea divisoria entre ítems */
  }

  .header .menu > ul > li > a {
    font-size: 14px; /* Ajusta el tamaño de la fuente */
    width: 100%; /* Asegura que el enlace ocupe todo el espacio disponible */
    display: block;
    padding: 10px; /* Ajusta el padding para mejorar la accesibilidad */
  }

  .header .menu > ul > li .sub-menu {
    width: 100%; /* Asegura que el submenú también ocupe todo el ancho */
    left: 0; /* Posiciona el submenú al inicio de la pantalla */
    padding: 0;
  }

  .header .menu > ul > li .sub-menu.mega-menu {
    max-width: 100%; /* Limita el ancho del mega-menú al 100% del contenedor */
    padding: 0;
  }

  .header .menu > ul > li .sub-menu.mega-menu > .list-item {
    padding: 10px; /* Ajusta el padding para cada ítem en el mega-menú */
    text-align: left; /* Alinea el texto a la izquierda */
  }
  
    /* Estilos para el disparador del menú móvil */
  .header .mobile-menu-trigger {
    display: initial;
    height: 30px;
    width: 30px;
    margin-left: 15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  .header .mobile-menu-trigger span {
    display: block;
    height: 2px;
    background-color: hsl(0, 12%, 97%);
    width: 24px;
    position: relative;
  }

  .header .mobile-menu-trigger span:before,
  .header .mobile-menu-trigger span:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(0, 12%, 97%);
  }

  .header .mobile-menu-trigger span:before {
    top: -6px;
  }

  .header .mobile-menu-trigger span:after {
    top: 6px;
  }
  


    .submenu:hover #carrito {
        right: 0;
        min-width: 100%;
        font-size: 14px;
    }
    


    .count-product {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

.carritab table {
    width: 100%;
   
}


    .cart tr td {
        padding: 5px;
    }

    #lista-carrito img {
        width: 50px; /* Tamaño reducido para pantallas muy pequeñas */
    }
    
       /*-- Tarjeta donde cada uno de los productos -- */
      .producto__contenedor {
        width: 285px;
        height: 500px;
      
      }


 .modal-content {
        width: calc(100% - 20px); /* 10px padding on each side */
    }

    .search-input-field {
        font-size: 12px;
        padding: 6px;
    }

    .search-btn2 {
        padding: 6px;
    }

    .search-btn2 i {
        font-size: 14px;
    }
    
    

/****************************************************************************/
 /* Botones del Search */
 /****************************************************************************/
.search-btn2 i {

     font-size: 22px;
}



/* Opcional: Estilo específico para el botón "Comprar" */
#comprar-carrito {
    margin-left: 10px; /* Espacio entre los botones */
}


    .buttons {
        
        align-items: center; /* Centrar los botones */
         justify-content: center;
        gap: 5px; /* Reducir el espacio entre los botones */
    }


/****************************************************************************/
 /* Botones de Comprar y Vaciar Carrito */
 /****************************************************************************/
 
    .btn-6, .btn-7 {
        width: 48%; /* Botones más anchos en móviles */
        padding: 10px 16px; /* Aumentar ligeramente el padding para mejorar la usabilidad */
        font-size: 12px; /* Tamaño de letra ligeramente más grande */
    }


  
    

}




/****************************************************************************/
/* Ajuste para resoluciones mayores a 320px */
/****************************************************************************/

@media (max-width: 380px ){





    
/* iconos de corazon lupita y carrito */

	.header .item-right{
		margin-left: 160px; /* Agrega margen al lado izquierdo */
		margin-right: 20px; /* Agrega margen al lado derecho */
		flex:0 0 auto;
	}

.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
padding-top: 55px;

}


/****************************************************************************/
 /* Botones del search */
 /****************************************************************************/
.search-btn2 i {

     font-size: 22px;
}




  .submenu:hover #carrito {
        right: -60px;
        min-width: 100%;
        font-size: 14px;
    }

.contenedor-padre {
  width: 285px;
  left:-10px;
}


      /*-- Tarjeta donde cada uno de los productos -- */
      .producto__contenedor {
        width: 285px;
        height: 500px;
      
      }


/* Opcional: Estilo específico para el botón "Comprar" */
#comprar-carrito {
    margin-left: 0; /* Espacio entre los botones */
}


 
    .btn-1 {
 width: 70%; /* Botones más anchos en móviles */
     
}    

  
}