/* ==========================================================================
   03 · PRECARGA
   Concepto: un cristal empañado que se limpia de una pasada. Al terminar,
   el panel se abre por la regla de 2px y entrega el hero.
   ========================================================================== */

.precarga {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.precarga[hidden] { display: none; }

/* Los dos paños que se abren al final */
.precarga__pano {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: var(--blanco);
  will-change: transform;
}
.precarga__pano--sup { top: 0; }
.precarga__pano--inf { bottom: 0; }

/* La regla por la que se parte el panel */
.precarga__corte {
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: var(--rule);
  margin-top: calc(var(--rule) / -2);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.precarga__contenido {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

/* --- Cabecera de la precarga --------------------------------------------- */

.precarga__marca {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.precarga__isotipo {
  width: 44px; height: 48px;       /* 48px de alto: tamaño mínimo del manual */
  object-fit: contain;
}
.precarga__firma {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.precarga__firma span { display: block; color: var(--celeste-texto); }

/* --- Palabra que se revela ----------------------------------------------- */

.precarga__cristal {
  align-self: center;
  justify-self: start;
  width: fit-content;
  position: relative;
  --limpio: 0;
}

.precarga__palabra {
  font-size: clamp(2.5rem, 9vw, 7.5rem);
  line-height: .88;
  font-weight: 900;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  text-transform: none;
}
.precarga__palabra em { font-style: normal; display: block; }

/* Capa velada: lo que se ve a través del cristal sucio */
.precarga__palabra--velada {
  position: absolute;
  inset: 0;
  color: var(--plata);
  filter: blur(7px);
  opacity: .85;
  clip-path: inset(0 0 0 calc(var(--limpio) * 100%));
}
/* Capa nítida: aparece sólo donde ya pasó la escobilla */
.precarga__palabra--nitida {
  clip-path: inset(0 calc(100% - var(--limpio) * 100%) 0 0);
}

/* La escobilla: una línea de 2px que arrastra el borde limpio */
.precarga__escobilla {
  position: absolute;
  top: -6%; bottom: -6%;
  left: calc(var(--limpio) * 100%);
  width: var(--rule);
  background: var(--celeste-marca);
  opacity: calc(1 - var(--limpio) * var(--limpio));
}

/* --- Pie de la precarga --------------------------------------------------- */

.precarga__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1rem;
  position: relative;
}
.precarga__pie::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--hairline);
  background: var(--plata);
}
.precarga__barra {
  position: absolute;
  top: 0; left: 0;
  height: var(--rule);
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.precarga__estado {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ink-70);
  max-width: 22ch;
  line-height: 1.5;
}
.precarga__cuenta {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: .85;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.precarga__cuenta sup {
  font-size: .28em;
  vertical-align: super;
  letter-spacing: .08em;
  color: var(--celeste-texto);
}

@media (max-width: 700px) {
  .precarga__estado { max-width: 14ch; }
}

/* Sin animación: la precarga no se muestra en absoluto */
@media (prefers-reduced-motion: reduce) {
  .precarga { display: none; }
}

/* --- Salida ---------------------------------------------------------------
   1. el contenido se retira, 2. la regla de 2px cruza el ancho,
   3. el panel se abre por esa regla y entrega el hero.
   ------------------------------------------------------------------------- */

.precarga__marca,
.precarga__cristal,
.precarga__pie {
  transition: opacity .40s var(--ease-out), transform .40s var(--ease-out);
}
.precarga.esta-saliendo .precarga__marca   { opacity: 0; transform: translateY(-12px); transition-delay: 0s; }
.precarga.esta-saliendo .precarga__cristal { opacity: 0; transform: translateY(-16px); transition-delay: .05s; }
.precarga.esta-saliendo .precarga__pie     { opacity: 0; transform: translateY(12px);  transition-delay: .10s; }

.precarga.esta-abriendo .precarga__corte {
  transform: scaleX(1);
  transition: transform .55s var(--ease-out);
}

.precarga__pano { transition: transform .95s var(--ease-io); }
.precarga.esta-abierta .precarga__pano--sup { transform: translateY(-100%); }
.precarga.esta-abierta .precarga__pano--inf { transform: translateY(100%); }
.precarga.esta-abierta .precarga__corte { opacity: 0; transition: transform .55s var(--ease-out), opacity .35s .45s linear; }