/* 
medida de pantalla grande
1920
640-640-640
medida pantalla diseño
1440
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

html {
    -webkit-overflow-scrolling: touch;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;

  /* mobile: */
  font-size: 0.75rem;     /* 12px */
  line-height: 1.25rem;   /*  20px */

  /* desktop: */
  font-size: 0.85rem;     /* 14px */
  line-height: 1.5rem;   /*  24px */
  
  font-size: 14px; 
  line-height: 24px; 
  -webkit-text-size-adjust: none;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('assets/Fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.woff2') format('woff2'),
         url('assets/Fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/Fonts/Roboto_Condensed/RobotoCondensed-Regular.woff2') format('woff2'),
         url('assets/Fonts/Roboto_Condensed/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Estilo base */
.form-control {
    
	border: 2px solid #EAEAEA;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    transition: border-color 0.3s ease;
	width: 100%;
	height: 49px;
}

/* Cuando se enfoca el input (al hacer clic o escribir) */
.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: #A0CB32; /* verde */
}

/* Cuando el campo tiene valor válido */
.form-control.valid {
    border-color: #A0CB32 !important; /* verde */
}

/* Cuando hay error de validación */
.form-control.invalid {
    border-color: #FF96AA !important; /* rojo */
}

/* Texto de error */
.error-message {
    color: #FF96AA;
    font-size: 14px;
    margin-top: 4px;
}
h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
}

/* 



*********Estilo Categorias*********
imagne categria
	width: 64;
	height: 64;
	gap: 8px;
	border-radius: 32px;
	padding: 8px;


Texto Categorias
	font-family: body-font;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0%;
	text-align: center;




*****Estilo Subcateogorias*********


Texto Categorias
	font-family: body-font;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0%;
	text-align: center;

Elemento Contenedor Categoria texto
	width: 119;
	height: 32;
	gap: 8px;
	padding-top: xs;
	padding-right: xl;
	padding-bottom: xs;
	padding-left: xl;
	border-radius: xl;






Estilos de texto productos 

Marca
	font-family: body-font;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0%;
Nombre Producto
	font-family: body-font;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0%;
Precio 
	font-family: body-font;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0%;


Etiqueta Promocion
	size="sm";
	type="solid";
	color="accent";
Texto Promocion
	font-family: body-font;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0%;


*/

   /* Para pantallas grandes (escritorios, mayor a 1024px) */
   @media (min-width: 1025px ) {

	.btn-cantidad-sumar-carrito{
		width: 42px!important;
		height: 42px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		padding: 0!important;
		line-height: 1!important;
		position: relative;
		right: 0px;
		top: 0px;
		background-color: red;
	}
	.mensaje-texto{
		font-size: 12px !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #000 !important;
		/* background-color: gray; */
    	width: 400px;
		position: relative;
		right: 20px;
	}
	.mensaje-titulo{
		font-size: 14px !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #000 !important;
		font-weight: bold!important;
		width: 434px;
		position: relative;
		left: 20%;
	}
	#SeccionDetalle{
		display: none!important;
	}
	/*.btnCerrarSession a {
        width: 134px ;
        height: 34px ;
        background-color: #A0CB32!important;
        border: none;
        border-radius: 12px!important;
        font-size: 12px !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #000 !important;
        padding-top: 7px ;
        position: relative;
        left: 207px;
        bottom: 5px;
        text-decoration: none; 
        display: inline-block; 
        text-align: center; 
    }*/

	/*#labelCerrarSesion{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 12px;
		line-height: 28px;
		letter-spacing: 0%;
		color: #000;
		 position: relative;
		bottom: 10px;
		left: 0px; 
	}
	*/
	.btnCerrarSession {
        width: 134px ;
        height: 34px ;
        background-color: #A0CB32!important;
        border: none;
        border-radius: 12px!important;
        font-size: 12px!important ;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #000 !important;
        padding-bottom: 10px ;
        position: relative;
        left: 207px;
        bottom: 4px;
        text-decoration: none; 
        display: inline-block; 
        text-align: center; 
    }


	.textVolverSesion{
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: bold!important;
    margin-bottom: 15px;	
	}

	.txtIngresaCorreo{
		 color: black !important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: bold!important;
    margin-bottom: 15px;
	}
	.tituloResetPass{
    color: black !important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: bold!important;
    margin-bottom: 15px;
}

.btnFormularioSave{
		background-color: #A0CB32 !important;
        color: #fff;
        border: none;
        padding: 10px 0 !important;
        width: 55% !important;
        height: 50px !important;
		position: relative;
		top: 10px;
		left: 21%;
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold!important;
	}


#btnVolverCatalogo{
		position: relative;
		left: 15px;
		border-color: #A0CB32 !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        
		font-weight: bold!important;
		font-size: 12px!important;
		line-height: 24px!important;
		letter-spacing: 0%!important;

        color: #000 !important;
		width: 312px!important;
        height: 56px!important;
		display: flex!important;
		justify-content: center!important;
		align-items: center!important;
		text-align: center!important;		
		padding: 10px 20px!important; /* Ajusta si quieres más espacio interno */		
		text-decoration: none!important;
		border-radius: 12px!important;
	}
	.check-icon{
		position: relative;
		left: 30%;
	}
	.mensaje-container{
		    /* background-color: blue; */
    padding-left: 230px;
    padding-right: 250px;
	}
#mensaje{
	/* background-color: red; */
	padding-top: 250px;
    padding-left: 250px;
    padding-right: 250px;
    align-items: center;
}
	.logo-desktop {
        display: block;
    }
    .logo-mobile {
        display: none;
    }
	/**********Pagina Login*********/

	/******Estilo logo*****************/

	.txtCrearCuenta{
		position: relative;
		bottom: 15.5px;
	}

	.contentTextNuevoUsuairo{
		/* background-color: red; */
		position: relative;
        right: 50px;
        top: 46px;

	}

	.login-links a {
		color: #007bff;
		font-size: 14px;
	}

	.login-links{
		position: relative;
        top: 92px;
        left: 55.5px;
        /* background-color: red; */
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: -0.6%;
		text-align: center;
		text-decoration: underline;
		text-decoration-style: solid;		
		text-decoration-thickness: 0%;
	}


	/* 
	
	font-family: body-font;
font-weight: 700;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.6%;
text-align: center;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-offset: 0%;
text-decoration-thickness: 0%;

	*/

	.btn-green {
		background-color: #A0CB32;
		color: white;
		font-weight: bold;
		width: 184px;
		height: 55px;
		position: relative;
		left: 134px;
		/* top: 121px; */
		top: 0px;
		border-radius: 12px;
	}

	.btn-green:hover {
		background-color: #8FB52C;
	}

	.txtInicioSession{
		position: relative;
		top: 102px;
		right: 55px;
	}
	.labelLogin{
		position: relative;
		top: 6px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
	}

	.contentPassword{
		position: relative!important;
		top: 2px!important;		
	}

	.login-box {
		max-width: 640px;
		width: 450px;
		height: 790px;
		text-align: center;
		/* background-color: #003da5; */
		position: relative;
        left: 452px;
        top: 100px;		
		padding-left: 109px;
	}

	.contentForm{
		position: relative;
        right: 110px;
        top: 124px;
		align-items: left;
		text-align: left;
		height: 500px;
	}
	.logo-lg-Login{
		position: relative!important;
		left: -65px!important;
		top: 65px!important;

		width: 168!important;
		height: 31.634458541870117!important;
		justify-content: space-between!important;
		padding-top: 2px !important;
		padding-bottom: 2px!important;
	}
	/******Estilo logo*****************/

	/**********Pagina Login*********/

	#sectionHeaderDetalleProd{
		position: relative;
        bottom: 15px;
		padding-left: 314px;
		padding-right: 120px;
		padding-top: 20px;
		height: 80px;
		/* background-color: red; */
	}
	.promotion-badge-Productos{
			
		position: absolute;
		top: 8px;
		right: 10px;
		background-color: #FFEEAF;
		color: #000000a3;
		padding: 5px 10px;
		border-radius: 5px;			
		z-index: 10;

		font-family: 'Plus Jakarta Sans', sans-serif !important; 
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0%;
	}

	#productosIndex{
		/* background-color: #ffcc00 !important; */
		position: relative;
        bottom: 20px;
		padding-left: 5px;
		/* background-color: aqua; */
	}

	.lavelForm{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 20px;
		color: #000;
	}

	.formularioContaco{
		/* background-color: blue; */
		padding-left: 400px;
	}

	.ContainerFormulario{
		position: relative;
		top: 0px;
		left: 0px;	
		/* padding: 20px;	 */
		width: 600px;
		/* background-color: aqua; */
	}

	.contctotexto1{
		position: relative;
		bottom: 0px;
		right: 200px;
	}

	.contctotexto2{
		position: relative;
		bottom: 41px;
        left: 160px;
	}
	.contctotexto3{
		position: relative;
		bottom: 40px;
	}

	.subtext {
		text-align: center;
		color: #555;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 25px;
		margin: 4px 0;
	  }
	  

	/*******Pagina Carrito**************/
	/****Estilo Carrito Vacio************/

	.cotentnBotonCatalogoProd{
		position: relative;
		left: 315px;

	}
	.contentMensajeCarritoVacio{
		/* background-color: blue; */
		width: 550px;
		position: relative;
		left: 305px;
	}

.contentTituloCarritoVacio{
	position: relative;
    left: 303px;
    width: 503px;
    /* background-color: green; */
}
	.contentImagenCarrito{
		/* background-color: red; */
		padding-top: 165px;
		padding-left: 25%;
	}
	

	.imgiconCarrito{
		width: 117px; 
		height: 180px;
		/* background-color: blue; */
		object-fit: contain;
		/* padding-left: 100px;
        padding-top: 100px; */
	}

	.carritoVacio{
		/* background-color: gray; */
		position: relative;
    bottom: 0px;
	}  


	/****Estilo Carrito Vacio************/
	/***********Estilo Seccion Carrito ***********/

	/* 
	
	width: 152;
height: 152;
border-radius: 8px;

	*/

	#carrito{
		position: relative;
		bottom: 20px;
		/* background-color: red; */

		padding-left: 314px;
		padding-top: 17px;
	}



	/***********Estilo Seccion Carrito ***********/

	#btnProcesarPedidoSection{
		/* background-color: #003da5; */
	}

	.btnAtraz{
		position: relative;
		right: 115px;
		color: #000!important;
		/* width: 50px!important;
		height: 50px!important; */
	}

	#botnVolver{
		position: relative;
		bottom: 50px;
		padding-left: 15px;
		background-color: #007bff;
	}


	.textroCantidad{
		font-family: 'Plus Jakarta Sans', sans-serif;		
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;	
		position: relative;
		right: 0px;
		top: 0px;
	}
	.btn-cantidad-left{
		width: 46px!important;
		height: 46px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		/* padding: 0!important; */
		line-height: 1!important;
	}

	.cantidadText{
		position: relative;
		bottom: 20px;
		left: 2px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		width: 200px;
        height: 30px;
		/* background-color: red; */

	}
	.txtMarcaProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0%;
		color: #9A9A9A;

	}

	.txtDimensiones{		
		font-family: 'Plus Jakarta Sans', sans-serif!important;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		position: relative!important;
		bottom: 16px!important;
	}


	.txtNombreProd{		
		font-family: 'Plus Jakarta Sans', sans-serif!important;		
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		position: relative!important;
		bottom: 7px!important;
	}

	.titlecarrito{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0%;
		text-align: center;
		position: relative;
        right: 94px;
		top: 5px;
	}
	.precioProdCarrito{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		position: relative;
		bottom: 23px;

	}

	.btnProcesarPedido{
		background-color: #A0CB32!important;
		color: #000!important;		
		border: none!important;
		padding: 12px 24px!important;
		font-size: 1rem!important;
		border-radius: 14px!important; /* <-- Esquinas redondeadas */
		font-weight: 500!important;
		transition: background-color 0.3s ease!important;
		position: relative;
        bottom: 0px;
        left: 455px;
		width: 200px!important;
	}

	.btn-eliminar-carrito{
		position: relative;
		left: 300px;
		width: 110px!important;
		height: 46px!important;
		border: 2px solid #b4d600!important;
		border-radius: 12px;
		margin-left: 10px;
		color: #000;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cantidad-box-Carrito {
		position: relative;
		right: 470px;
        top: 95px;
        /* background-color: red; */
        width: 270px;
        height: 70px;
	}
	
	/* Contenedor con borde y esquinas redondeadas solo alrededor de los botones/input */
	.cantidad-control {
		display: flex;
		border: 2px solid #A0CB32;
		border-radius: 14px;
		overflow: hidden;
	}
	
	/* Botones - y + */
	.btn-cantidad {
		width: 46px!important;
		height: 46px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		padding: 0!important;
		line-height: 1!important;
	}
	
	/* Botón izquierdo (-) con bordes redondeados izquierdos */
	.btn-left {
		/*border-right: none!important;*/
		border-top-left-radius: 12px!important;
		border-bottom-left-radius: 12px!important;
	}
	
	/* Botón derecho (+) con bordes redondeados derechos */
	.btn-right {
		/* border-left: none!important; */
		border-top-right-radius: 12px!important;
		border-bottom-right-radius: 12px!important;
	}
	
	
	/* Input de cantidad */
	.cantidad-input {
		width: 74px!important;
		height: 44px!important;
		border: none;
		background-color: #f9f9f9;
		font-weight: 500;
		text-align: center;
		padding: 0;
	}
	
	/* Botón de eliminar (fuera del borde verde) */
	.btn-eliminar {
		display: none !important;
		/* position: relative;
		left: 70px;
		width: 60px!important;
		height: 60px!important;
		border: 2px solid #b4d600!important;
		border-radius: 14px;
		margin-left: 10px;
		color: #000;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center; */
	}


	.contentDetalleProd{
		position: relative;
		left: 104px!important;
		bottom: 30px;
		width: 100%!important;
		/* background-color: #003da5 !important; */
	}

	.imgProductoCarrito{
		width: 200px;
		height: 185px;
		position: relative;
        bottom: 15px;
		left: 50px;
		border-radius: 12px;    
	}

	/*******Pagina Carrito**************/


	/*********pagina detalle producto***********/

	.txtCantidadDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

		position: relative;
		bottom: 46px;
		left: 65px;
	}
	.cantidad-box {
		position: relative;
        left: 480px;
        bottom: 1340px;
		/* background-color: #003da5; */
		width: 230px;
	}
	
	.contenttextVerCarrito{
		position: relative;
		bottom: 30px !important;
        left: 85px;
	}
	.textVerCarrito{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;		
        position: relative;
		left: -37px;
	}
	.icopnCarritoProd{
		width: 40px !important;
		height: 40px !important;
		position: relative;
		top: 3px;
	}

	.verCarrito{
		position: relative!important;
		bottom: 1155px!important;
		left: 530px!important;
		width: 429px!important;
		height: 45px!important;
		/* background-color: #A0CB32!important; */
	}
	.sectionPrdo{
		position: relative;
		bottom: 56px;
		left: 0px;
		/* background-color: red; */
		padding-left: 180px;
	}

	.containerInfoProd{
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		
	}

	#infoProducto{
		/* background-color: #007bff; */
		padding-left: 728px;
	}

	.precioDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 32px;
		line-height: 36px;
		letter-spacing: 0%;
		color: #000;
		font-weight: bold;
		text-align: left;
	}	
	.DimensionesDetalleProd{		
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		position: relative;
		top: -30px;
		left: -15px;

	}
	.nombreProdDetalle{
		font-size: 15px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;
		position: relative;
		top: -25px;
		left: -15px;
	}
	.titleDetalleMarca{
		font-size: 12px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #a3a5a7;
		position: relative;
		top: -20px;
		left: -15px;
	}
	.btnDetalleProd{
		width: 283px!important;
		height: 56px;
		background-color: #A0CB32!important;
		position: relative!important;
		left: 545px!important;
	}
	.contetButton{
		bottom: 1150px;
		left: 0px;
		/* background-color: red; */
		
	}

	.fichatecnicaDetalleProd{
		position: relative!important;
		bottom: 68px;
        left: -8px;
	}
	.titleFichaTecnica{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0%;
		color: #000;
		text-align: left;
		font-weight: bold;
	}

	.AltoDato{
		position: relative;
		top: -77px!important;
	}
	.Alto{
		position: relative;
		bottom: 40px;

	}

	.AnchoDato{
		position: relative;
		top: -58px!important;
	}
	.Ancho{
		position: relative;
		bottom: 25px;
	}
	
	.EspesorDato{
		position: relative;
		top:-43px!important;
	}
	.Espesor{
		position: relative;
		bottom: 10px;
	}
	.Dimensiones{
		position: relative;
		bottom: 15px;
	}

	.ColorDato{
		position: relative;
		bottom: 1px!important;
		top: -65px!important;
	}
	.Color{
		position: relative;
		bottom: 30px;
	}
	.MaterialDato{
		position: relative;
		top: -48px!important;
	}
	.Material{
		position: relative;
		bottom: 15px;
	}
	.SKU{
		position: relative;
		/* top: 10px; */
	}
	.titleSKU{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		text-align: left;	
		padding-top: 15px;
	}
	.skuDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		text-align: left;
		position: relative;
		right: -379px;
		top: -27px;
		width:598px;		
	}


	.PDescripcionDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;		
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		/* font-weight: bold; */
		text-align: left;
		position: relative;
        left: -12px;
        top: -67px;
		width: 100%;		
	}

	.ContentprecioDetalle{
		position: relative;
		top: -50px;
		left: -8px;
		text-align: left;
	}

	/*********pagina detalle producto***********/


	/***********Pagina Nosotros***********/
	.btnNosotros{
		color: #000!important;
		background-color: #A0CB32!important;
		width: 300px!important;
		position: relative!important;
		left: 30%!important;
	}


	/***********Pagina Nosotros***********/



	/******Pagina index Principal******/

	
	.card-text-Prod-Precio{
		font-size: 20px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%; 

		color: #000;
		position: relative;
		bottom: 35px;
		left: 0px;
		font-weight: bold !important;    
	}
	.card-text-Prod-Dimencion{
		font-size: 12px;
		font-weight: 400;
		font-family: 'Plus Jakarta Sans', sans-serif;
		line-height: 20px;
		letter-spacing: 0%;
		color: #000;
		position: relative;
		bottom: 20px;
		left: 0px;
	}
	
	.card-text-Prod-Marca{
		font-size: 12px;
		font-weight: 400;
		font-family: 'Plus Jakarta Sans', sans-serif;
		line-height: 20px;
		letter-spacing: 0%;
		color: #9A9A9A;
		position: relative;
		bottom: 00px;
		left: 0px;

	}
	.card-title-Prod-nombre{
		font-size: 15px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

		color: #000;
		position: relative;
		bottom: 15px;
		left: 0px;		
	}
	
	.card {
		/*height: 400px !important;
		overflow: hidden;  asegura que el borde redondeado se aplique a todo */
		/*background-color: #c21515 !important;  /*color de fondo blanco */
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0px 2px 12px rgba(0,0,0,0.1);
		background-color: #fff;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.card-img-top-prod {
		width: 100%;
		height: 180px;
		object-fit: cover; /* Cambiar a 'cover' si quieres que se llene mejor el espacio sin dejar bordes blancos */
		object-position: center;
		/*border-radius: 12px;  Ajusta esto si quieres más o menos redondeado */
		border-bottom: 1px solid #f0f0f0;
	}
	.producto-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
		padding-inline: 24px; /* margen proporcional extra */
		padding-block: 20px;
		max-width: 1025px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	
	.producto-col {
		flex: 1 1 240px;
		max-width: 214px;
		min-width: 214px;
		
		/*width: 100%;
		padding: 8px;
		box-sizing: border-box;
		width: 17% !important; */
	}
	.producto-col:hover {
		transform: translateY(-5px);
	}

	
		.subcategoria-tag.active {
			background-color: #000 !important; /* gris más notorio */
			color: #fff !important;
			border-color: #000 !important;
			font-weight: bold !important;           /* texto negro para más contraste */
		}

		
		#subcategorias-container{
			/* background-color: #10b328; */
			padding: 30px 0;
			display: flex;
			justify-content: flex-start; /* 👈 Esto alinea todo a la izquierda */
			padding-left: 430px; /* Ajustalo como prefieras */
		}
		#subcategoriasSection{			
			padding: 20px 0;
		}
		.subcategoria-tag {
			font-size: 14px;
			font-family: 'Plus Jakarta Sans', sans-serif;
			background-color: #f8f9fa;
			color: #333;
			border: 1px solid #ddd;
			padding: 0px 12px;
			border-radius: 20px;
			margin: 4px;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			white-space: nowrap;
			height: 30px;		
			width: 118px;	
		}
		
		.subcategoria-tag:hover {
			background-color: #e0e0e0;
			color: #000;
		}
		
		.subcategorias-wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 10px;
			max-width: 1200px;
			width: 100%;
			/* margin: 0 auto; */
			/* background-color: #003da5; */
			position: relative;
			bottom: 50px;
		}
		
	
		#productos-categoria{
			position: relative;
			top: 0px;
			text-transform: capitalize;
		}



	.categoriaNombre{
		position: relative;
		top: 0px;
	}
	#categoria-seleccionada-nombre{
		display: none!important;
		/* font-size: 1.5rem;
		margin-top: 20px;
		margin-bottom: 10px;
		color: #333; */
	}


	.categories-slider-container {
		overflow-x: auto;
	background-color: #f8f9fa;
	padding-left: 50px;  /* mucho más seguro que 210px */
	padding-right: 16px;
	white-space: nowrap; /* opcional pero puede ayudar en scroll horizontal */
	height: 110px; /* <<--- importante */;
	}
	.categories-slider {
		display: flex;
		flex-wrap: nowrap;
	}

	.category-item {
		flex: 0 0 auto; /* No crecer, no encoger, ancho automático basado en el contenido */
		margin-right: 30px; /* Espacio entre los items */
		text-align: center;
		min-width: 80px; /* Ancho mínimo para cada categoría */
	}

	.category-button {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.category-icon-container {
		background-color: #fff; /* Fondo gris claro para el círculo del icono */				
		width: 64px;
		height: 64px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 50%;
	}

	.category-icon {
		width: 64px;
		height: 64px;
		object-fit: contain;
		border-radius: 50%;
	}

	.category-name {
		font-size: 14px;
		font-family: 'Plus Jakarta Sans', sans-serif;
        color: #343a40;
        margin-top: 0px;
        margin-bottom: 0px;
        
        position: relative;
        bottom: 1px;
	}
	.category-button.active .category-name {
		color: #000000; /* más oscuro */
		font-weight: bold; /* opcional, para que se vea más fuerte */
	}

	/* Estilos para el primer item para que no tenga margen a la izquierda */
	.categories-slider .category-item:first-child {
		margin-left: 10px; /* Ajustar si es necesario */
	}

	/* Estilos para el último item para que no tenga margen a la derecha */
	.categories-slider .category-item:last-child {
		margin-right: 10px; /* Ajustar si es necesario */
	}	


	
	#carouselPromociones .product-card {
		 background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		overflow: hidden;
		margin: 20px;
		position: relative;
	}
	.product-card:hover {
   transform: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}
	#carouselPromociones .product-image-container {
		  position: relative;
    /* background: linear-gradient(145deg, #f8f9fa, #ffffff); */
    padding: 0px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
	}
	#carouselPromociones .product-info {
		/* text-align: left;
		padding: 15px; */
		position: absolute;
		bottom: -1px;
		width: 100%;
		background: #ffffff;
		 /* background: rgba(255, 255, 255, 0.6) !important; */
    /* backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);*/
		padding: 16px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-marca,
.product-name,
.product-dimensiones,
.product-price {
  margin-bottom: 5px;
}

/* @keyframes pulsePromo {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
} */

    #carouselPromociones .product-dimensiones{
        color: #a3a5a7;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }
    #carouselPromociones .product-image {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: 6px;
    }

    #carouselPromociones .promotion-badge {	
		position: absolute;
		top: 15px;
		right: 15px;
		width: 95px;
		height: 34px;
		background: linear-gradient(135deg, #FFEEAF, #ffff);
		color: black;
		padding: 8px 16px;
		border-radius: 25px;
		font-size: 12px;
		font-weight: 600;   
		font-family: 'Plus Jakarta Sans', sans-serif;	
		letter-spacing: 0.5px;
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
		animation: pulsePromo 2s infinite;
    }


    #carouselPromociones .product-marca {
        font-size: 0.9rem;
        color: #a3a5a7;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }

    #carouselPromociones .product-name {
        font-size: 1rem;
        color: #343a40;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }

    #carouselPromociones .product-price {
        color: #000;
        font-weight: bold;
        text-align: right;
        width: 100%;
        position: relative;
        top: -50px;
        margin-top: 10px;
    }

	#carouselPromociones .imgCarrousel {
		 width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    border-radius: 8px;
	/* object-fit: contain !important;
    object-position: center; */
	}

	.product-card:hover .imgCarrousel {
    transform: none !important;
}

	.carousel-inner {
		 /* display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Optional: for smooth scrolling *
		scroll-behavior: smooth; 
		width: 100%;
    overflow: hidden; 
	 transition: transform 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;*/
	  }

	  .carousel-item {
		width: 100% !important;
		height: auto;
		display: flex !important;
		justify-content: center;
		align-items: center;		
		overflow: hidden;
		 transition: none !important;
    transform: none !important;
  opacity: 0;
  /*display: none; */
	  }
#carouselPromociones .carousel-item.active {
  display: block !important;
}
#carouselPromociones .carousel-item:not(.active) {
    display: none !important;
}

	#carouselPromociones {        
            max-width: 80%;
			margin: 0 auto;			
			border-radius: 20px;
			overflow: hidden;		
			position: relative;
			height: 385px;
    }

	#idCarrousel{
		/* position: relative;		
		top : 250px; */
		/* padding: 250px;
		background-color: #ffcc00; */
	}
	#idCategorias{		
		position: relative;
		margin-top: 50px;
		padding-left: 190px;
	}


	/******Pagina index Principal******/




	/***** pagina Navigator2	*****/

	/* Mostrar solo en pantallas grandes */
	#redesiconsNavegacion{
		display: none!important;
	}

	.nav-right {
		margin-left: 150px; /* Desplazamiento a la derecha */
	  }

	  .logo-lgl {
			display: block;
			position: relative;
			bottom: 5px;
			right: 32px;
			width: 150px;
			height: 80px;
		}

		.logo-lg {
			display: block;
			position: relative;
			right: 32px;
		}
		.logo-sm {
			display: none;
		}
.logo-sml {
			display: none;
		}

	.navbar .container-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		padding: 0 2rem;
	  }
.contenedor-iniciales{
position: relative;
    left: 585px;
}
#templatemo_main_nav{
	position: relative;
    right: 220px;
}

	
  .btnliRegistro {
    display: block !important;
	position: relative;
	left: 615px;
  }

  .iconCarrioto{
    display: block !important;
	position: relative;
	left: 590px;
  }

	.navbar-nav {
		flex-direction: row !important;
		gap: 1.5rem;
	  }
	  .MensajeCarritoVacio{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 24px;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
	}
#btnVolverProdcutos{
	width: 250px;
    height: 45px;
	padding-top: 12px;
	border-radius: 12px;
}
	.btnCreateCuenta{
		border-color: #A0CB32 !important;
		font-family: 'Plus Jakarta Sans', sans-serif !important;
		font-size: 12px !important;
		color: #000 !important;
		width: 120px;
        height: 35px;
    
    }
	
	/* .carousel-indicators{
		position: relative;
		bottom: 50px!important;
	} */

	#sectionCarousel .carousel-indicators
	{
		/* background-color: #003da5; */
        padding-left: 0px;
        width: 500px;
        position: relative;
        top:568px;
        left: -175px !important;	
		/* background-color: red; */
	}

	.carousel-indicators button {
		width: 12px !important;
		height: 12px !important;
		border-radius: 50% !important;
		background-color: #000 !important;
		border: none !important;
		margin: 0 5px !important;
		opacity: 0.5 !important;
		transition: opacity 0.3s ease !important;
	  }
	  
	  .carousel-indicators .active {
		opacity: 1 !important;
		background-color: #000 !important;
	  }


	  
	.btnLogin {
		background-color: #A0CB32 !important;
		color: #000 !important;
		border: none;
		padding: 8px 20px !important;
		font-family: 'Plus Jakarta Sans', sans-serif !important;
		font-size: 12px !important;
    }
	.btnLogRegistro{
		position: relative !important;
		left: 235px;
		margin-left: 1rem;
		display: flex;
		gap: 1rem;
		align-items: center;
	}

	.elementosNav,
.elementosNav a,
.elementosNav .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #000 !important; /* 🔥 fuerza el negro */
}


	.elementosNav{
		font-family: 'Plus Jakarta Sans', sans-serif;				
		font-size: 12px;
		font-weight: bold;
		color: #000;
	}
	.badge-carrito{
	position: relative;
    bottom: 14px;
    left: -40px;
	font-family: 'Plus Jakarta Sans', sans-serif;				
	font-size: 10px!important;	
	 background-color: #FFDD5F;
    color: #333; /* Texto oscuro para mejor contraste */
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    min-width: 10px; /* Para números de más de 1 dígito */
}

 #iconoCarritoEstado{
		width: 30px;
        height: 30px;
        position: relative;
        top: 0px;
        right: 25px;
	  }
	.iconCarrioto{
		display: block !important;
	}
	.btnliRegistro{
		display: none !important;
	}

	.navbar .container {
		flex-wrap: nowrap;
		gap: 1rem;
	}
	.navbar {
		position: relative;
		top: 0px;		
		height: 70px;
		padding-left: 10px;
	  }
	.navbar-toggler{
		position: relative!important;
		left: 0px!important;
	}	

	/***** pagina Navigator2	*****/

	/*Siled Subcategorias  */

/* Ajusta el tamaño de cada slide */
	.swiper-slide {
		width: auto !important; /* Permite que los slides se ajusten al contenido */
		max-width: 200px; /* Establece un ancho máximo */
		height: auto; /* Ajusta la altura automáticamente */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* Asegura que el slider no ocupe la mitad de la página */
	.swiper {
		width: 100%;
		height: auto;
		padding: 20px 0; /* Espaciado arriba y abajo */
	}

	/******fOOTER******/

	.social-icon {
		text-decoration: none; /* Quita la línea azul */
	}
.social-icon img {
    width: 50px; /* Tamaño de los íconos */
	height: 50px;
    transition: transform 0.3s, opacity 0.3s;
	text-decoration: none;
}

.social-icon:hover img {
    transform: scale(1.2);
    opacity: 0.8;
	text-decoration: none;
}


/******fOOTER******/



/* Estilo general del botón */
	.textServicesIcon{
		font-size: 18px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-optical-sizing: auto;  
		font-style: normal;
		font-weight: bold;
	}
	.carousel-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		background: #007bff;
		color: white;
		padding: 10px;
		border-radius: 10px;
		width: 150px; /* Ancho fijo */
		height: 180px; /* Altura ajustada */
		overflow: hidden;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
	}

	.carousel-button:hover {
		transform: scale(1.05); /* Efecto de crecimiento al pasar el mouse */
	}

	/* Estilo de la imagen dentro del botón */
	.button-image {
		width: 100%;
		height: 100px; /* Tamaño fijo para la imagen */
		object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
		border-radius: 8px;
		position: relative;
		top: -15px;
	}

/* Estilo del texto dentro del botón */
	.button-text {
		font-size: 14px;
		text-align: center;
		margin-top: 5px;
		font-weight: bold;
	}
/* Ajusta el tamaño de los botones dentro del slide */

/* Carrousel button  */
	.carousel-button {
		display: block;
		padding: 10px 15px;
		background: #007bff;
		color: white;
		text-decoration: none;
		border-radius: 5px;
		font-size: 16px;
		width: 100px;		
		height: 100px;
		background-color: #fff;
		border: solid 2px #ffcc00;
		border-radius: 50%;
		margin: auto;
		display: block;
	}

/* Evita que el slide sea demasiado grande */
	#SiledeBotones {
		max-width: 100%;
		overflow: hidden;
		height: 125px;	
	}
/*Siled Subcategorias  */

	.slider {
		display: flex;	
		overflow-y: hidden;	
		overflow-x: scroll;	
		justify-content: space-between;	
		align-items: center;	
		padding: 15px 30px 30px 30px;	
		color: #dc5b00;	
	}
	
	.slider-container {
		position: relative;	
		display: inline-block;	
		vertical-align: baseline;	
		width: 100%;	
	}
	.mySlides{
		width: 100px;
		height: 100px;
	}	
	
	#sectionCarousel {
		overflow: hidden;
        width: 100%;
		height: 580px;
        padding: 0px;
        /* background-color: red; */
        position: relative;
        left: 0px;
		bottom: 131px;
		padding-left: 200px;
	}

	.carousel {
		display: flex;
		scroll-snap-type: x mandatory;
		overflow-x: auto;
		overflow-y: hidden; /* Previene scroll vertical */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
		width: 504px;
		height: 548px;
		border-radius: 12px;
	}

	.carousel::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	.carousel-slide {
		height: 700px; /* Altura fija */
		display: flex;
		align-items: center;
		justify-content: center; /* Centra horizontalmente */
		background: #f5f5f5; /* Puedes ajustar el fondo si lo deseas */
		flex: 0 0 100%; /* Que cada slide ocupe todo el ancho del carrusel */
		}
		
		.carousel-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* O usa 'contain' si no quieres recortes */
		object-position: center;
		}

	.imagenProductoID {
		width: 100%; /* Ocupa todo el ancho del contenedor */
		height: 100%; /* Ocupa todo el alto del contenedor */
		object-fit: cover; /* Ajustar la imagen para cubrir el espacio sin distorsionarla */
	}
	/* Contenedor de la imagen (para posicionar la etiqueta) */
	.imagen-contenedor {
		position: relative; /* Permite posicionar la etiqueta de manera absoluta dentro de este contenedor */
		width: 100%; /* Ocupa todo el ancho de la tarjeta */
		height: 200px; /* Altura fija para el contenedor de la imagen */
		display: flex; /* Usar flexbox para centrar la imagen */
		justify-content: center; /* Centrar horizontalmente */
		align-items: center; /* Centrar verticalmente */
		overflow: hidden; /* Evitar que la imagen se desborde */		
	}
	/* Estilo para la etiqueta de promoción */
	.promocion-etiqueta {
		position: absolute; /* Posición absoluta dentro del contenedor de la imagen */
		top: 0px; /* Distancia desde la parte superior */
		left: 0px; /* Distancia desde la izquierda */
		background-color: rgba(76, 175, 80, 0.8); /* Fondo verde semi-transparente */
		color: white; /* Color del texto */
		padding: 5px 10px; /* Espaciado interno */
		border-radius: 5px; /* Bordes redondeados */
		font-size: 14px; /* Tamaño de la fuente */
		font-weight: bold; /* Texto en negrita */
		z-index: 1; /* Asegura que esté por encima de la imagen */
	}
	.card-body {
		/*text-align: left;  Centrar el texto *
		padding: 5px;  Espaciado interno */
		padding: 12px 16px;
	}
	/* Estilo para que la imagen ocupe el ancho completo */
	

	/* Estilo para el contenedor principal */
	.container {
		padding: 20px; /* Elimina el padding predeterminado */
		margin-top: 0; /* Elimina el margen superior */
		/* background-color: #ffcc00; */
	}

	/* Estilo para el contenido debajo de la imagen */
	.producto-info {
		padding: 20px;
		background-color: #f8f9fa; /* Fondo claro para resaltar la información */
		text-align: center; /* Centra el texto */
	}
	.imgDetalleProducto {
		width: 200px;
		height: 200px;
	  }
	.tempaltemo_footer{
		/*background-color: RGB(127, 255, 0);*/
		/*background-color: RGB(255, 255, 102);*/
		background-color: RGB(0, 51, 102);
		/* background-color: RGB(50, 50, 50); */
		/* background-color:  RGB(240, 240, 240); */
	}
	
	#logoEmpresaFooter {
		width: 100px;
		height: 100px;
	}
	.dashboard-image {
		width: 120px;
		height: 120px;
	}

	#IconosSeccion1{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion2{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion3{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion4{
        width: 100px;
        height: 100px;
    }

	#IconosSeccion5{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion6{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion7{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion8{
        width: 100px;
        height: 100px;
    }
	#IconosSeccion9{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion10{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion11{
        width: 100px;
        height: 100px;
    }
    #IconosSeccion12{
        width: 100px;
        height: 100px;
    }


	/* CSS para asegurar que las imágenes de las tarjetas tengan el mismo tamaño */
	.card-img-top {
		width: 100%;              /* Hace que la imagen ocupe el 100% del ancho de la tarjeta */
		height: 225px;            /* Establece una altura fija para todas las imágenes */
		object-fit: contain;      /* Ajusta la imagen para que se ajuste al contenedor sin recortarla ni deformarla */
		object-position: center;  /* Centra la imagen dentro del contenedor */
	}


	.Googlemaps{
		width: 600;
		height: 450;
	}

	.txtIncialesNombre {
		margin-right: 1rem;
		font-weight: bold;
		font-size: 1rem;
		color: #000;
	}
	.container-nav {
		width: 100%;
		padding-top: 0px;
		padding-left: 15px;
		padding-right: 15px;
		/*padding: 0;  Elimina el padding predeterminado */
		/*margin-top: 0;  Elimina el margen superior */
		/* background-color: blue; Fondo azul para el contenedor */
		display: flex;
		flex-wrap: inherit;
	}
	
	#logoEmpresaNavBar {

		width: 256px;
		height: 31.63px;
		/* max-height: 50px;
		height: auto;     */
	}
  
	#promocionesModalLabel {
	  font-size: 50px;  /* Tamaño de texto original */
	  padding-left: 150px;
	}
  
	.card-title,.card-text {
		text-align: center;
	  font-size: 30px;  /* Tamaño de texto original */
	}
  
	.ranaflor {
	  width: 40px;
	  height: 45px;
	}
  
	.seccion2Index {
	  padding: 250px;  /* Tamaño de padding original */
	}
  
	.contetnIMGCarousel {
	  height: 500px;  /* Tamaño de imagen original */
	}
  
	#promocionesModalLabel {
		padding-left: 150px;
	}
	
	.ranaflor {
		width: 40px;
		height: 45px;
	}

	.seccion2Index {
		padding: 250px;
	}
	
	.contetnIMGCarousel {
		height: 500px;
	}
  
	.imgHistoria {
		width: 100%;
		height: 100%;
	}

  

	html, body {
    overflow-x: hidden;
}

#carouselPromociones {
    overflow-x: hidden;
}

  
}

  @media (min-width: 1440px) {	

	.btnAtraz{
		position: relative!important;
		left: 70px!important;
		color: #000!important;
		/* width: 50px!important;
		height: 50px!important; */
	}
	.mensaje-texto{
		font-size: 12px !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: #000 !important;
		/* background-color: gray; */
    	width: 400px;
		position: relative;
		left: 25px!important;
	}
	#SeccionDetalle{
		display: none!important;
	}
	.contenedor-iniciales{
position: relative!important;
    left: 1125px!important;
}

	
  .btnliRegistro {
    display: block !important;
	position: relative!important;
	left: 1129px!important;
  }
  .iconCarrioto{
    display: block !important;
	position: relative!important;
	left: 1110px!important;
  }
.formularioContaco{
		/* background-color: blue; */
		padding-left: 625px !important;
	}

	#btnVolverCatalogo{
		position: relative;
		left: 65px;
		border-color: #A0CB32 !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        
		font-weight: bold!important;
		font-size: 12px!important;
		line-height: 24px!important;
		letter-spacing: 0%!important;

        color: #000 !important;
		width: 312px!important;
        height: 56px!important;
		display: flex!important;
		justify-content: center!important;
		align-items: center!important;
		text-align: center!important;		
		padding: 10px 20px!important; /* Ajusta si quieres más espacio interno */		
		text-decoration: none!important;
		border-radius: 12px!important;
	}
	.check-icon{
		position: relative;
		left: 150px;
	}
	.mensaje-container{
		    /* background-color: blue; */
    padding-left: 350px;
    padding-right: 250px;
	}
#mensaje{
	/* background-color: red; */
	padding-top: 250px;
    padding-left: 350px;
    padding-right: 250px;
    align-items: center;
}

	.btnCerrarSession{
	width: 134px !important;
	height: 35px !important;
    background-color: #A0CB32!important;
    border: none;
    border-radius: 12px!important;
	font-size: 12px!important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	padding-top: 7px!important;
	position: relative;
	left: 183px;
	bottom: 4px;
}
	 #iconoCarritoEstado{
		width: 30px;
        height: 30px;
        position: relative!important;
        top: 10px!important;
        right: 25px!important;
	  }

	.badge-carrito{
	position: relative;
    bottom: 26px;
    left: -10px;
	font-family: 'Plus Jakarta Sans', sans-serif;				
	font-size: 10px;	
	 background-color: #FFDD5F;
    color: #333; /* Texto oscuro para mejor contraste */
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-flex;    
	align-items: center;
    justify-content: center;    
    font-weight: bold;
    text-align: center;
    line-height: 1;
    min-width: 24px; /* Para números de más de 1 dígito */
}
	.labelDireccion{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold;
	}
	.labelCorreo{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold;
	}

	.labeltelefono{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold;
	}

	.labelApellido{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold;
	}

	.labelNombre{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		font-weight: bold;
	}
 .carousel-item {
		width: 100% !important;
		height: auto;
		display: flex !important;
		justify-content: center!important;
		align-items: center!important;		
		overflow: hidden!important;
		 transition: none !important;
    transform: none !important;
  opacity: 0;
  /*display: none; */
	  }
	#redesiconsNavegacion{
		display: none!important;
	}


	.labelContrasenaReg{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

	}
	.labelDireccionReg{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

	}
	.labelCorreoReg{
		font-family: 'Plus Jakarta Sans', sans-serif;	
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

	}
	.labelTelefonoReg{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
	}
	.LabelNombreApellidoReg{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

	}

	
	.labelVolversesion{
		/* color: black !important; */
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: bold;
	}
	.btnFormularioSave{
		background-color: #A0CB32 !important;
        color: #fff;
        border: none;
        padding: 10px 0 !important;
        width: 50% !important;
        height: 50px !important;
		position: relative;
		left: 21%;
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
	}

	.tituloFormCliente{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0%;
		text-align: center;
		position: relative;
		right: 160px;
	}
	#seccionLogoRegistro{
		position: relative;
		top: 150px;
		/* background-color: red;	 */
		padding-left: 720px;
	}

	.contentLogo{
		/* background-color: blue; */
	}

	.logo-desktop {
        display: block;
		width: 50%;
    }
    .logo-mobile {
        display: none;
    }
	
	#seccionformcuenta{
		/* background-color: #003da5; */
        position: relative;
        top: 20px;
        padding-left: 215px;
	}

	#btnProcesarPedidoSection{
		/* background-color: #003da5; */
		padding-left: 65px!important;
	}

	.btnProcesarPedido {
        background-color: #A0CB32 !important;
        color: #000 !important;
        border: none !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
        font-weight: 500 !important;
        transition: background-color 0.3s ease !important;
        position: relative;
        bottom: 0px;
        left: 685px;
        width: 210px !important;
		height: 58px!important;
	}

	.btn-eliminar-carrito {
        position: relative;
        left: 300px;
        width: 46px !important;
        height: 46px !important;
        border: 2px solid #b4d600 !important;
        border-radius: 12px;
        margin-left: 10px;
        color: #000;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
	}

	/*****Pgina Login ***********/

    .cantidad-box-Carrito {
        position: relative;
        right: 794px;
        top: 95px;
        /* background-color: red; */
        width: 550px;
        height: 70px;
	}

	.txtCrearCuenta{
		position: relative;
		bottom: 14px;
	}

	.contentTextNuevoUsuairo{
		/* background-color: red; */
		position: relative;
        right: 50px;
        top: 70px;

	}

	.login-links a {
		color: #007bff;
		font-size: 14px;
	}

	.login-links{
		position: relative;
        top: 90px;
        right: 50px;
        /* background-color: red; */
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: -0.6%;
		text-align: center;
		text-decoration: underline;
		text-decoration-style: solid;		
		text-decoration-thickness: 0%;
	}


	/* 
	
	font-family: body-font;
font-weight: 700;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.6%;
text-align: center;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-offset: 0%;
text-decoration-thickness: 0%;

	*/

	.btn-green {
		background-color: #A0CB32;
		color: white;
		font-weight: bold;
		width: 184px;
		height: 55px;
		position: relative;
		left: 119px;
		top: 122px;
		border-radius: 12px;
	}

	.btn-green:hover {
		background-color: #8FB52C;
	}

	.txtInicioSession{
		position: relative;
		top: 102px;
		right: 55px;
	}
	.labelLogin{
		position: relative;
		top: 6px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
	}

	.contentPassword{
		position: relative!important;
		top: 43px!important;		
	}

	.login-box {
		max-width: 640px;
		width: 100%;
		height: 790px;
		text-align: center;
		/* background-color: #003da5; */
		position: relative;
        left: 640px;
        top: 130px;		
		padding-left: 109px;
	}

	.contentForm{
		position: relative;
        left: 0px;
        top: 124px;
		align-items: left;
		text-align: left;
		height: 500px;
	}
	.logo-lg-Login{
		position: relative!important;
		left: -65px!important;
		top: 66px!important;

		width: 168!important;
		height: 31.634458541870117!important;
		justify-content: space-between!important;
		padding-top: 2px !important;
		padding-bottom: 2px!important;
	}


	/*****Pgina Login ***********/	


	/*****Pgina Detalle producto ***********/	
	/*****Estilo Añadir Carrito ***********/

	/* 
	.font-family: headline-font;
font-weight: 700;
font-size: 32px;
line-height: 36px;
letter-spacing: 0%;


font-family: body-font;
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: 0%;
*/

.AltoDato {
        position: relative;
        top: -72px !important;
    }

	.EspesorDato {
        position: relative;
        top: -42px !important;
    }
    .AnchoDato{
        position: relative;
        top: -58px !important;
    }
    .ColorDato{
        position: relative;
        bottom: 1px !important;
        top: -62px !important;
    }


.MaterialDato{
		position: relative;
		top: -47px!important;
	}
	 .skuDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		text-align: left;
		position: relative;
		right:-550px;
		top: -32px;
		/*width:598px;		 */
	}

	 .titleSKU{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #000;
		text-align: left;
		
	}
	 .contenttextVerCarrito{
		position: relative;
		bottom: 33px !important;
        left: 85px;
		/* background-color: #003da5; */
		/* padding-left: 250px!important; */
	}

	.tituCarritoVacio{
		position: relative;
		top: 10px;
		right: 250px!important;
		font-family: 'Plus Jakarta Sans', sans-serif;        
		font-weight: 700;
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0%;
		text-align: center;

	}

	.MensajeCarritoVacio{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 15px;
		line-height: 24px;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		position: relative;
		right: 230px!important;
	}
#btnVolverProdcutos{
	        position: relative !important;
        right: 165px !important;
        width: 296px !important;
        height: 45px !important;
}
	.cotentnBotonCatalogoProd{		
		position: relative;
		top: 25px;
		right: 50px!important;
		/* padding-left: 110.5px; */
	}

	.btnLogin {
        background-color: #A0CB32 !important;
        color: #000 !important;
        border: none;
        padding: 8px 20px !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 12px !important;
		width: 133px!important;
        height: 37px!important;
    }

	.btnCreateCuenta {
        border-color: #A0CB32 !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        
		font-weight: bold!important;
		font-size: 12px!important;
		line-height: 24px!important;
		letter-spacing: 0%!important;

        color: #000 !important;
		width: 134px!important;
        height: 37px!important;
		display: flex!important;
		justify-content: center!important;
		align-items: center!important;
		text-align: center!important;		
		padding: 10px 20px!important; /* Ajusta si quieres más espacio interno */		
		text-decoration: none!important;
		border-radius: 12px!important;
    }
	.contentMensajeCarritoVacio{
		/* background-color: yellow; */
		padding-left: 70px;
		position: relative;
		top: 10px;
		width: 560px;
	}
	.contentTituloCarritoVacio{
		padding-left: 0px;
		width: 635px;		
	}

	.contentImagenCarrito {
        background-color: #ffffff;
        padding-top: 155px;
        padding-left: 250px;
	}
	.imgiconCarrito{
		
		object-fit: contain;
        position: relative;
        right: 80px;

	}
	
	.carritoVacio{
		position: relative;
        bottom: 45px;
		padding-left: 640px;
		padding-right: 640px;
	}  

	.verCarrito {
        position: relative !important;
        bottom: 834px !important;
        left: 735px !important;
        width:500px !important;
        height: 38px !important;
    }

	.contetButton {
        bottom: 843px;
        left: 0px;
		padding-left: 250px!important;
		/* background-color: #003da5; */
	}

	#sectionCarousel .carousel-indicators
	{
		/* background-color: #003da5; */
        padding-left: 0px;
        width: 500px;
        position: relative;
        top: 563px;
        left: -255px !important;	
	}

	.carousel-indicators button {
		width: 12px !important;
		height: 12px !important;
		border-radius: 50% !important;
		background-color: #000 !important;
		border: none !important;
		margin: 0 5px !important;
		opacity: 0.5 !important;
		transition: opacity 0.3s ease !important;
	  }
	  
	  .carousel-indicators .active {
		opacity: 1 !important;
		background-color: #000 !important;
	  }
	  

	.btnDetalleProd {
        width: 289px !important;
		height: 52px;
        background-color: #A0CB32 !important;
        position: relative !important;
        left: 517px !important;
		border: none!important;
		border-radius: 12px!important;
	}

	.fichatecnicaDetalleProd {
        position: relative !important;
        bottom: 0px;
        left: -11px;
	}

	.PDescripcionDetalleProd {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        color: #000;
        font-weight: 400px;
        text-align: left;
        position: relative;
        left: -14px;
        top: -10px;
        width: 100%;
	}

	.ContentprecioDetalle {
        position: relative;
        top: 0px;
        left: 0px;
        text-align: left; 
		width: 500px;
		padding-left: 0px;
    }

	.sectionPrdo {
        position: relative;
        bottom: 125px;
        left: 0px;
		/* background-color: #007bff; */
		padding-left: 195px;
		padding-right: 195px;
    }
	/*****Estilo Añadir Carrito ***********/


	/*****Estilo Cantidad Box ***********/

	.cantidad-input {
        width: 150px !important;
        height: 45px !important;
        border: none !important;
        background-color: #f9f9f9!important;
        font-weight: 500!important;
        text-align: center!important;
        padding: 0!important;
		vertical-align: middle!important;
	}

	.btn-left {
        /* border-right: none !important; */
        border-top-left-radius: 14px !important;
        border-bottom-left-radius: 14px !important;
	}

	.btn-cantidad {
        width: 46px!important;
        height: 46px!important;
        background-color: white !important;
        color: #212121 !important;
        border: 2px solid #b4d600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.4rem !important;
        padding: 0 !important;
        line-height: 1 !important;
		position: relative;
		right:0px;
    }

	.cantidad-box {
        position: relative;
        left: 686px;
        bottom: 1075px;
		/* background-color: #003da5; */
		width: 305px;
    }
	/*****Estilo Cantidad Box ***********/

	/*****Estilo Seccion Carrusel ***********/

.carousel-slide {
height: 700px; /* Altura fija */
display: flex;
align-items: center;
justify-content: center; /* Centra horizontalmente */
background: #f5f5f5; /* Puedes ajustar el fondo si lo deseas */
flex: 0 0 100%; /* Que cada slide ocupe todo el ancho del carrusel */
}

.carousel-slide img {
width: 100%;
height: 700px;
object-fit: cover; /* O usa 'contain' si no quieres recortes */
object-position: center;
}
	
	.carousel {
		display: flex;
		scroll-snap-type: x mandatory;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		width: 700px; /* Asegura que ocupe todo el ancho del padre */
		height: 548px; /* Altura igual a los slides */
	}
	
	#sectionCarousel {
		/* background-color: orange; */
		width: 100%;
		height: 580px; /* Altura igual a los slides */
		padding: 0;
		position: relative;
		left: 0;
		bottom: 128px;
		padding-left: 195px; /* Quita esto si no lo necesitas */
	}
	
	 /*****Estilo Seccion Carrusel ***********/

	/*****Estilo Seccion infoProducto ***********/


	/* 
	
	font-family: body-font;
font-weight: 400;
font-size: 12px;
line-height: 20px;
letter-spacing: 0%;


font-family: body-font;
font-weight: 700;
font-size: 14px;
line-height: 24px;
letter-spacing: 0%;


font-family: body-font;
font-weight: 700;
font-size: 14px;
line-height: 24px;
letter-spacing: 0%;

	*/

	.precioDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 32px;
		line-height: 36px;
    	letter-spacing: 0; 
		color: #000;
		font-weight: bold;
		text-align: left;
	}	
	.DimensionesDetalleProd{		
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0%;
		color: #000;
		position: relative;
		top: -36px;
		left: -15px;
	}
	.nombreProdDetalle{		
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 400;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 0%;
		color: #000;
		position: relative;
		top: -29px;
		left: -15px;
	}
	
	.titleDetalleMarca{		
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;
		color: #a3a5a7;
		position: relative;
		top: -20px;
		left: -15px;
	}

	.containerInfoProd{
		position: relative;
		top: 6px;
		left: 0px;
		width: 100%;
		/* background-color: gray;		 */
	}
	.container{		
		max-width: 100%!important;
		/* background-color: yellow; */
	}
	#infoProducto{
		/* background-color: blue; */
		padding-left: 963px;		
	}
	.txtCantidadDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 0%;

		position: relative;
		bottom: 46px;
		left: 65px;

	}

	/*****Estilo Seccion infoProducto ***********/
	/*****Esitlo Boton Atraz ***********/


	#sectionHeaderDetalleProd{
		position: relative;
        bottom: 18px;
		padding-left: 120px;
		padding-right: 120px;
		padding-bottom: 50px;
	}

	/*****Esitlo Boton Atraz ***********/

	/*****Esitlo NavBar ***********/
	.logo-lg{
		display: block;
			position: relative;
			right: 32px;
	}
	/*****Esitlo NavBar ***********/
	/*****Pgina Detalle producto ***********/






	/*******Pagina index Principal******/
	/*****Estilo Subcategorias******/
	.subcategorias-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap:3px;
		max-width: 1200px;
		width: 100%;
		/* background-color: #FF96AA; */
		/* margin: 0 auto; */
	}

	#subcategorias-container{
		/* background-color: #10b328; */
		padding: 27px;
		display: flex;
		justify-content: flex-start; /* 👈 Esto alinea todo a la izquierda */
		padding-left: 415px; /* Ajustalo como prefieras */
	}

	/*****Estilo Subcategorias******/




	/*********Estilos para la seccion categorias***********/

	.categories-slider {
		display: flex;
		flex-wrap: nowrap;
	}
	
	
	.category-item {
		flex: 0 0 auto; /* No crecer, no encoger, ancho automático basado en el contenido */
		margin-right: 30px; /* Espacio entre los items */
		text-align: center;
		min-width: 80px; /* Ancho mínimo para cada categoría */
	}

	.category-button {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.category-icon-container {
		background-color: #fff; /* Fondo gris claro para el círculo del icono */				
		width: 95px;
		height: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		border-radius: 50%;
	}

	.category-icon {
		width: 64px;
		height: 64px;
		object-fit: contain;
		border-radius: 50%;
	}

	.category-name {
		font-size: 14px;
		font-family: 'Plus Jakarta Sans', sans-serif;
        color: #343a40;
        margin-top: 0px;
        margin-bottom: 0px;
        
        position: relative;
        bottom: 1px;
	}
	.category-button.active .category-name {
		color: #000000; /* más oscuro */
		font-weight: bold; /* opcional, para que se vea más fuerte */
	}

	/* Estilos para el primer item para que no tenga margen a la izquierda */
	.categories-slider .category-item:first-child {
		margin-left: 0px; /* Ajustar si es necesario */
	}

	/* Estilos para el último item para que no tenga margen a la derecha */
	.categories-slider .category-item:last-child {
		margin-right: 10px; /* Ajustar si es necesario */
	}	


	.categories-slider-container {
		overflow-x: auto;
	background-color: #f8f9fa;
	padding-left: 50px;  /* mucho más seguro que 210px */
	padding-right: 16px;
	white-space: nowrap; /* opcional pero puede ayudar en scroll horizontal */
	height: auto; /* <<--- importante */;
	}

	#idCategorias{		
		position: relative;
	margin-top: 50px;
	}

	/*********Estilos para la seccion categorias***********/


	/***********Estilos para la seccion carrusel de productos***********/
		#productosIndex{
			/* background-color: #ffcc00 !important; */
			position: relative;
			bottom: 31px;
			padding-left: 5px;
			background-color: #fff!important;
		}
		#productos-categoria{
			position: relative;
			top: 0px;
			text-transform: capitalize;
		}

		.producto-row {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 24px;
			padding-inline: 24px; /* margen proporcional extra */
			padding-block: 20px;
			max-width: 1525px;
			margin: 0 auto;
			box-sizing: border-box;
		}

		.card-text-Prod-Precio{
			font-size: 20px;
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-weight: 700;
			font-size: 14px;
			line-height: 24px;
			letter-spacing: 0%; 

			color: #000;
			position: relative;
			bottom: 35px;
			left: 0px;
			font-weight: bold !important;    
		}
		.card-text-Prod-Dimencion{
			font-size: 12px;
			font-weight: 400;
			font-family: 'Plus Jakarta Sans', sans-serif;
			line-height: 20px;
			letter-spacing: 0%;
			color: #000;
			position: relative;
			bottom: 20px;
			left: 0px;
		}
		
		.card-text-Prod-Marca{
			font-size: 12px;
			font-weight: 400;
			font-family: 'Plus Jakarta Sans', sans-serif;
			line-height: 20px;
			letter-spacing: 0%;
			color: #9A9A9A;
			position: relative;
			bottom: 00px;
			left: 0px;

		}
		.card-title-Prod-nombre{
			font-size: 15px;
			font-family: 'Plus Jakarta Sans', sans-serif;
			font-weight: 400;
			font-size: 14px;
			line-height: 24px;
			letter-spacing: 0%;

			color: #000;
			position: relative;
			bottom: 15px;
			left: 0px;		
		}
		.card {
			/*height: 400px !important;
			overflow: hidden;  asegura que el borde redondeado se aplique a todo */
			/*background-color: #c21515 !important;  /*color de fondo blanco */
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0px 2px 12px rgba(0,0,0,0.1);
			background-color: #fff;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.card-img-top-prod {
			width: 100%;
			height: 250px;
			object-fit: cover; /* Cambiar a 'cover' si quieres que se llene mejor el espacio sin dejar bordes blancos */
			object-position: center;
			/*border-radius: 12px;  Ajusta esto si quieres más o menos redondeado */
			border-bottom: 1px solid #f0f0f0;
		}	

		.producto-col {
			flex: 1 1 240px;
			max-width: 350px;
			min-width: 240px;
			
			/*width: 100%;
			padding: 8px;
			box-sizing: border-box;
			width: 17% !important; */
		}
		.producto-col:hover {
			transform: translateY(-5px);
		}

		.promotion-badge-Productos{
			
			position: absolute;
			top: 8px;
			right: 10px;
			background-color: #FFEEAF;
			color: #000000a3;
			padding: 5px 10px;
			border-radius: 5px;			
			z-index: 10;

			font-family: 'Plus Jakarta Sans', sans-serif !important; 
			font-weight: 400;
			font-size: 12px;
			line-height: 20px;
			letter-spacing: 0%;
		}
		.card-body {
			/*text-align: left;  Centrar el texto *
			padding: 5px;  Espaciado interno */
			padding: 12px 16px;
		}
		/***Estilo de seccion productos***/
		
		/********Estilos para la seccion carrusel de productos***********/

		.carousel-inner{
			height: 643px!important;
		}
		#carouselPromociones .product-card {
			background-color: #fff;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			width: 100%!important;
			height: 438px!important;
			/* max-width: 100%; */
			margin: 0%!important;

		}
		
		#carouselPromociones .product-image-container {
			width: 100%;
			height: 398px;
			max-height: 550px;
			overflow: hidden;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#carouselPromociones .product-info {
			text-align: left;
			position: absolute!important;
        	top: 346px!important;
			height: 104px!important;
		}
	
	
		#carouselPromociones .product-dimensiones{
			color: #a3a5a7;
			text-align: left;
			width: 100%;
			margin-bottom: 5px;
		}
		#carouselPromociones .product-image {
			width: 100%;
			max-height: 200px;
			object-fit: contain;
			border-radius: 6px;
		}
	
		#carouselPromociones .promotion-badge {
			position: absolute;
			top: 15px;
			right: 10px;
			background-color: #FFEEAF;
			color: #000;
			padding: 5px 10px;
			border-radius: 5px;
			font-size: 0.8rem;
			z-index: 10;
		}
	
		#carouselPromociones .product-marca {
			font-size: 0.9rem;
			color: #a3a5a7;
			text-align: left;
			width: 100%;
			margin-bottom: 5px;
		}
	
		#carouselPromociones .product-name {
			font-size: 1rem;
			color: #343a40;
			text-align: left;
			width: 100%;
			margin-bottom: 5px;
		}
	
		#carouselPromociones .product-price {
			color: #000;
			font-weight: bold;
			text-align: right;
			width: 100%;
			position: relative;
			top: -50px;
			margin-top: 10px;
		}
	
		#carouselPromociones .imgCarrousel {
			width: 100%;
			height: 400px;
			/* object-fit: cover; */
			border-radius: 0;
		}
	
	
		#carouselPromociones {        
			/* background-color: #1678da; */
			overflow: hidden;
			/* padding-left: 180px;
			padding-right: 180px; */
			position: relative;
			bottom: 1px;
			width: 100%!important;
			height: 100% !important;

		}
	
		#idCarrousel{
			/* background-color: #ffcc00; */
			height: 500px!important;
		}
		/********Estilos para la seccion carrusel de productos***********/
		/*******Pagina index Principal******/
}

  /* Para móviles pequeños (pantallas menores a 600px) */
  @media (max-width: 768px) {
	.imagen-contenedor, .card-img-top, .imagenProductoID, .imgDetalleProducto {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.carousel-item {
		width: 100%;
	}
	.logo-desktop {
        display: none;
    }
    .logo-mobile {
        display: block;
    }
	.contentCorreo{
		width: 100%!important;
	}
	#correo{
		width: 100%!important;
	}
	#password{
		width: 100%!important;
	}
	.contentForm{
		padding: 10px;
	}
	/**********Pangina cerrar sesión***********
	.btn-logout {
        background-color: var(--danger-color);
        color: white;
    }
    
    .btn-logout:hover {
        background-color: #A0CB32;
        transform: translateY(-2px);
    }
    
    .btn-cancel {
        background-color: var(--dark-color);
        color: white;
    }
    
    .btn-cancel:hover {
        background-color: #1a252f;
        transform: translateY(-2px);
    }
	



	.txtIncialesNombre{
		font-size: 15px!important;
		position: relative!important;
		right: 15px !important;
        top: 5px;
    
	}

	**************Pagina pedido exitoso***********/
	.text-center{
		font-size: 15px!important;
	}
	.text-success{
		font-size: 20px!important;
		font-weight: bold;
	}

	/**********Pagina Contactos***********/
	#labelCerrarSesion{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-weight: 700;
		font-size: 12px;
		line-height: 28px;
		letter-spacing: 0%;
		color: #000;
		position: relative;
		top: 0px;
		left: 0px;
	}
	.btnCerrarSession{
		width: 100% !important;
        background-color: #A0CB32!important;
        border: none!important;
        border-radius: 12px!important;
		position: relative!important;		
		top: 150px!important;
	}
	#templatemo_main_nav {
		/* position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		background-color: white;
		z-index: 9999;
		padding: 1rem;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
		position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
        display: none; /* Se mostrará con el toggle */
        flex-direction: column;
        justify-content: space-between;
	  }
	  
	  #templatemo_main_nav.show {
        display: flex;
    }
	.navbar-collapse {
		position: fixed; /* Fija el menú para que ocupe toda la ventana */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white; /* O el color de fondo que desees para el menú */
		z-index: 1000; /* Asegura que esté por encima de otros elementos */
		padding-top: 60px; /* Espacio para que no se oculte detrás de la barra superior */
		overflow-y: auto; /* Permite el scroll si el contenido es muy largo */
		display: none !important; /* Oculta el menú por defecto en móvil */
		flex-direction: column !important; /* Asegura que los elementos internos se apilen */
		align-items: stretch !important; /* Estira los elementos para ocupar el ancho */
		justify-content: flex-start !important; /* Alinea el contenido desde la parte superior */
	  }
	  .navbar-collapse.show {
		display: flex !important; /* Muestra el menú cuando la clase 'show' está presente (al hacer clic en el botón) */
	  }
	  .navbar-toggler {
		z-index: 1001; /* Asegura que el botón hamburguesa esté por encima del menú desplegado */
	  }
	
	.nav-right {
        order: 1;
    }
	.navbar-nav {
		flex-direction: column !important; /* Apila los items del menú */
		align-items: stretch !important; /* Estira los links para ocupar el ancho */
	  }
	.nav-item {
    border-bottom: 1px solid #eee; /* Opcional: añade separadores entre los items */
  }
  .nav-link {
    padding: 1rem 1.5rem !important; /* Aumenta el padding para mejor interacción táctil */
    text-align: left !important; /* Alinea el texto a la izquierda */
  }
	  /*Diego*/
	  .navbar {
		width: 100%;
		padding-left: 23px;
	  }
	.navbar-toggler{
		position: relative!important;
		left: 0px!important;
	}
	#mensaje {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60px 20px;
		text-align: center;
		background-color: #ffffff;
	  }
	  
	  .mensaje-container {
		max-width: 400px;
		margin: 0 auto;
	  }
	  .boton-regreso{
		color: #000!important;
	  }
	  
	  .check-icon {
		width: 150px;
		margin-bottom: 20px;		
	  }
	  
	  .mensaje-titulo {
		color: #3B6D0B; /* Verde fuerte */
		font-size: 20px;
		margin-bottom: 10px;
	  }
	  
	  .mensaje-texto {
		color: #333333;
		font-size: 14px;
		margin-bottom: 30px;
	  }



	.btnNosotros{
		color: #000!important;
		background-color: #A0CB32!important;
		width: 150px!important;
		position: relative!important;
		left: 30%!important;
	}

	.subtext {
		text-align: center;
		color: #555;
		font-size: 15px;
		margin: 4px 0;
	  }
	  
	/**********Pagina Contactos***********/



	/**********Pagina Nosotros***********/
	.divTituloNosotros{
		text-align: center;
	}

	.TituloNosotros{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 30px;				
	}

	.ParrafoNosotros{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 19px;		
		color: #423a3a;
	}
	/**********Pagina Nosotros***********/





	/***********pagna carrito************/

	.flechaIzquierdaDetalleProdCarrito{
		font-size: 22px;
		color: #000;
		align-items: center;
	}
	.btn-eliminar-carrito{
		position: relative;
		left: 15px;
		width: 60px!important;
		height: 40px!important;
		border: 2px solid #b4d600!important;
		border-radius: 10px;
		margin-left: 10px;
		color: #000;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cantidad-box-Carrito{
		position: relative;
		left: 0px;
		bottom: 25px;
	}

	.cantidadText{
		position: relative;
		bottom: 0px;
		left: 0px;
	}

	.contentDetalleProd{
		position: relative;
		left: 15x!important;
		bottom: 10px!important;
		width: 100%!important;
		line-height: 1.2!important; 
		margin-bottom: 0!important;
		
	}
	.vista-productos .card {
		height: 270px !important;
	}

	#carrito .container {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
	.textroCantidad{
		font-size: 12px;
		font-weight: 700;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;		
		line-height: 1.5;      /* Valor común para body text */
		letter-spacing: 0.25px;
	}


	#btnProcesarPedidoSection{
		width: 100%;
		position: relative;
		bottom: 20px;
		width: 100%;
		z-index: 9999; 	
		display: flex;
		justify-content: center;	
	}
	.btnProcesarPedido{
		background-color: #A0CB32!important;
		color: #000!important;		
		border: none!important;
		padding: 12px 24px!important;
		font-size: 1rem!important;
		border-radius: 14px!important; /* <-- Esquinas redondeadas */
		font-weight: 500!important;
		transition: background-color 0.3s ease!important;
		position: relative;
        left: 17px;
        width: 90%;
	}	

	.txtCantidadDetalleProd{
		width: 343px;
		color: rgba(50,49,45,1);
		position: absolute;
		bottom: 20px;
		left: 0px;
		font-family: Plus Jakarta Sans;
		font-weight: Bold;
		font-size: 12px;
		opacity: 1;
		text-align: left;
	}
	
	.cantidad-box {	
		position: relative;
		bottom: 30px;
        /* right: 12px;	 */
	}
	
	/* Contenedor con borde y esquinas redondeadas solo alrededor de los botones/input */
	.cantidad-control {
		display: flex;
		border: 2px solid #A0CB32;
		border-radius: 12px;
		overflow: hidden;
	}

	.btnDetalleProd{
		position: relative!important;
		bottom: 0px!important;
		/* right: 15px; */
        width: 100% !important;
		background-color: #A0CB32!important;
		/* color: #000!important; */
		border: none!important;
		color: #33322e!important;
		font-family: Plus Jakarta Sans;
		font-weight: Bold;
		font-size: 12px!important;
		opacity: 1;
		height: 40px;
	}
	
	/* Botones - y + */
	.btn-cantidad-sumar-carrito{
		width: 42px!important;
		height: 41px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		padding: 0!important;
		line-height: 1!important;
		position: relative;
		right: 0px;
		top: 0px;
		background-color: red;
	}
	.btn-cantidad {
		width: 42px!important;
		height: 41px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		padding: 0!important;
		line-height: 1!important;
		position: relative;
		right: 0px;
		top: 25px;
		background-color: red;
	}
	.btn-cantidad-left{
		width: 42px!important;
		height: 42px!important;
		background-color: white!important;
		color: #212121!important; /* Negro suave */
		border: 2px solid #b4d600!important;
		display: flex!important;
		align-items: center!important;
		justify-content: center!important;
		font-size: 1.4rem!important;
		padding: 0!important;
		line-height: 1!important;
	}
	/* Botón izquierdo (-) con bordes redondeados izquierdos */
	.btn-left {
		/*border-right: none!important;*/
		border-top-left-radius: 7px!important;
		border-bottom-left-radius: 7px!important;
	}
	
	/* Botón derecho (+) con bordes redondeados derechos */
	.btn-right {
		/* border-left: none!important; */
		border-top-right-radius: 7px!important;
		border-bottom-right-radius: 7px!important;
	}
	
	
	.cantidad-input-carrito{
		width: 56px!important;
		height: 40px!important;
		border: none;
		background-color: #f9f9f9;
		font-weight: 500;
		text-align: center;
		padding: 0;
		position: relative;
		top: 0px;
	}

	/* Input de cantidad */
	.cantidad-input {
		width: 56px!important;
		height: 40px!important;
		border: none;
		background-color: #f9f9f9;
		font-weight: 500;
		text-align: center;
		padding: 0;
		position: relative;
		top: 25px;
	}
	
	/* Botón de eliminar (fuera del borde verde) */
	.btn-eliminar {
		position: relative;
		left: 70px;
		width: 60px!important;
		height: 60px!important;
		border: 2px solid #b4d600!important;
		border-radius: 14px;
		margin-left: 10px;
		color: #000;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.precioProdCarrito{
		font-weight: bold;
	}
	.imgProductoCarrito{
		width: 95px;
		height: 70px;
		position: relative;
        bottom: 61px;
		left: -17px;    
		border-radius: 12px;
	}

	.txtNombreProd{
		font-size: 12px!important;
		font-family: 'Plus Jakarta Sans', sans-serif!important;
		position: relative!important;
		bottom: 5px!important;
	}
	.txtDimensiones{
		font-size: 12px!important;
		font-family: 'Plus Jakarta Sans', sans-serif!important;
		position: relative!important;
		bottom: 10px!important;
	}
	.precioProdCarrito{
		font-size: 12px!important;
		font-family: 'Plus Jakarta Sans', sans-serif!important;
		position: relative!important;
		bottom: 10px!important;
	}
	/***********pagna carrito************/




	/*******Pagina detalleProducto***********/

	
	.carousel-slide {
		max-width: 100%!important; /* Asegura que el slide no exceda el ancho del contenedor */		 /* Evita el scroll horizontal */
		width: 100%; 
		height: 300px; 
		display: flex; 
		justify-content: center; 
		align-items: center; 
		overflow: hidden;
	}
	.imgCarouselProducto{
		width: 100%;
		height: 100%;
		object-fit: cover;		
		display: block; /* Evita espacios extra debajo de la imagen */
		width: 100%; /* Asegura que la imagen ocupe todo el ancho del slide */
		height: auto; /* Mantiene la proporción de la imagen */
	}

	.contenttextVerCarrito{
		position: absolute;
	    bottom: 30px;

	}
	.contetButton{
		position: relative;
		top: 165px;
		/* right: 5px; */
		width: 100%!important;
		/* background-color: red; */
	}

	.AltoDato{
		position: relative;
		top: 60px!important;
	}

	.Alto{
		position: relative;
		top: 80px!important;
	}

	.AnchoDato{
		position: relative;
		top: 65px!important;
	}

	.Ancho{
		position: relative;
		top: 87px!important;
	}

	.EspesorDato{
		position: relative;
		top: 79px!important;
	}

	.Espesor{
		position: relative;
		top: 100px!important;
	}

	 .imgCarouselroducto{
		object-fit: cover;
	} 
	#sectionCarousel{
		padding: 15px;
		position: relative; /* Importante para que los indicadores se posicionen relativamente a esta sección */
		top: 30px; /* Revertimos el 'bottom' para evitar desplazamientos innecesarios */
		overflow: hidden; /* Añadimos para evitar que el contenido interno desborde y cause scroll */
		}

	.textVerCarrito{
		position: relative!important;
		bottom: 26px!important;
		left: 35px!important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		color: rgba(50,49,45,1);
		text-align: left;
		/* position: relative!important;
        left: 100px!important;
        bottom: 69px; */
		width: 110px!important;
		color: #007bff; /* Azul */
		text-decoration: underline; /* Subrayado nativo */
		text-underline-offset: 4px; /* Espacio entre texto y línea */
		text-decoration-color: #007bff; /* Línea azul */
		font-weight: 500;
	}
	.icopnCarritoProd{
		width: 30px !important;
		height: 30px !important;
		position: relative;
		bottom: 30px;
		right: 0px;
	}
	.verCarrito{
		/* display: none !important; */
		position: relative !important;
        top: 230px !important;
        left: 0px !important;
        width:90% !important;
        height: 38px !important;
		/* background-color: #003da5; */
		padding-left: 75px;
	}
	


	.fichatecnicaDetalleProd{
		position: relative!important;
		top: 170px;
        /* left: 15px; */
		width: 100%;
	}
	.titleFichaTecnica{
		width: 343px;
		color: rgba(50,49,45,1);
		position: relative;
		top: 0px;
		/* right: 25px; */
		font-family: Plus Jakarta Sans;
		font-weight: Bold;
		font-size: 16px;
		opacity: 1;
		text-align: left;
	}
	.titleSKU{
		width: 164px;
		color: rgba(50,49,45,1);		
		font-family: Plus Jakarta Sans;
		font-weight: Regular;
		font-size: 12px;
		opacity: 1;
		text-align: left;
		position: relative;
		/* right: 25px; */
		/*top: -119px;
		width:598px;		 */
	}
	.especificacion-row{
		position: relative!important;
		top: 0px!important;
	}
	.especificaciones-container{
		position: relative!important;
		top: 0px!important;
		left: 0px;		
		width: 100%;
		height: 100%;
	}
	.Dimensiones{
		position: relative!important;
		top: 95px!important;
		/* right: 11px; */
	}

	.ColorDato{
		position: relative!important;
		bottom: 80px!important;
	}
	.MaterialDato{
		position: relative!important;
		bottom: 55px!important;
	}

	.Color{
		position: relative!important;
		bottom: 55px!important;	
	}

	.Material{
		position: relative!important;
		bottom: 33px!important;	
	}

	.especificacion-label{
		position: relative;
		bottom: 0px;
	}
	
	.skuDetalleProd{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		color: #000;
		text-align: left;
		position: relative!important;
        left: 155px!important;
        bottom: 25px;
		width: 110px!important;
	}
	#seccionformcuenta {
		padding-inline: 15px;
	}
	.sectionPrdo{
		/* background-color: #8FB52C!important; */
		position: relative;
		bottom: 5px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
	.PDescripcionDetalleProd{
		width: 100%;
		color: rgba(50,49,45,1);
		position: absolute;
		top: 15px;
		left: 0px;
		font-family: Plus Jakarta Sans;
		font-weight: Regular;
		font-size: 12px;
		opacity: 1;
		text-align: left;
		padding-left: 15px;
		padding-right: 15px;
	}
	.precioDetalleProd{
		width: 343px;
		color: rgba(50,49,45,1);
		position: relative;
		top: 0px;
		left: 0px;
		font-family: Plus Jakarta Sans;
		font-weight: Bold;
		font-size: 24px;
		opacity: 1;
		text-align: left;
	}
	.ContentprecioDetalle{
		position: relative;
		bottom: 0px;
		left: 0px;
	}

	.containerInfoProd{
		background-color: white !important;
	}

	.titleDetalleMarca,
.nombreProdDetalle,
.DimensionesDetalleProd {
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.1; /* opcional: ajusta el espacio entre líneas si el texto es de varias líneas */
}

	.DimensionesDetalleProd{
		font-size: 12px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;
		position: relative;
		top: 0px;
		left: 0px;
		font-weight: bold !important;
	}
	.nombreProdDetalle{
		font-size: 12px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;
		position: relative;
		top: 0px;
		left: 0px;
		font-weight: bold !important;
	}
	.titleDetalleMarca{
		font-size: 12px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #a3a5a7;
		position: relative;
		top: 0px;
		left: 0px;
	}
	.flechaIzquierdaDetalleProd{
		font-size: 22px;
		color: #000;
		position: relative;
		top: 5px;
	}
	.btnAtraz{
		position: relative!important;
		/* left: 25px; */
		width: 44px!important;
		height: 44px!important;
	}

	#sectionHeaderDetalleProd{
		position: relative;
		top: 16px;
		/* background-color: #ffcc00; */
	}


	#infoProducto{
		position: relative;
		top: 24px;
		/* background-color: #ffcc00; */
	}

	/*******Pagina detalleProducto***********/



	/********Pagina Carrito**************/


	.txtMarcaProd{
		font-size: 12px!important;
		font-family: 'Plus Jakarta Sans', sans-serif!important;
		color: #9A9A9A;
	}


	.vista-productos{
		position: relative;
		bottom: 0px;
	}

	#botnVolver{
		position: relative;
		bottom: 50px;
		padding-left: 15px;
	}
	.flechaIzquierda{
		font-size: 22px;
		color: #000;
		position: relative;
		top: 0px;
	}
	.btnCreateCuentaSuperior{
		position: relative!important;
		/* left: 25px; */
		width: 50px!important;
		height: 50px!important;
	}
	.btnCreateCuenta{
		border-color: #A0CB32 !important;
		text-align: center !important;
		font-size: 12px !important;        
        height: 50px;
		padding: 15px!important;
		font-weight: bold !important;
		color: #000 !important;
		width: 100%!important;                
        border-radius: 10px!important;
	}

	.cotentnBotonCatalogoProd{
		position: relative;
		top: 340px;
	}

	.contentMensajeCarritoVacio{
		position: relative;
		top: 340px;
	}
	.contentTituloCarritoVacio{
		position: relative;
		top: 340px;
		text-align: center;
	}

	.imgiconCarrito{
		width: 120px; 
		height: 120px;
		position: absolute;
		left: 40px;
	}

	.contentImagenCarrito{
		position: relative;
		top: 200px;
		left: 0px;
		padding-left: 85px;
	}
	.MensajeCarritoVacio{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
		text-align: center;
		color: #000;
	}

	.tituCarritoVacio{
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 16px;
		font-weight: bold;
	}

	.titlecarrito{	
		font-family: 'Plus Jakarta Sans', sans-serif !important;
		font-size: 16px!important;
		position: relative!important;
		text-align: center!important;
		position: relative;
		top: 15px;
		left: 25px;
	}
	
	.carritoVacio{
		/* background-color: red!important; */
		position: relative;
		top: 30px;
	}

	/********Pagina Carrito**************/



	
	
	/*************pagina view/index.php ***************/

	.contenedor-iniciales {
		display: flex; /* Para centrar el contenido */
		justify-content: center;
		align-items: center;
		background-color: #ECF5D6;
		color: #333; /* O el color de texto que prefieras para las iniciales */
		width: 30px; /* Define el ancho del círculo */
		height: 30px; /* Define la altura del círculo (igual al ancho para que sea redondo) */
		border-radius: 50%; /* Lo convierte en un círculo */
		font-size: 12px; /* Ajusta el tamaño de la fuente de las iniciales */
		/*font-weight: bold;  Opcional: para que las iniciales se vean más destacadas */
	  }
	  
	  .txtIncialesNombre {
		margin: 0 !important; /* Elimina cualquier margen predeterminado del h6 */
		font-size: 12px;
	  }
	  .logo-lg {
        display: none;
    }
	.logo-lgl {
        display: none;
    }

	.logo-sml {
		height: 100%;
        display: block;
		width: 100px;
		height: 50px;

    }

    .logo-sm {
		height: 100%;
        display: block;
		max-width: 100%;
		height: auto;

    }

	#idCarrousel{
		position: relative;
		top: 20px;
		padding: 2px;
		width: 100%;
	}
/* Estilo para 2 columnas en móviles */
.badge-carrito {
	position: absolute;
	top: 9px;
	right:117px; /* Ajusta la posición para que quede bien centrado en el icono */
	background-color: #FFDD5F;
	color: #000;
	min-width: 16px; /* Establece un ancho mínimo */
	height: 16px; /* Establece una altura igual al ancho mínimo */
	font-size: 10px;
	display: flex; /* Para centrar el texto vertical y horizontalmente */
	align-items: center;
	justify-content: center;
	border-radius: 50%; /* Hace que el elemento sea redondo */
	padding: 0; /* Elimina el padding horizontal que deformaba el círculo */
	/* border: 1px solid #ccc; */
  }

  .badge-carrito-detalle {
	position: absolute;
	bottom: 45px;
	right: 210px; /* Ajusta la posición para que quede bien centrado en el icono */
	background-color: #FFDD5F;
	color: #000;
	min-width: 16px; /* Establece un ancho mínimo */
	height: 16px; /* Establece una altura igual al ancho mínimo */
	font-size: 10px;
	display: flex; /* Para centrar el texto vertical y horizontalmente */
	align-items: center;
	justify-content: center;
	border-radius: 50%; /* Hace que el elemento sea redondo */
	padding: 0; /* Elimina el padding horizontal que deformaba el círculo */
	/* border: 1px solid #ccc; */
  }

.card-text-Prod-Precio{
	width: 164px;
	color: rgba(50,49,45,1);
	position: absolute;
	top: 211px;
	left: 5px;
	font-family: Plus Jakarta Sans;
	font-weight: Bold;
	font-size: 12px;
	opacity: 1;
	text-align: left;
	
}
.card-text-Prod-Dimencion{
	width: 164px;
  color: rgba(50,49,45,1);
  position: absolute;
  top: 195px;
  left: 5px;
  font-family: Plus Jakarta Sans;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
  
}
.card-text-Prod-Marca{
	width: 164px;
	color: rgba(154,154,154,1);
	position: relative;
	top: 0px;
	left: 0px;
	font-family: Plus Jakarta Sans;
	font-weight: Regular;
	font-size: 12px;
	opacity: 1;
	text-align: left;
}
.card-title-Prod-nombre{
	width: 164px;
	color: rgba(50,49,45,1);
	position: absolute;
	top: 183px;
	left: 5px;
	font-family: Plus Jakarta Sans;
	font-weight: Regular;
	font-size: 12px;
	opacity: 1;
	text-align: left;
	
}
.card {
	height: 100% !important;
	overflow: hidden; /* asegura que el borde redondeado se aplique a todo */
	/*background-color: #c21515 !important;  /*color de fondo blanco */
	border: none;
	border-radius: 12px;
}
.card-img-top-prod {
	width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 12px ;
	
}
.producto-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.producto-col {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
	width: 50% !important; /* 2 columnas */

}


	.subcategoria-tag.active {
		background-color: #000 !important; /* gris más notorio */
		color: #ffffff !important;
		border-color: #000 !important;
		font-weight: bold !important;           /* texto negro para más contraste */
	}
	#subcategorias-container{
		position: relative;
		bottom: 60px;
		/* left: -70px; */
		padding: 15px;
	}
	.subcategoria-tag {
		background-color: #f8f9fa;
		color: #333;
		border: 1px solid #ddd;
		padding: 8px 12px;
		border-radius: 20px;
		margin: 4px;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}
	
	.subcategoria-tag.active {
		background-color: #2e2d2b; /* Color oscuro como en tu imagen */
		color: #ffffff;
	}
	
	.subcategorias-wrapper {
		
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-top: 15px;
	}
	

	#productos-categoria{
		position: relative;
		top: 0px;
		left: 0px;
		text-transform: capitalize;
	}
	.categoriaNombre{
		position: relative;
		bottom: 30px;
	}
	#categoria-seleccionada-nombre{
		font-size: 15px;
		margin-top: 20px;
		margin-bottom: 10px;
		color: #333;
		position: relative;		
	}

	/* Seccion Categorias */
	#idCategorias{
		position: relative;
    	bottom: 40px;
		padding: 2px;
		height: 150px;
	}
	.categories-slider-container {		
		overflow-x: auto;	
		overflow-y: hidden; /* IMPORTANTE: oculta scroll vertical */
    	width: 100%;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
		-webkit-overflow-scrolling: touch;
	}
	.categories-slider {
		display: -webkit-flex; /* Prefijo para Safari */
    	display: flex;
		-webkit-flex-wrap: nowrap;/* Coloca los items en línea horizontal */
		flex-wrap: nowrap;  /*Evita que los items pasen a la siguiente línea */
		padding: 0;
	}

	.category-item {
		flex: 0 0 auto; /* No crecer, no encoger, ancho automático basado en el contenido */
		/*margin-right: 15px; /* Espacio entre los items */
		text-align: center;
		align-items: center;
		min-width: 80px; /* Ancho mínimo para cada categoría */
	}

	.category-button {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: left;
	}

	.category-icon-container {
		/*background-color: #e9ecef;  Fondo gris claro para el círculo del icono */		
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;		
		border-radius: 50%; /* Hace que el contenedor del icono sea circular */
	}

	.category-icon {
		width: 50px;
		height: 50px;
		/* object-fit: contain; */
	}

	.category-name {
		display: none;
	}

	.categories-slider{
		padding: 20px;
	}
	/* Estilos para el primer item para que no tenga margen a la izquierda
	.categories-slider .category-item:first-child {
		/*margin-left: 10px;  Ajustar si es necesario 
		padding: 20px;
	}

	/* Estilos para el último item para que no tenga margen a la derecha 
	.categories-slider .category-item:last-child {
		/*margin-right: 10px;  Ajustar si es necesario 
		padding: 20px;
	}	
*/
	#productosIndex{
		/* background-color: #ffcc00 !important; */
		position: relative;
        bottom: 65px;
		padding: 15px;
	}

	/*************pagina view/index.php ***************/


	/******Pagina index Principal******/
	.liElements{
		position: relative!important;
		top: 150px!important;
	}

	.btnliRegistro{
		position: relative!important;
		bottom: 190px!important;
	}
	.btnLogRegistro{
		position: relative!important;
		bottom: 210px!important;
	}

	.btnLogin {
        background-color: #A0CB32 !important;
        font-size: 12px !important;
        font-weight: bold !important;
        border: none !important;
        padding: 15px !important;
        width: 100% !important;		
		height: 50px!important;
    }

	.promotion-badge-Productos{
		position: absolute;
        top: 8px;
        right: 10px;
        background-color: #FFEEAF;
        color: #000;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.8rem;
        z-index: 10;
	}

	#carouselPromociones .product-card {
		/*background-color: white;*/
		width: 100%;
		height: 200px; /* Puedes ajustar este alto según tu diseño */
		position: relative;
		overflow: hidden;
		border-radius: 12px;
	}
	
	#carouselPromociones .product-image-container {
		width: 100%;
    height: 100%;
    position: relative;
	}
	#carouselPromociones .product-info {
		position: absolute;
    bottom: 0;
    width: 100%;
	height: 100px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    padding: 10px;
    box-sizing: border-box;
	}


    #carouselPromociones .product-dimensiones{
        color: #a3a5a7;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }
    #carouselPromociones .product-image {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: 6px;
    }

    #carouselPromociones .promotion-badge {
        position: absolute;
        top: 5px;
        right: 10px;
        background-color: #FFEEAF;
        color: #000;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.8rem;
        z-index: 10;
    }

    #carouselPromociones .product-marca {
        font-size: 0.9rem;
        color: #a3a5a7;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }

    #carouselPromociones .product-name {
        font-size: 1rem;
        color: #343a40;
        text-align: left;
        width: 100%;
        margin-bottom: 5px;
    }

    #carouselPromociones .product-price {
        color: #000;
        font-weight: bold;
        text-align: right;
        width: 100%;
        position: relative;
        top: -50px;
        margin-top: 10px;
    }

	#carouselPromociones .imgCarrousel {
		width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	}


	#carouselPromociones {
        position: relative;
        top: -30px;        
        /* background-color: #f8f9fa; */
        overflow: hidden;
    }


	/******Pagina index Principal******/


	/*******Pagna de Registro cliente***********/
	.labelCorreo{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
	}

	.labeltelefono{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
	}

	.labelApellido{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
	}

	.labelNombre{
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 12px;
	}


.contenetFormReg{
	background-color: aqua;
}
	.btnFormularioSave{
		background-color: #A0CB32 !important;
        color: #fff;
        border: none;
        padding: 10px 0 !important;
        width: 50% !important;
        height: 50px !important;
		position: relative;
		left: 23%;
		color: black !important;
		font-family: 'Plus Jakarta Sans', sans-serif;
	}

	input.form-control {
        font-size: 15px;
        padding: 10px;
    }

    .btn {
        width: 100%;
        font-size: 16px;
        padding: 12px;
        border-radius: 10px;
    }
	.tituloFormCliente{
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;
		text-align: center;
	}
	/*******Pagna de Registro cliente***********/


	/******pagina Login Cliente*****/
	
	.login-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.login-box {
		max-width: 400px;
		width: 100%;
		text-align: center;
	}

	.form-group {
		text-align: left;
	}

	.btn-green {
		background-color: #A0CB32;
		color: white;
		font-weight: bold;
	}

	.btn-green:hover {
		background-color: #8FB52C;
	}

	.form-control:focus {
		outline: none;
		box-shadow: none;
		border-color: #A0CB32;
	}

	.form-control.valid {
		border-color: #A0CB32 !important;
	}

	.form-control.invalid {
		border-color: #FF96AA !important;
	}

	.error-message {
		color: #FF96AA;
		font-size: 14px;
		margin-top: 4px;
	}

	.login-links a {
		color: #007bff;
		font-size: 14px;
	}

	.login-box img {
		max-width: 180px;
		margin-bottom: 10px;
	}



	h3 {
		font-family: 'Plus Jakarta Sans', sans-serif;
		color: #000;		
		font-size: 24px;
	}

	/******pagina Login Cliente*****/


	/******pagina Categoria productos *****/
	.btnvermsaProd{
		position: relative;
		left: 0;
	}
	/******pagina Categoria productos *****/

	/*****pagina detalle Productos****/

	.carousel img {
		width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
		height: 100%;
		object-fit: cover; 
		display: block; /* Elimina espacios no deseados debajo de la imagen*/ 
	}
	
	
	.carousel {
		width: 100%; /* Ajusta el ancho máximo del carrusel */
		margin: 0 auto; /* Centra el carrusel en la página */
		/* background-color: #003da5; */
		height: 240px;
		bottom: 30px;
		overflow-x: hidden!important;
		overflow: hidden!important;
		-webkit-overflow-scrolling: touch; /* Añade esta línea */
	}


	/*****pagina detalle Productos****/


	/*****Pagina Productos******/
	#sectionProductosPage{
		padding: 10px;
	}
	.TituloPagina{
		font-size: 35px;
		font-family: 'Plus Jakarta Sans', sans-serif;
  		font-optical-sizing: auto;  
  		font-style: normal;
		font-weight: bold;
	}



	/*****Panga Productos******/

		/*Siled Subcategorias  */

/* Ajusta el tamaño de cada slide */
.swiper-slide {
	width: auto !important; /* Permite que los slides se ajusten al contenido */
	max-width: 200px; /* Establece un ancho máximo */
	height: auto; /* Ajusta la altura automáticamente */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	-webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Asegura que el slider no ocupe la mitad de la página */
.swiper {
	width: 100%;
	height: auto;
	padding: 20px 0; /* Espaciado arriba y abajo */
	-webkit-overflow-scrolling: touch;
}



/* Estilo general del botón */
.carousel-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #007bff;
    color: white;
    padding: 10px;
    border-radius: 10px;
    width: 150px; /* Ancho fijo */
    height: 180px; /* Altura ajustada */
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
	-webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.carousel-button:hover {
    transform: scale(1.05); /* Efecto de crecimiento al pasar el mouse */
}

/* Estilo de la imagen dentro del botón */
.button-image {
    width: 100%;
    height: 100px; /* Tamaño fijo para la imagen */
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
    border-radius: 8px;
	position: relative;
	top: -15px;
}

/* Estilo del texto dentro del botón */
.button-text {
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}
/* Ajusta el tamaño de los botones dentro del slide */



/*Diego*/
/* Carrousel button  */
.carousel-button {
	display: block;
	padding: 10px 15px;
	background: #007bff;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 16px;

	width: 100px;
	
	height: 100px;

	background-color: #fff;

	border: solid 2px #ffcc00;

	border-radius: 50%;

	margin: auto;

	display: block;
}


/* Evita que el slide sea demasiado grande */
#SiledeBotones {
	max-width: 100%;
	overflow: hidden;
	height: 125px;	
}
/*Siled Subcategorias  */

	.slider {

		display: flex;	
		overflow-y: hidden;	
		overflow-x: scroll;	
		justify-content: space-between;	
		align-items: center;	
		padding: 15px 30px 30px 30px;	
		color: #dc5b00;
		-webkit-overflow-scrolling: touch; /* Añade esta línea */
	
	}
	
	.slider-container {

		position: relative;
	
		display: inline-block;
	
		vertical-align: baseline;
	
		width: 100%;
	
	}
	.mySlides{
		width: 100px;
		height: 100px;
	}
	


	/* Modal  */

	.modal-content {
		/*background-color: #A8E6A3 !important;*/
		border-radius: 10px !important;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;	
    }

	#categoriasModalLabel{
		position: relative;
		text-align: center;
	}
  /* Ajustes para el logo */
	.logo-modal {
		width: 50px;
		height: 50px;
	}

	/* Ajustes para las imágenes de las categorías */
	.img-categoria {
		width: 130px;  /* Ajusta el tamaño según necesites */
		height: 100px; /* Debe ser igual al width para mantener la forma circular */
		border-radius: 50%; /* Hace que la imagen sea redonda */
		object-fit: cover; /* Recorta la imagen para ajustarla sin deformaciones */
		display: block; /* Elimina espacios extra */
	}
	/* Modal */

	/* Contenedor de la imagen (para posicionar la etiqueta) */	
	.imagenProductoID {
		background-color: #970026;
		width: 250px; /* Ocupa todo el ancho del contenedor */
		height: 100%; /* Ocupa todo el alto del contenedor */
		object-fit: cover; /* Ajustar la imagen para cubrir el espacio sin distorsionarla */
	}
		/* Contenedor de la imagen (para posicionar la etiqueta) */
		.imagen-contenedor {
			position: relative; /* Permite posicionar la etiqueta de manera absoluta dentro de este contenedor */
			width: 100%; /* Ocupa todo el ancho de la tarjeta */
			height: 200px; /* Altura fija para el contenedor de la imagen */
			display: flex; /* Usar flexbox para centrar la imagen */
			justify-content: center; /* Centrar horizontalmente */
			align-items: center; /* Centrar verticalmente */
			overflow: hidden; /* Evitar que la imagen se desborde */		
		}
	/* Estilo para la etiqueta de promoción */
	.promocion-etiqueta {
		position: absolute; /* Posición absoluta dentro del contenedor de la imagen */
		top: 49px; /* Distancia desde la parte superior */
		left: 89px; /* Distancia desde la izquierda */
		background-color: rgba(76, 175, 80, 0.8); /* Fondo verde semi-transparente */
		color: white; /* Color del texto */
		padding: 5px 10px; /* Espaciado interno */
		border-radius: 5px; /* Bordes redondeados */
		font-size: 14px; /* Tamaño de la fuente */
		font-weight: bold; /* Texto en negrita */
		z-index: 1; /* Asegura que esté por encima de la imagen */
	}
	.card-body {
		text-align: left; /* Centrar el texto */
		padding: 5px; /* Espaciado interno */
		height: 80px;
	}
        /* Estilo para el contenedor principal */
        .container {
            padding: 0; /* Elimina el padding predeterminado */
            margin-top: 0; /* Elimina el margen superior */
			/* background-color: blue; Fondo azul para el contenedor */
        }

		.container-nav {
			width: 100%;
            padding: 0; /* Elimina el padding predeterminado */
            margin-top: 0; 			
			display: flex;
    		flex-wrap: inherit;
        }

        /* Estilo para el contenido debajo de la imagen */
        .producto-info {
            padding: 20px;
            background-color: #f8f9fa; /* Fondo claro para resaltar la información */
            text-align: center; /* Centra el texto */
        }
	
	.imgDetalleProducto {
		width: 150px;
		height: 150px;
	  }

	  .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23A0CB32' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	  }
	  
	  #iconoCarritoEstado{
		width: 30px;
        height: 30px;
        position: absolute;
        bottom: 10px;
        right: 120px;
	  }
	  .iconCarrioto{
		display: block !important;
		/* background-color: red; */
		width: 10px;
        height: 10px;
	}
	#logoEmpresaNavBar {
		width: 150px!important; 
		height: 70px;
		position: relative;
		top: 5px;
		left: 5px;
	  }
.iconRedes{
	color: #003da5;
}
	  #Footer{
		background-color: #718b919e;
		display: none!important;
		
	  }
	  #RowFooter{
		background-color: #970026;
	  }
	#logoEmpresaFooter {
		width: 100px;
		height: 100px;
	}

	.dashboard-image {
		width: 100px;
		height: 100px;
	}
	.Googlemaps{
		width: 300;
		height: 450;
	}
	/* #logoEmpresa {
	  width: 200px;  
	  height: 60px;
	} */
  
	#promocionesModalLabel {
	  font-size: 30px;  /* Reducimos el tamaño del texto */
	  padding-left: 50px;  /* Ajustamos el padding */
	}
  
	.card-title{
		font-size: 30px;  /* Reducimos el tamaño de los textos */
		font-family: 'Plus Jakarta Sans', sans-serif;
  		font-optical-sizing: auto;  
  		font-style: normal;
		font-weight: bold;
		text-align: center;
		text-decoration: none !important;
	}
	.card-text {
	  	font-size: 20px;  /* Reducimos el tamaño de los textos */
	  	text-align: center;
	  	text-decoration: none !important;
	  	font-family: 'Plus Jakarta Sans', sans-serif;
		font-optical-sizing: auto;  
		font-style: normal;
		font-weight: bold;
	}
  
	.ranaflor {
	  width: 35px;
	  height: 40px;
	}
  
	.seccion2Index {
	  padding: 50px;  /* Reducimos el padding */
	}
  
	.contetnIMGCarousel {
	  height: 300px;  /* Reducimos el tamaño de las imágenes del carrusel */
	}
  
	.card-img-top {
		width: 100%;              /* Hace que la imagen ocupe el 100% del ancho de la tarjeta */
		height: 225px;            /* Establece una altura fija para todas las imágenes */
		object-fit: contain;      /* Ajusta la imagen para que se ajuste al contenedor sin recortarla ni deformarla */
		object-position: center;  /* Centra la imagen dentro del contenedor */
	}
	.imgHistoria {
		width: 100%;
		height: 100%;
	  }

	  #sectionCarousel .carousel-indicators {
		display: flex;
		justify-content: center;
		margin-top: 10px; /* Ajusta el margen superior según necesites */
		gap: 6px;
		position: absolute; /* Cambiamos a absoluto para posicionarlos dentro de #sectionCarousel */
		bottom: 35px; /* Posicionamos los indicadores en la parte inferior */
		left: 35%; /* Centramos horizontalmente */
		transform: translateX(-50%); /* Ajuste para centrar correctamente */
		z-index: 10; /* Asegura que estén por encima de las imágenes */
	}

	#sectionCarousel .carousel-indicators button {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #999;
		border: none;
		opacity: 0.6;
		transition: opacity 0.3s ease;
	  }
	  
	  #sectionCarousel .carousel-indicators button.active {
		background-color: #000;
		opacity: 1;
	  }

	  .carousel-indicators [data-bs-target] {
		width: 10px !important;
		height: 10px !important;
		border-radius: 100% !important;
		gap: 6px;
		background-color: #000 !important; /* color de los puntos */
		opacity: 0.5 !important; /* opacidad inicial */
		border: none !important; /* Asegúrate de que no haya bordes innecesarios */
		margin: 0 !important; /* Evita márgenes que puedan afectar el posicionamiento */
	  }
	  
	  .carousel-indicators .active {
		background-color: #000 !important; /* color del punto activo */
		opacity: 1 !important;
	  }


  }


  
  /* Para pantallas entre 601px y 1024px (tabletas) */
  @media (min-width: 769px) and (max-width: 1024px) {
 body{
	background: #003da5;
 }
.swiper-slide {
	width: auto !important;
	max-width: 200px; 
	height: auto; 
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.swiper {
	width: 100%;
	height: auto;
	padding: 20px 0;
}

.carousel-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #007bff;
    color: white;
    padding: 10px;
    border-radius: 10px;
    width: 150px; 
    height: 180px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.carousel-button:hover {
    transform: scale(1.05); 
}

.button-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
	position: relative;
	top: -15px;
}

.button-text {
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}
.carousel-button {
	display: block;
	padding: 10px 15px;
	background: #007bff;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 16px;
}

#SiledeBotones {
	max-width: 100%;
	overflow: hidden;
	height: 125px;
	background-color: #007bff;
}

	.carousel-button {

		width: 100px;
	
		height: 100px;
	
		background-color: #fff;
	
		border: solid 2px #dc5b00;
	
		border-radius: 50%;
	
		margin: auto;
	
		display: block;
	
	}

	.slider {

		display: flex;
	
		overflow-y: hidden;
	
		overflow-x: scroll;
	
		justify-content: space-between;
	
		align-items: center;
	
		padding: 15px 30px 30px 30px;
	
		color: #dc5b00;
	
	}
	
	.slider-container {

		position: relative;
	
		display: inline-block;
	
		vertical-align: baseline;
	
		width: 100%;
	
	}
	.mySlides{
		width: 100px;
		height: 100px;
	}
	.card{
	background-color: darkgray;
}
.imagenProductoID {
	width: 100%; 
    height: 100%;
    object-fit: cover;
}
	
	.imagen-contenedor {
		position: relative;
		width: 100%;
		height: 200px;
		display: flex; 
		justify-content: center;
		align-items: center; 
		overflow: hidden; 
	}

.promocion-etiqueta {
    position: absolute; 
    top: 0px; 
    left: 0px;
    background-color: rgba(76, 175, 80, 0.8); 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px; 
    font-weight: bold;
    z-index: 1; 
}
.card-body {
    text-align: left; 
    padding: 5px; 
}

.producto-info {
	padding: 20px;
	background-color: #f8f9fa; 
	text-align: center; 
}
	.imgDetalleProducto {
		width: 150px;
		height: 150px;
	  }
	.tempaltemo_footer{
		background-color: #970026;
	}
	
	#logoEmpresaFooter {
		width: 100px;
		height: 100px;
	}
	.dashboard-image {
		width: 100px;
		height: 100px;
	}
	#promocionesModalLabel {
	  font-size: 40px;  
	  padding-left: 100px;
	}
  
	.card-title,
	.card-text {
	  font-size: 25px;  
	}
  
	.ranaflor {
	  width: 40px;
	  height: 45px;
	}
  
	.seccion2Index {
	  padding: 100px;  
	}
  
	.contetnIMGCarousel {
	  height: 400px;  
	}
  
	.card-img-top {
	  height: 140px; 
	}
  }