body { font-family: 'Open Sans', sans-serif; }

@media (max-width: 768px) {
  .scroll-btn {
    display: none;
  }
}

				.hero {
			background-image: 
				linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
				url("../img/anillos-rozantes-banner.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			color: white;
			padding: 120px 20px;
			text-align: center;
		}
		
		overflow-x: auto;
		
		.galeria-item {
			overflow: hidden;
			border-radius: 10px;
		}

		.galeria-item img {
			transition: transform 0.4s ease;
		}

		.galeria-item img:hover {
			transform: scale(1.1);
		}
		
		.grayscale {
			filter: grayscale(100%);
			opacity: 0.8;
			transition: all 0.3s ease;
		}

		.grayscale:hover {
			filter: grayscale(0%);
			opacity: 1;
			transform: scale(1.05);
		}
		
		.social-icon {
			transition: transform 0.3s ease, color 0.3s ease;
		}

		.social-icon:hover {
			transform: scale(1.2);
			color: #f1c40f;
		}
		
		.card-img-top {
		  height: 180px;
		  object-fit: cover;
		}
		
		.card {
		  transition: transform .3s, box-shadow .3s;
		}

		.card:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 10px 20px rgba(0,0,0,.15);
		}
		
		.services-scroll {
		  display: flex;
		  gap: 1.5rem;
		  overflow-x: auto;
		  padding-bottom: 10px;

		  scroll-snap-type: x mandatory;
		  -webkit-overflow-scrolling: touch;
		}

		.services-scroll::-webkit-scrollbar {
		  height: 6px;
		}

		.services-scroll::-webkit-scrollbar-thumb {
		  background: #ccc;
		  border-radius: 10px;
		}

		.service-item {
		  flex: 0 0 260px; /* ancho fijo */
		  scroll-snap-align: start;
		}
		
		.services-wrapper {
		  position: relative;
		}

		.scroll-btn {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 42px;
		  height: 42px;
		  border-radius: 50%;
		  border: none;

		  background: rgba(255,255,255,0.9);
		  box-shadow: 0 2px 8px rgba(0,0,0,0.2);

		  font-size: 1.8rem;
		  font-weight: bold;
		  cursor: pointer;
		  z-index: 5;

		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.scroll-btn:hover {
		  background: #fff;
		}

		.scroll-btn.left {
		  left: -15px;
		}

		.scroll-btn.right {
		  right: -15px;
		}





        .hero h1 { font-family: 'Montserrat', sans-serif; font-size: 3rem; }

        .nos-img { background: #ccc; min-height: 300px; border-radius: 10px; }

        .galeria .col img { border-radius: 8px; }

        footer { background: #1A1A1A; color: #ccc; padding: 20px 0; }
		

#preloader{
    position:fixed;
    width:100%;
    height:100vh;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    opacity:1;
    transition: opacity 3.5s ease; /* más suave */
}

#preloader img{
    width: 60vw;       /* 60% del ancho de la pantalla */
    max-width: 900px;  /* límite para pantallas grandes */
    height: auto;
    animation: logoIntro 3.5s ease-in-out;
}

@keyframes logoIntro{
    0%{opacity:0; transform:scale(0.8);}
    50%{opacity:1; transform:scale(1.1);}
    100%{transform:scale(1);}
}

@keyframes zoomLogo {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}