.app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff; /* #00323C;*/
  overflow: hidden;
  z-index: 40;
}

.loader-logo {
  position: relative;
  z-index: 45;
  width: 260px;
  pointer-events: none;
}

/* ARREGLOS FIJOS */
.fixed-arrangement {
  position: absolute;
  width: 350px; 
  height: auto;
  z-index: 41;
  pointer-events: none; 
}

/* Esquina superior derecha */
.bottom-right {
  bottom: 0;
  right: 0;
}

.bottom-left {
  bottom: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
}

.top-left {
  top: 0;
  left: 0;
  height: 450px;
  width: auto;
}

/* Esquina superior izquierda */
.bottom {
  bottom: -80px;
  width: 100%;
}

.deco-left{
  margin-right: 500px;
}

.deco-right{
margin-left: 500px;
}

#bg-svgs {
  position: absolute;
  inset: 0;
  z-index: 41;
  overflow: hidden;
}

.bg-item {
  position: absolute;
  animation: floatmini 6s ease-in-out infinite alternate;
}

.tile-img {
  opacity: 0.85;
  filter: drop-shadow(0 0 1px #ffffff50);
}

@keyframes subir-suave {
  0% {
    bottom: -100px;
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(calc(-50% + 30px)) rotate(5deg);
  }
  100% {
    bottom: 65vh; 
    transform: translateX(calc(-50% - 30px)) rotate(-5deg);
  }
}

.app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  z-index: 40;
}

.loader-logo {
  position: relative;
  z-index: 45;
  width: 220px;
  pointer-events: none;
}

@media (max-width: 480px) {
  .loader-logo { width: 160px; }
}

.fixed-arrangement {
  position: absolute;
  width: 350px;
  height: auto;
  z-index: 41;
  pointer-events: none;
}

.bottom-right { bottom: 0; right: 0; }
.bottom-left  { bottom: 0; left: 0; }
.top-right    { top: 0; right: 0; }
.top-left     { top: 0; left: 0; height: 450px; width: auto; }

@media (max-width: 480px) {
  .fixed-arrangement { width: 160px; }
  .top-left { height: 220px; width: auto; }
}

.deco-left  { margin-right: 500px; }

#bg-svgs {
  position: absolute;
  inset: 0;
  z-index: 41;
  overflow: hidden;
  pointer-events: none;
}

/* Cada dibujito flotante */
.dibujo-item {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  animation:
    flotar var(--dur) ease-in-out infinite alternate,
    girar  var(--dur2) ease-in-out infinite alternate;
  opacity: 0;
  animation-fill-mode: forwards;
}
.dibujo-item img {
  display: block;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.10));
}

@keyframes flotar {
  0%   { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-18px) scale(1.03); }
}
@keyframes girar {
  0%   { transform: rotate(var(--rot-start)); }
  100% { transform: rotate(var(--rot-end)); }
}
@keyframes aparecer {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes flotar {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-18px); }
}
@keyframes girar {
  0%   { transform: rotate(var(--rot-start)); }
  100% { transform: rotate(var(--rot-end)); }
}
@keyframes aparecer {
  from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}
@keyframes wobble {
  0%   { transform: rotate(0deg)   scale(1); }
  15%  { transform: rotate(-6deg)  scale(1.08); }
  30%  { transform: rotate(5deg)   scale(0.95); }
  45%  { transform: rotate(-4deg)  scale(1.05); }
  60%  { transform: rotate(3deg)   scale(0.98); }
  75%  { transform: rotate(-2deg)  scale(1.03); }
  100% { transform: rotate(0deg)   scale(1); }
}
@keyframes pulse-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}