/* Splash copiado de Torre de Control (../torre-de-control.html, líneas 792–845). */

/* ============================================================
   SPLASH — logo, barra de carga que se vuelve botón "Acceder"
   ============================================================ */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: var(--surface);
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  touch-action: none;
  transition: opacity .42s ease, transform .42s ease;
}
.splash.leaving { opacity: 0; transform: scale(1.03); pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; transform: translateY(-3vh); }
.splash-lockup {
  display: flex; align-items: center; gap: 18px;
  opacity: 0; transform: translateY(8px) scale(.96);
  animation: splash-in .85s cubic-bezier(.22,1,.36,1) .15s forwards;
}
.splash-logo { width: 276px; padding: 14px 18px; border-radius: 14px; }
.splash-go {
  position: relative; overflow: hidden;
  margin-top: 46px; width: 220px; height: 3px;
  padding: 0; border: 0; border-radius: 2px;
  background: var(--surface-3);
  color: #16283D; font: 600 15px/1 var(--sans); letter-spacing: .02em;
  cursor: default; opacity: 0;
  animation: splash-fade .4s ease .7s forwards;
  transition: height .4s cubic-bezier(.22,1,.36,1), border-radius .4s, box-shadow .4s, transform .12s;
}
.splash-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--sun); border-radius: inherit;
  animation: splash-load 1.7s cubic-bezier(.4,0,.2,1) .8s forwards;
}
.splash-label { position: relative; opacity: 0; transition: opacity .3s ease .18s; }
.splash-go.ready { height: 48px; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 10px 28px rgba(245,166,35,.32); }
.splash-go.ready .splash-fill { width: 100%; }
.splash-go.ready .splash-label { opacity: 1; }
.splash-go.ready:active { transform: scale(.98); }
.splash-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.splash-prod {
  margin-top: 20px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0; animation: splash-fade .5s ease 1.05s forwards;
}
@keyframes splash-in   { to { opacity: 1; transform: none; } }
@keyframes splash-fade { to { opacity: 1; } }
@keyframes splash-load { 0% { width: 0; } 30% { width: 34%; } 55% { width: 52%; } 78% { width: 84%; } 100% { width: 100%; } }
@media (min-width: 861px) {
  .splash-logo { width: 360px; padding: 18px 24px; border-radius: 16px; }
  .splash-go { width: 240px; }
}