/* Agua App · Splash de bienvenida (cosmético). Se activa solo con splash.js */
#splash{
  position:fixed;inset:0;height:100vh;height:100dvh;z-index:100;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  background:radial-gradient(120% 90% at 50% 38%,#0E6B85 0%,#0A4F63 48%,#15262B 100%);
  opacity:1;touch-action:none;overscroll-behavior:none;
}
/* Seguro extra: si por cualquier motivo el JS fallara, se quita solo a los 9 s */
#splash.on{display:flex;animation:spFailsafe 0s linear 9s forwards}
@keyframes spFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#splash.out{opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity .7s ease,visibility 0s linear .7s}

.sp-scene{display:flex;flex-direction:column;align-items:center;animation:spIn .6s cubic-bezier(.2,.8,.2,1) both;transition:transform .7s ease}
#splash.out .sp-scene{transform:scale(.9)}

.sp-drop{
  display:block;width:min(40vw,150px);height:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 10px 24px rgba(95,214,234,.45));
  animation:spFloat 2.2s ease-in-out infinite;will-change:transform;
}
.sp-shadow{
  width:min(24vw,88px);height:14px;margin-top:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));
  animation:spShadow 2.2s ease-in-out infinite;
}
.sp-word{
  font-weight:800;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.92);opacity:0;animation:spWord .6s ease .35s forwards;
}
@keyframes spIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
@keyframes spWord{to{opacity:1}}
@keyframes spFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1.02,.98)}
  50%{transform:translateY(-20px) rotate(1.5deg) scale(.98,1.02)}
}
@keyframes spShadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.7);opacity:.5}}

@media (prefers-reduced-motion:reduce){
  .sp-drop,.sp-shadow,.sp-scene{animation:none}
  .sp-word{animation:none;opacity:1}
  #splash.out{transition-duration:.2s}
}