/* preloader.css - centrado garantizado y responsive */

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --fade-duration: 0.75s;
}

/* CONTENEDOR PRINCIPAL: centrado absoluto y z-index alto */
#Preloader1 {
  background: var(--white) !important;
  position: fixed !important;
  inset: 0 !important; /* top:0;right:0;bottom:0;left:0; */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important;
  transition: opacity var(--fade-duration) ease,
    visibility var(--fade-duration) ease;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* hidden = fadeout */
#Preloader1.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Contenedor de GIF + logo (usa width relativa para responsive) */
#Preloader1 .image-container {
  position: relative;
  width: min(80vw, 360px);
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

/* GIF circular (fondo) */
#Preloader1 .background-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  transition: transform var(--fade-duration) ease,
    opacity var(--fade-duration) ease;
}

/* Logo centrado encima del GIF */
#Preloader1 .overlay-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 220px;
  height: auto;
  display: block;
  pointer-events: none;
  transition: transform var(--fade-duration) ease,
    opacity var(--fade-duration) ease;
}

/* aplica fade-out a ambas imágenes cuando ocultamos el preloader */
#Preloader1.hidden .background-image,
#Preloader1.hidden .overlay-image {
  opacity: 0;
  transform: scale(0.98);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  #Preloader1 .image-container {
    width: min(70vw, 300px);
  }
  #Preloader1 .overlay-image {
    max-width: 180px;
  }
}
@media (max-width: 768px) {
  #Preloader1 .image-container {
    width: min(70vw, 250px);
  }
  #Preloader1 .overlay-image {
    max-width: 140px;
  }
}
@media (max-width: 480px) {
  #Preloader1 .image-container {
    width: min(75vw, 180px);
  }
  #Preloader1 .overlay-image {
    max-width: 110px;
  }
}