/* ==========================================================================
   PRELOADER — pantalla de entrada con el monograma  ·  js/ui/preloader.js
   ========================================================================== */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .5s ease, visibility .5s;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.pre__box { text-align: center; }
.pre__mono { width: 104px; height: 104px; margin-inline: auto; }
.pre__mono circle {
  fill: none; stroke: var(--primario); stroke-width: 2;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  stroke-linecap: round;
  animation: trazo 1.1s .1s ease forwards;
}
.pre__mono text {
  font-family: var(--f-display); font-weight: 600;
  font-size: 26px; fill: var(--primario);
  opacity: 0; animation: subir .7s .5s ease forwards;
}
.pre__nombre {
  margin-top: .9rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--gris);
  opacity: 0; animation: subir .7s .7s ease forwards;
}
.pre__barra {
  width: 130px; height: 2px; margin: 1rem auto 0;
  background: var(--linea); overflow: hidden; position: relative;
  border-radius: 2px;
}
.pre__barra::after {
  content: ""; position: absolute; inset: 0;
  background: var(--primario);
  transform: translateX(-100%);
  animation: cargar 1.2s .2s ease forwards;
}