/* desplaza.css */
/* Hoja de estilo CSS para galería de imágenes */

	:root {
	 --color-fondo: #ed662d;
	 --ancho-slide: 360px;
    }

	.contenedor-principal {
		background-color: var(--color-fondo);
		padding: 60px 0;
		text-align: center;
		position: relative;
		max-width: 100%;
		}

	.titulo {
		color: white;
		font-size: 24px;
		margin-bottom: 30px;
		}

	.titulo span { text-decoration: underline; }

	/* Contenedor del Slider */
	.slider-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
		}

	.slider-container {
		overflow: hidden;
		width: 90%;
		}

	.slider-track {
		display: flex;
		gap: 20px;
		transition: transform 0.5s ease-in-out;
		cursor: grab;
		}

	.slide {
		min-width: var(--ancho-slide);
		display: flex;
		justify-content: center;
		align-items: center;
		}

	.slide img {
		height: 45px;
		filter: brightness(0) invert(1);
		opacity: 0.9;
		}

	/* Flechas de Navegación */
	.btn-nav1 {
		background: none;
		border: none;
		color: white;
		font-size: 30px;
		cursor: pointer;
		padding: 10px;
		position: absolute;
		z-index: 10;
		top: 50%;
		transform: translateY(-50%);
		opacity: 0.7;
		transition: opacity 0.3s;
		}

	.btn-nav1:hover { opacity: 1; }

	.prev { left: 0; }
    .next { right: 0; }