/* ============================================================
   REITOR CONSULTORIA - LOADER DE TRANSICION ENTRE PAGINAS
   "EL SELLO EN FIRME"
   ------------------------------------------------------------
   Concepto: el logo se estampa UNA sola vez sobre la placa del
   documento y se queda plantado. Nunca gira, nunca rebota, nunca
   se apaga. Lo que sigue vivo mientras dura la espera es el
   sistema alrededor: un hilo de avance con desaceleracion y un
   filo de luz que recorre la tinta de la marca, recortado con el
   canal alfa del propio logo.

   Estado de reposo = composicion terminada. Por eso, cuando el
   loader se oculta o cuando la pagina se descarga a mitad de la
   secuencia, lo ultimo que ve el usuario es la marca completa y
   correcta, jamas un logo a medias.

   Reemplaza POR COMPLETO el contenido de css/loader.css
   ============================================================ */

/* ------------------------------------------------------------
   0. BLINDAJE (historico)
   styles.css tenia dos reglas huerfanas que se cargaban este
   loader: un display:none sobre .page-transition-loader y, peor,
       .page-transition-loader * { animation-duration: 2s !important }
   que forzaba a 2 segundos TODAS las duraciones de la coreografia.
   Ambas se eliminaron de styles.css: este archivo es ahora el
   unico dueno de los estilos del loader. Las duraciones se dejan
   en formato largo con !important como red de seguridad, por si
   alguien vuelve a declarar algo parecido en otra hoja.
   El marcado tampoco lleva ya la clase page-transition-loader.
   ------------------------------------------------------------ */

/* ---------- 1. Capa raiz ---------- */

#pageTransitionLoader {
  /* Paleta de marca, con respaldo literal si styles.css no cargo */
  --rt-lima: var(--verde-lima, #8dc63f);
  --rt-lima-hondo: var(--verde-lima-profundo, #79b12f);
  --rt-azul-hondo: var(--azul-oscuro, #0b1e3b);
  --rt-azul-medio: var(--azul-intermedio, #1e3d6b);

  /* Medida del sello: fluida de 320 px en adelante */
  --rt-sello: clamp(118px, 38vw, 192px);

  /* Curvas */
  --rt-caida: cubic-bezier(0.62, 0.02, 0.2, 1);
  --rt-firmeza: cubic-bezier(0.16, 0.86, 0.26, 1);
  --rt-avance: cubic-bezier(0.3, 0.1, 0.2, 1);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;

  display: grid;
  place-items: center;

  background-color: var(--rt-azul-hondo);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* La visibilidad espera al final del fundido para no cortar la salida */
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

#pageTransitionLoader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}

/* ---------- 2. Fondo institucional, deliberadamente quieto ---------- */

#pageTransitionLoader .rt-fondo,
#pageTransitionLoader .loader-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background:
    /* pauta fina de papel contable */
    repeating-linear-gradient(
      0deg,
      transparent 0 27px,
      rgba(255, 255, 255, 0.022) 27px 28px
    ),
    /* vineta que cierra los bordes y da peso */
      radial-gradient(
        112% 100% at 50% 50%,
        transparent 40%,
        rgba(4, 12, 26, 0.58) 100%
      ),
    /* halo frio detras del sello */
      radial-gradient(
        120% 86% at 50% 45%,
        rgba(30, 61, 107, 0.62) 0%,
        rgba(11, 30, 59, 0) 62%
      ),
    linear-gradient(
      158deg,
      var(--rt-azul-hondo) 0%,
      #14315c 55%,
      var(--rt-azul-medio) 100%
    );
}

/* Mata las particulas flotantes del loader anterior si sobreviven */
#pageTransitionLoader .rt-fondo::before,
#pageTransitionLoader .rt-fondo::after,
#pageTransitionLoader .loader-backdrop::before,
#pageTransitionLoader .loader-backdrop::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ---------- 3. Nucleo ---------- */

#pageTransitionLoader .rt-nucleo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

/* ---------- 4. El sello ---------- */

#pageTransitionLoader .rt-sello {
  position: relative;
  width: var(--rt-sello);
  height: var(--rt-sello);
  flex: none;
  /* Encierra el mix-blend-mode del filo de luz dentro del sello */
  isolation: isolate;
}

/* Placa: la superficie del documento */
#pageTransitionLoader .rt-placa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 46px -24px rgba(0, 0, 0, 0.72);
  opacity: 1;
  transform: none;
}

/* Guias de registro: solo existen durante el aterrizaje */
#pageTransitionLoader .rt-guia {
  position: absolute;
  opacity: 0;
}

#pageTransitionLoader .rt-guia--h {
  top: 50%;
  left: 7%;
  right: 7%;
  height: 1px;
  margin-top: -0.5px;
  transform: scaleX(1);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(141, 198, 63, 0.72) 50%,
    transparent 100%
  );
}

#pageTransitionLoader .rt-guia--v {
  left: 50%;
  top: 7%;
  bottom: 7%;
  width: 1px;
  margin-left: -0.5px;
  transform: scaleY(1);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(141, 198, 63, 0.72) 50%,
    transparent 100%
  );
}

/* Huella de presion: el contorno que suelta el golpe */
#pageTransitionLoader .rt-huella {
  position: absolute;
  top: 11%;
  left: 11%;
  width: 78%;
  height: 78%;
  border: 1.5px solid var(--rt-lima);
  border-radius: 3px;
  opacity: 0;
  transform: scale(1.22);
}

/* Escuadras: cierran el marco y SE QUEDAN cerradas */
#pageTransitionLoader .rt-marco {
  position: absolute;
  top: -7%;
  left: -7%;
  width: 114%;
  height: 114%;
  opacity: 1;
  transform: none;
}

#pageTransitionLoader .rt-esquina {
  position: absolute;
  width: 15%;
  height: 15%;
  border: 0 solid var(--rt-lima);
}

#pageTransitionLoader .rt-esquina--no {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}
#pageTransitionLoader .rt-esquina--ne {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
#pageTransitionLoader .rt-esquina--so {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
#pageTransitionLoader .rt-esquina--se {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* El logo. Estado de reposo = estampado, entero y quieto.
   Sombra estatica, sin glow pulsante y sin blur animado. */
#pageTransitionLoader .rt-logo {
  position: absolute;
  top: 19%;
  left: 19%;
  width: 62%;
  height: 62%;
  object-fit: contain;
  z-index: 2;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}

/* Filo de luz sobre la tinta. Recortado con el canal alfa del
   propio PNG, asi que la luz vive DENTRO de la silueta y nunca
   se ve como un rectangulo brillante encima del logo. */
#pageTransitionLoader .rt-lustre {
  display: none; /* solo se enciende si el navegador soporta mask */
  position: absolute;
  top: 19%;
  left: 19%;
  width: 62%;
  height: 62%;
  z-index: 3;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 56%,
    rgba(255, 255, 255, 0.4) 61%,
    rgba(226, 245, 184, 0.7) 64%,
    rgba(255, 255, 255, 0.2) 67%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 600% 100%;
  /* Reposo: la banda queda fuera de la silueta */
  background-position: 100% 50%;
  mix-blend-mode: screen;
}

@supports (-webkit-mask-image: url("../assets/images/logoreitor-384.png")) or
  (mask-image: url("../assets/images/logoreitor-384.png")) {
  #pageTransitionLoader .rt-lustre {
    display: block;
    -webkit-mask-image: url("../assets/images/logoreitor-384.png");
    mask-image: url("../assets/images/logoreitor-384.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* ---------- 5. Pie institucional e hilo de avance ---------- */

#pageTransitionLoader .rt-pie {
  margin: 22px 0 0;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-size: clamp(0.56rem, 2.7vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  opacity: 1;
  transform: none;
}

#pageTransitionLoader .rt-pie span {
  color: var(--rt-lima);
  margin: 0 0.15em;
}

#pageTransitionLoader .rt-hilo {
  display: block;
  position: relative;
  width: var(--rt-sello);
  max-width: 100%;
  height: 1px;
  margin-top: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.11);
  opacity: 1;
}

#pageTransitionLoader .rt-hilo i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  opacity: 0;
  transform: translateX(-118%);
  background: linear-gradient(
    90deg,
    rgba(141, 198, 63, 0) 0%,
    var(--rt-lima) 50%,
    rgba(141, 198, 63, 0) 100%
  );
}

/* Texto solo para lectores de pantalla: da contenido real a la
   region aria-live sin ensuciar la composicion */
#pageTransitionLoader .rt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   6. SECUENCIA
   Todo vive bajo .active: cada vez que el loader aparece la
   historia arranca en el fotograma 0, y cuando se oculta las
   animaciones desaparecen y los elementos caen a su estado de
   reposo, que ya es la composicion terminada.

   Linea de tiempo real (ms desde que se anade .active):
      0 - 172   se trazan las guias de registro
     40 - 340   el logo baja y se estampa (opaco a los ~166 ms,
                compresion del 1.6 % a los ~226 ms)
    215 - 635   la huella de presion se expande y se apaga
    205 - 505   las escuadras cierran el marco y SE QUEDAN
    330 - 630   entra el pie institucional
    430 - ...   entra el hilo y empieza a recorrer (bucle 1500 ms)
   1212 -1693   primer filo de luz sobre la tinta (bucle 2600 ms)

   js/loader.js navega 300 ms despues del clic: en ese instante el
   logo ya esta completo y legible. Ese es el criterio.
   ============================================================ */

#pageTransitionLoader.active .rt-placa {
  animation-name: rtPlaca;
  animation-duration: 520ms !important;
  animation-timing-function: var(--rt-firmeza);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-guia--h {
  animation-name: rtGuiaH;
  animation-duration: 330ms !important;
  animation-timing-function: var(--rt-firmeza);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-guia--v {
  animation-name: rtGuiaV;
  animation-duration: 330ms !important;
  animation-timing-function: var(--rt-firmeza);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-logo {
  animation-name: rtEstampa;
  animation-duration: 300ms !important;
  animation-delay: 40ms;
  animation-timing-function: var(--rt-caida);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  will-change: transform, opacity;
}

#pageTransitionLoader.active .rt-huella {
  animation-name: rtHuella;
  animation-duration: 420ms !important;
  animation-delay: 215ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-marco {
  animation-name: rtMarco;
  animation-duration: 300ms !important;
  animation-delay: 205ms;
  animation-timing-function: var(--rt-firmeza);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-pie {
  animation-name: rtEntra;
  animation-duration: 300ms !important;
  animation-delay: 330ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-hilo {
  animation-name: rtEntraPlano;
  animation-duration: 260ms !important;
  animation-delay: 430ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

#pageTransitionLoader.active .rt-hilo i {
  animation-name: rtHilo;
  animation-duration: 1500ms !important;
  animation-delay: 480ms;
  animation-timing-function: var(--rt-avance);
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

#pageTransitionLoader.active .rt-lustre {
  animation-name: rtLustre;
  animation-duration: 2600ms !important;
  animation-delay: 620ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ---------- 7. Fotogramas ---------- */

/* La placa aparece y solo acusa el golpe del sello */
@keyframes rtPlaca {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  43.5% {
    opacity: 1;
    transform: scale(0.988);
  }
  62%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Guias: se trazan, esperan al sello y se retiran. Terminan en
   opacity 0, que es su estado de reposo: no vuelven nunca. */
@keyframes rtGuiaH {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  52%,
  68% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes rtGuiaV {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  52%,
  68% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* El logo baja, comprime al apoyar y asienta en 1. Una sola vez.
   Solo escala y opacidad: JAMAS rotacion. */
@keyframes rtEstampa {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }
  42% {
    opacity: 1;
    transform: scale(1.02);
  }
  62% {
    opacity: 1;
    transform: scale(0.984);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Huella: nace en el impacto, se expande y se apaga. Una vez. */
@keyframes rtHuella {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  14% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

/* Escuadras: cierran el marco y se quedan cerradas */
@keyframes rtMarco {
  0% {
    opacity: 0;
    transform: scale(1.09);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rtEntra {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rtEntraPlano {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Hilo de avance: entra rapido y frena al cerrar el recorrido,
   como un proceso y no como un adorno. Empieza y termina fuera
   del carril y con opacidad 0: el bucle no tiene costura. */
@keyframes rtHilo {
  0% {
    transform: translateX(-118%);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(292%);
    opacity: 0;
  }
}

/* Filo de luz: cruza la tinta y descansa.
   El fotograma 0 % y el 100 % declaran EL MISMO valor, asi que el
   cierre del bucle es identico por definicion. El unico salto de
   valor esta en el 64 %, y ocurre entre dos posiciones en las que
   la banda cae fuera de la silueta (la ventana visible del degradado
   es el sexto extremo, y la banda vive entre el 56 % y el 72 %),
   de modo que no hay nada que ver cuando salta. */
@keyframes rtLustre {
  0% {
    background-position: 100% 50%;
  }
  16% {
    background-position: 100% 50%;
  }
  64% {
    background-position: 0% 50%;
  }
  64.01% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ============================================================
   8. COMPATIBILIDAD CON EL MARCADO ANTERIOR
   Si una pagina todavia trae .loader-spinner / .spinner-logo, el
   logo se muestra QUIETO, entero y con sombra estatica: se anulan
   el giro de 360 grados, los dos anillos y el glow intermitente.
   Se degrada a una marca correcta, nunca a un spinner.
   ============================================================ */

#pageTransitionLoader .loader-content {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  width: auto;
  max-width: 340px;
  text-align: center;
}

#pageTransitionLoader .loader-spinner {
  position: relative;
  width: var(--rt-sello);
  height: var(--rt-sello);
  margin: 0 auto;
  animation: none !important;
}

#pageTransitionLoader .loader-spinner::before,
#pageTransitionLoader .loader-spinner::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  border: 0 !important;
}

#pageTransitionLoader .spinner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: none !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)) !important;
  animation: none !important;
}

/* ---------- 9. Pantallas pequenas y apaisadas ---------- */

@media (max-width: 380px) {
  #pageTransitionLoader .rt-pie {
    letter-spacing: 0.18em;
  }
  #pageTransitionLoader .rt-hilo {
    margin-top: 14px;
  }
}

@media (max-height: 480px) {
  #pageTransitionLoader {
    --rt-sello: clamp(92px, 22vh, 132px);
  }
  #pageTransitionLoader .rt-pie {
    margin-top: 16px;
  }
  #pageTransitionLoader .rt-hilo {
    margin-top: 12px;
  }
}

/* ============================================================
   10. MOVIMIENTO REDUCIDO
   Como el estado de reposo YA es la composicion terminada, aqui
   basta con apagar el movimiento: queda el sello estampado dentro
   de su marco, el pie y una regla fija. Nada se mueve, nada falta.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #pageTransitionLoader {
    transition: opacity 150ms linear, visibility 0s linear 150ms;
  }

  #pageTransitionLoader.active {
    transition: opacity 150ms linear, visibility 0s linear 0s;
  }

  #pageTransitionLoader,
  #pageTransitionLoader *,
  #pageTransitionLoader *::before,
  #pageTransitionLoader *::after,
  #pageTransitionLoader.active .rt-logo,
  #pageTransitionLoader.active .rt-lustre,
  #pageTransitionLoader.active .rt-hilo i,
  #pageTransitionLoader.active .spinner-logo {
    animation: none !important;
  }

  /* Las guias, la huella y el filo de luz sobran sin secuencia */
  #pageTransitionLoader .rt-guia,
  #pageTransitionLoader .rt-huella,
  #pageTransitionLoader .rt-lustre {
    display: none !important;
  }

  /* El hilo se vuelve una regla fija bajo el sello */
  #pageTransitionLoader .rt-hilo i {
    left: 31%;
    width: 38%;
    transform: none;
    opacity: 0.85;
  }
}