:root {
	  --color-style: #dddddd;
	}
  
	.color-style{
		color: var(--color-style)
	}
	
    body {
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		background: #f5f5f5;
		margin: 0;
		padding: 0px;

    }

	html, body {
	  width: 100%;
	  max-width: 100%;
	  zoom: 1;
	}

	.grid {
	  flex: 	1;  
	  display: 	grid;
	  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	  gap: 		20px;
	}

	.card {
	  position: 		relative;
	  background: 		white;
	  border-radius: 	10px;
	  box-shadow: 		0 4px 12px rgba(0,0,0,0.1);
	  overflow: 		hidden;
	  display: 			flex;
	  flex-direction: 	column;
	  transition: 		transform 0.3s ease, box-shadow 0.3s ease;
	  border-bottom: 	4px solid transparent;
	}

	.card:hover {
	  transform: scale(1.03);
	  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
	  border-bottom: 4px solid var(--color-style);  
	}

    .card img {
      width: 100%;
      height: 200px;
      object-fit: contain;
      background: #fff;
    }

    .card-body {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }

    .card-body h3 {
      font-size: 18px;
      margin: 0 0 5px;
      color: #333;
    }

    .card-body p {
      font-size: 14px;
      color: #555;
      margin: 4px 0;
    }

    .card-body .precio {
      font-weight: bold;
      color: var(--color-style);
      font-size: 18px;
      margin-top: 5px;
    }
	
	.sticker-descuento {
	  position: absolute;
	  top: 10px;
	  left: 10px;
	  background-color: crimson;
	  color: white;
	  font-weight: bold;
	  padding: 4px 8px;
	  font-size: 13px;
	  border-radius: 6px;
	  z-index: 10;
	}

	.precio s {
	  font-size: 15px;
	  color: #999;
	  margin: 4px 0;
	}

	.precio-final {
	  font-size: 18px;
	  color: var(--color-style);
	  font-weight: bold;
	}
	
	.carousel-container {
	  width: 70%;
	  margin: 20px auto; /* centra horizontalmente */
	  height: 160px;
	  overflow: hidden;
	  background-color: #f9f9f9;
	  border-radius: 15px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.carousel-image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* o 'contain' si preferís, pero 'cover' se ajusta mejor */
	  border-radius: 15px !important;
	  transition: opacity 0.8s ease-in-out !important;
	}
	
	.carousel-container a {
	  display: block;
	  height: 100%;
	  width: 100%;
	  border-radius: 15px; /* que el contenedor también sea redondeado */
	  overflow: hidden;
	}
	
	.carousel-image:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;;
	}

	.top-header {
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.top-header img {
		max-height: 100px;
	}

	.busqueda input {
		padding: 6px 10px;
		font-size: 1em;
		border-radius: 5px 0 0 5px;
		border: 1px solid #ccc;
	}

	.busqueda button {
		padding: 6px 10px;
		border: none;
		background: #d02c2c;
		color: white;
		border-radius: 0 5px 5px 0;
	}

	#busqueda-mini {
	  display: none;
	  justify-content: flex-end;
	  padding: 8px 16px;
	  background-color: #252626;
	}

	#busqueda-mini input {
	  padding: 6px 10px;
	  font-size: 1em;
	  border-radius: 5px 0 0 5px;
	  border: 1px solid #ccc;
	}

	#busqueda-mini button {
	  padding: 6px 10px;
	  border: none;
	  background: #d02c2c;
	  color: white;
	  border-radius: 0 5px 5px 0;
	}

	#menu-bar {
	  width: 100vw;
	  margin-left: calc(-1 * ((100vw - 100%) / 2));  
	  margin-right: calc(-1 * ((100vw - 100%) / 2));
	  background-color: #252626; // var(--color-style);
	  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	  z-index: 999;
		  position: sticky;
		  top: 0;
		  padding:0;
	}
	
	.menu-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* 👈 alinea todo a la izquierda */
		padding: 10px 20px;
		gap: 20px; /* espacio entre elementos */
	}

	.menu-toggle {
	  display: none;
	  font-size: 26px;
	  background: none;
	  border: none;
	  color: white;
	  cursor: pointer;
	}

	.menu {
	  display: flex;
	  gap: 30px;
	}

	.menu a {
	  text-decoration: none;
	  color: white;
	  font-weight: 500;
	  font-size: 15px;
	  transition: color 0.3s ease;
	}

	.menu a:hover {
	  color: #00bcd4;
	}

 
	@media (max-width: 768px) {
		
		.busqueda {
			display: none !important;
		}

		#busqueda-mini {
			display: flex !important;
		}
	
		.menu {
			display: none;
			flex-direction: column;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: #1c1c1c;
			padding: 10px 0;
		  }

		  .menu.show {
			display: flex !important; /* MOSTRARLO correctamente */
		  }

		.menu a {
			padding: 12px 20px;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.menu-toggle {
			display: block;
		}

		
		.sidebar {
			position: fixed;
			top: 0;
			left: 0;
			width: 75vw;
			height: 100vh;
			background-color: white;
			z-index: 10001;
			transform: translateX(-100%);
			opacity: 0;
			display: none;
		}

		.sidebar.abierta {
			display: block;
			animation: slideInLeft 0.4s ease forwards;
		}

		.sidebar.cerrando {
			animation: slideOutLeft 0.4s ease forwards;
		}

		.sidebar-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(240, 240, 255, 0.95); /* color de fondo */
			z-index: 9999;
			display: none; /* oculto por defecto */
			overflow-y: auto;
			padding: 1rem;
			border-radius: 0 0 12px 12px;
		}

		#sidebar-overlay.visible {
			display: block;
		}
  
		#btnCerrarSidebar {
			position: absolute;
			top: 10px;
			right: 15px;  /* 👈 asegurate de que esto esté */
			font-size: 24px;
			color: #333;
			z-index: 10002;
			cursor: pointer;
		}
	}
	 
	.contenido {
	  display: flex;
	  gap: 30px;
	  align-items: flex-start;
	}

	.sidebar {
	  width: 260px;
	  position: sticky;
	  top: 100px;
	  align-self: flex-start;
	  background: transparent; /* lo dejamos transparente para que se vea el ::before */
	  padding: 20px;
	  border-radius: 12px;
	  box-shadow: 0 0 8px rgba(0,0,0,0.1);
	  height: fit-content;
	  z-index: 1;
	  overflow: hidden; /* IMPORTANTE para que el ::before no se desborde */
	}

	.sidebar::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-color: silver; // var(--color-style);
	  opacity: 0.2;
	  z-index: -1;
	  border-radius: 12px; /* para que respete el borde redondeado */
	}

	.sidebar h3 {
	  font-size: 14px;
	  font-weight: 700;
	  color: #111;
	  margin-top: 20px;
	  border-bottom: 2px solid var(--color-style);
	  padding-bottom: 4px;
	}

	.sidebar input[type="text"] {
	  width: 100%;
	  padding: 6px;
	  margin: 6px 0;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	}

	.sidebar button {
	  width: 100%;
	  padding: 6px;
	  background: #eee;
	  border: 1px solid #444;
	  border-radius: 4px;
	  cursor: pointer;
	}

	.sidebar label {
	  display: block;
	  margin: 8px 0;
	  font-size: 14px;
	  color: #333;
	}
	
	.sidebar input[type="checkbox"] {
	  appearance: none;
	  -webkit-appearance: none;
	  width: 18px;
	  height: 18px;
	  border: 2px solid var(--color-style);  
	  border-radius: 50%;          
	  margin-right: 8px;
	  position: relative;
	  cursor: pointer;
	  vertical-align: middle;
	}

	.sidebar input[type="checkbox"]:checked::before {
	  content: "";
	  position: absolute;
	  top: 3px;
	  left: 3px;
	  width: 8px;
	  height: 8px;
	  background-color: var(--color-style); /* verde relleno */
	  border-radius: 50%;
	}	
	
		
	@keyframes slideInLeft {
	  from {
		transform: translateX(-100%);
		opacity: 0;
	  }
	  to {
		transform: translateX(0%);
		opacity: 1;
	  }
	}

	@keyframes slideOutLeft {
	  from {
		transform: translateX(0%);
		opacity: 1;
	  }
	  to {
		transform: translateX(-100%);
		opacity: 0;
	  }
	}


	.btn-fore {
	  background-color: var(--color-style) !important;
	  color: white !important;
	}
	
	.desde-hasta {
	  display: flex;
	  gap: 6px;
	  margin-bottom: 10px;
	}

	.desde-hasta input[type="text"] {
	  width: 40%;
	  padding: 3px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	}

	.desde-hasta button {
	  margin-top:5px;
	  width: 20%;
	  padding: 3px 0;
	  border: 1px solid #444;
	  background-color: #e5e5e5;
	  border-radius: 4px;
	  cursor: pointer;
	  text-align: center;
	  height:33px;
	}

	.ficha-tecnica {
	  display: flex;
	  justify-content: space-between;
	  gap: 10px;
	  margin-top: 12px;
	  padding-top: 10px;
	  border-top: 1px solid #eee;
	  font-size: 13px;
	  color: #444;
	}

	.ficha-tecnica div {
	  flex: 1;
	  text-align: center;
	  border-right: 1px solid #ddd;
	}

	.ficha-tecnica div:last-child {
	  border-right: none;
	}

	.globos-wrapper {
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		z-index: 12;
	}

	.globo-especial {
		padding: 4px 10px;
		border-radius: 10px;
		color: white;
		font-weight: bold;
		font-size: 13px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		white-space: nowrap;
	}
	
	.card .globo-especial + .globo-especial {
		top: auto;
	}
	
	.modal-transparente {
	  background-color: transparent;
	  border: none;
	  box-shadow: none;
	}

	.modal-transparente .modal-body {
	  background-color: rgba(255, 255, 255, 1); /* fondo oscuro semitransparente dentro */
	  border-radius: 10px;
	  padding: 20px;
	}
	
	.carousel-item img.zoom-hover {
		transition: transform 0.4s ease;
	}

	.carousel-item img.zoom-hover:hover {
		transform: scale(1.15);
	}
	
	#preloader .preloader-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0,0,0,0.8);
	  z-index: 9999;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.card:hover {
	  transform: scale(1.03);
	  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
	  border: 2px solid var(--color-style);  
	}

	.preloader-content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	.loader-moto {
	  width: 200px;
	  animation: moverMoto 1s ease-in-out infinite alternate;
	}

	@keyframes moverMoto {
	  0%   { transform: translateX(0); }
	  100% { transform: translateX(10px); }
	}

	.animate-fade {
	  animation: parpadeo 1.2s infinite;
	}

	@keyframes parpadeo {
	  0%, 100% { opacity: 1; }
	  50%      { opacity: 0.4; }
	}

	.card {
	  cursor: zoom-in;
	}

	#autoSidebar {
	  position: fixed;
	  top: 0;
	  left: -180px; /* escondido completamente */
	  width: 180px;
	  height: 100vh;
	  background-color: gray;
	  transition: left 0.3s ease-in-out;
	  z-index: 9999;
	  padding-top: 60px;
	  border-top-right-radius: 12px;
	  border-bottom-right-radius: 12px;
	}

	#autoSidebar:hover {
	  left: 0;
	}

	.menu-lateral {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}

	.menu-lateral li {
	  padding: 12px 20px;
	  white-space: nowrap;
	}

	.menu-lateral a {
	  color: white;
	  text-decoration: none;
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  transition: background 0.2s;
	  font-weight: 500;
	}

	.menu-lateral a:hover {
	  background-color: rgba(255, 255, 255, 0.1);
	  border-radius: 8px;
	}

	#autoSidebar::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 100%;
	  width: 20px;
	  height: 100%;
	}
	
	.modal-fullscreen-custom .modal-dialog {
	  max-width: 100%;
	  width: 100%;
	  margin: 0;
	  height: 100vh;
	}

	.modal-fullscreen-custom .modal-content {
	  height: 100vh;
	  border-radius: 0;
	  background-color: transparent;
	}

	.modal-fullscreen-custom .modal-body {
	  height: 100%;
	  padding: 0;
	  background-color: white; /* opcional */
	}

	.modal-fullscreen-custom iframe {
	  width: 100%;
	  height: 100%;
	  border: none;
	}
	
	.toggle-boton {
	  display: inline-block;
	  padding: 6px 12px;
	  border: 1px solid var(--color-style);
	  border-radius: 10px;
	  font-size: 13px;
	  margin-bottom: 8px;
	  text-decoration: none !important;tantes{
	  color: var(--color-style);
	  font-weight: bold;
	  background-color: white;
	  transition: background 0.2s ease;
	}
	
	.toggle-boton:hover {
	  background-color: var(--color-style);
	  color: white;
	}