/* ==========================================================================
   SOLUCIONES HOSPITALARIAS — PRELOADER & OFFICIAL LOGO REVEAL
   Versión: 2.6 (Precision Official Asset Reveal & Safe Area System)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. PRELOADER VIEWPORT CONTAINER
   -------------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: var(--z-preloader);
  background-color: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1.3s var(--ease-natural), visibility 1.3s var(--ease-natural);
  will-change: opacity, visibility;
}

#preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   02. LUZ ATMOSFÉRICA PRIMARIA (ORIGEN DEL MUNDO VISUAL)
   -------------------------------------------------------------------------- */
.preloader-light-core {
  position: absolute;
  width: min(90vw, 700px);
  height: min(90vw, 700px);
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at center, rgba(56, 182, 255, 0.18) 0%, rgba(220, 238, 254, 0.08) 45%, transparent 75%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 1.6s var(--ease-natural), transform 2.4s var(--ease-natural);
  pointer-events: none;
  filter: blur(32px);
}

.preloader-light-core.light-expanding {
  opacity: 1;
  transform: scale(2.4);
}

/* --------------------------------------------------------------------------
   03. SAFE AREA & ESCENARIO DEL LOGO OFICIAL
   -------------------------------------------------------------------------- */
.preloader-safe-stage {
  position: relative;
  width: 100%;
  max-width: min(88vw, 440px);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Contenedor del Logo Oficial con Aspect Ratio 3:1 (2172x724) */
.preloader-logo-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 2172 / 724;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Estado Inicial: Oculto con escala sutil */
  opacity: 0;
  transform: scale(0.92);
  transition: 
    opacity 0.9s var(--ease-natural),
    transform 1.25s var(--ease-natural);
  will-change: transform, opacity;
}

/* Imagen Oficial del Logo Horizontal */
.preloader-official-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 74, 173, 0.12));
  
  /* 
     GEOMETRÍA DEL LOGO OFICIAL:
     - El centro del símbolo SH está en el 19.01% del ancho de la imagen.
     - El centro total de la imagen está en el 49.65%.
     - Para centrar el símbolo inicialmente: shift = +(49.65% - 19.01%) = +30.64%.
     - Para ocultar el texto: clip-path corta a la derecha del 36.5%.
  */
  transform: translateX(30.64%);
  clip-path: inset(0 63.5% 0 0);
  transition: 
    transform 1.35s var(--ease-natural),
    clip-path 1.35s var(--ease-natural),
    filter 0.9s var(--ease-natural);
  will-change: transform, clip-path, filter;
}

/* ESTADO 1: El Isotipo SH aparece centrado en pantalla */
.preloader-logo-wrapper.symbol-appeared {
  opacity: 1;
  transform: scale(1);
}

/* ESTADO 2: Revelación fluida del Logo Oficial completo */
.preloader-logo-wrapper.logo-revealed .preloader-official-logo {
  transform: translateX(0%);
  clip-path: inset(0 0% 0 0);
  filter: drop-shadow(0 14px 32px rgba(0, 74, 173, 0.16));
}

/* --------------------------------------------------------------------------
   04. ADAPTACIÓN RESPONSIVE DE SAFE AREA
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .preloader-safe-stage {
    max-width: min(84vw, 340px);
  }
}

@media (max-width: 380px) {
  .preloader-safe-stage {
    max-width: min(82vw, 300px);
  }
}