@import "/public/css/home-global.css";
@import "/public/components/home-components/whatsapp-chat-modal/WhatsAppChatModal.css";
@import "/public/components/home-components/site-header/SiteHeader.css";
@import "/public/components/home-components/site-footer/SiteFooter.css";
@import "/public/components/global-components/paginator/Paginator.css";

@import "/public/components/home-components/featured-products/FeaturedProducts.css";
@import "/public/components/home-components/banner-swiper/BannerSwiper.css";
@import "/public/components/home-components/product-modal/ProductModal.css";
@import "/public/components/home-components/sign-in-modal/SignInModal.css";
@import "/public/components/home-components/contact-form/ContactForm.css";
@import "/public/components/home-components/guestModal/GuestModal.css";


#site-main>#banner {
  padding: 0;
}

.top-image-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url('/public/multimedia/top-banner-blur.png');
}

.slide-fade-in-left {
  opacity: 0;
  transform: translateX(-50px) scale(0.95);
  animation: slideFadeInLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
  contain: layout style;
}

.slide-fade-in-right {
  opacity: 0;
  transform: translateX(50px) scale(0.95);
  animation: slideFadeInRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
  contain: layout style;
}

.slide-fade-in-top {
  opacity: 0;
  transform: translateY(-50px) scale(0.95);
  animation: slideFadeInTop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
  contain: layout style;
}

.slide-fade-in-bottom {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  animation: slideFadeInBottom 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
  contain: layout style;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, filter;
  contain: layout style;
}


/* Keyframes mejorados */
@keyframes slideFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideFadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideFadeInTop {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideFadeInBottom {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-lazy {
  animation: none !important;
  opacity: 0;
}

/*****************************/
@media (max-width: 400px) {
  #categories .wrapper-categories div {
    background-image: url("/public/multimedia/images/SLIDE\ 3.png");
  }
}


.animate-scroll {
  animation: scroll 20s linear infinite;
}


@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes fadeInOut {

  0%,
  20% {
    opacity: 0;
  }

  30%,
  70% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
  }
}

.fade-image {
  animation: fadeInOut 9s linear infinite;
}



/* CONTACT!!! */
.bg-contact {
  background: url('/public/multimedia/contacto.png') center center no-repeat;
}

.bg-contact {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.bg-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.content-wrapper {
  position: relative;
  z-index: 2;
}

.slide-text-bottom {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
}


@keyframes slideTextBottom {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === Loader Overlay === */
#loader-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

#loader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Loader content */
.loader-content {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

/* === Text animation === */
.slide-text-bottom {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
}
@keyframes slideTextBottom {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.logo-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.logo-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 1s infinite;
  pointer-events: none;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}