/* ============================================================================
   ESCENAS DEL LOADER - REITOR
   ----------------------------------------------------------------------------
   Acompana a css/loader.css. Aquel define la capa, el fondo, el hilo de avance
   y el sello de la marca; este anade la ilustracion que cambia segun a donde
   vaya el visitante, mas el titulo y el subtitulo.

   REGLA DE ORO DE ESTE ARCHIVO
   Todo termina QUIETO y COMPLETO. El loader puede desaparecer en cualquier
   instante -en cuanto llega la pagina-, asi que ninguna animacion puede
   dejar la escena a medio dibujar si se corta. Las animaciones son de
   entrada, con forwards, y solo el hilo de avance se repite.

   Las duraciones estan pensadas para una espera corta: a los 900 ms la escena
   ya esta montada. Si la pagina tarda mas, lo unico que sigue moviendose es
   el hilo y algun latido suave, para que no parezca congelado.
   ============================================================================ */

/* ---------- Envoltorio ---------- */

#pageTransitionLoader .rt-escena {
  position: relative;
  display: none;
  width: min(320px, 78vw);
  /* 186 y no 170: las hojas giradas del abanico bajan mas que su caja y
     con 170 rozaban el logo de debajo. */
  height: 208px;
  margin: 0 auto;
}

/* Solo se pinta cuando js/loader.js ha metido una escena dentro */
#pageTransitionLoader.tiene-escena .rt-escena {
  display: block;
}

/* Con escena, el sello sobra: la ilustracion lleva el peso visual y el logo
   aparece debajo, mas pequeno. Sin escena (destino desconocido) el loader se
   queda con su composicion de siempre. */
#pageTransitionLoader.tiene-escena .rt-sello,
#pageTransitionLoader.tiene-escena .rt-pie {
  display: none;
}

/* ---------- El logo, debajo de la escena ---------- */

#pageTransitionLoader .rt-marca {
  display: none;
  width: clamp(84px, 22vw, 108px);
  height: auto;
  margin: 1rem auto 0.9rem;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
}

#pageTransitionLoader.tiene-escena .rt-marca {
  display: block;
}

#pageTransitionLoader.tiene-escena.active .rt-marca {
  animation: escMarca 620ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    340ms both;
}

@keyframes escMarca {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Titulo y subtitulo ---------- */

#pageTransitionLoader .rt-titulo,
#pageTransitionLoader .rt-subtitulo {
  display: none;
  margin: 0;
  text-align: center;
  opacity: 0;
}

#pageTransitionLoader.tiene-escena .rt-titulo,
#pageTransitionLoader.tiene-escena .rt-subtitulo {
  display: block;
}

#pageTransitionLoader .rt-titulo {
  margin-top: 0.9rem;
  color: #ffffff;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

#pageTransitionLoader .rt-subtitulo {
  margin-top: 0.3rem;
  color: var(--rt-lima, #8dc63f);
  font-size: clamp(0.8rem, 3vw, 0.92rem);
  font-weight: 500;
}

#pageTransitionLoader.tiene-escena.active .rt-titulo {
  animation: escTexto 460ms ease-out 640ms both;
}

#pageTransitionLoader.tiene-escena.active .rt-subtitulo {
  animation: escTexto 460ms ease-out 760ms both;
}

@keyframes escTexto {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   PIEZAS COMPARTIDAS
   Las hojas, las lineas y el resplandor los usan varias escenas.
   ============================================================================ */

/* Resplandor detras de la ilustracion: da profundidad y disimula el borde
   de las piezas blancas contra el fondo azul. */
#pageTransitionLoader .rt-escena::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(141, 198, 63, 0.22) 0%,
    rgba(141, 198, 63, 0.07) 45%,
    transparent 70%
  );
  opacity: 0;
}

#pageTransitionLoader.active .rt-escena::before {
  animation: escHalo 900ms ease-out both;
}

@keyframes escHalo {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- La hoja ---------- */

#pageTransitionLoader .esc-hoja {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 118px;
  height: 152px;
  margin-left: -59px;
  padding: 11px 10px;
  border-radius: 7px;
  background: linear-gradient(170deg, #ffffff 0%, #f2f5f8 100%);
  box-shadow: 0 14px 26px rgba(3, 12, 26, 0.42);
  opacity: 0;
  transform-origin: 50% 100%;
}

/* La etiqueta de categoria: el toque lima de cada tarjeta */
#pageTransitionLoader .esc-tag {
  display: block;
  width: 34px;
  height: 7px;
  border-radius: 3px;
  background: var(--rt-lima, #8dc63f);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Cada <i> es una linea de texto */
#pageTransitionLoader .esc-hoja i {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 2px;
  background: #c8d2dd;
  transform: scaleX(0);
  transform-origin: left center;
}

#pageTransitionLoader .esc-hoja i:nth-of-type(2) {
  width: 82%;
}
#pageTransitionLoader .esc-hoja i:nth-of-type(3) {
  width: 64%;
}
#pageTransitionLoader .esc-hoja i:nth-of-type(4) {
  width: 74%;
}
#pageTransitionLoader .esc-hoja i:nth-of-type(5) {
  width: 52%;
}

/* El recuadro de imagen */
#pageTransitionLoader .esc-foto {
  position: absolute;
  right: 10px;
  bottom: 11px;
  width: 38px;
  height: 30px;
  border-radius: 4px;
  background: #dbe3ea;
  opacity: 0;
}

/* ============================================================================
   ESCENA: BLOG  -  tres hojas que se abren en abanico
   ============================================================================ */

/* Las laterales entran desde debajo de la central y giran hacia fuera. La
   central sube la ultima y queda delante: asi se lee como un mazo que se
   abre, no como tres hojas sueltas que aparecen a la vez. */

#pageTransitionLoader.esc-blog .esc-hoja--izq {
  z-index: 1;
  transform: rotate(0deg) translateY(18px) scale(0.9);
}

#pageTransitionLoader.esc-blog .esc-hoja--der {
  z-index: 1;
  transform: rotate(0deg) translateY(18px) scale(0.9);
}

#pageTransitionLoader.esc-blog .esc-hoja--centro {
  z-index: 2;
  width: 132px;
  height: 168px;
  margin-left: -66px;
  transform: translateY(24px) scale(0.92);
}

#pageTransitionLoader.active.esc-blog .esc-hoja--izq {
  animation: escAbanicoIzq 700ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    180ms both;
}

#pageTransitionLoader.active.esc-blog .esc-hoja--der {
  animation: escAbanicoDer 700ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    250ms both;
}

#pageTransitionLoader.active.esc-blog .esc-hoja--centro {
  animation: escHojaSube 640ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    60ms both;
}

@keyframes escAbanicoIzq {
  from {
    opacity: 0;
    transform: rotate(0deg) translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(-13deg) translate(-52px, 6px) scale(0.94);
  }
}

@keyframes escAbanicoDer {
  from {
    opacity: 0;
    transform: rotate(0deg) translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(13deg) translate(52px, 6px) scale(0.94);
  }
}

@keyframes escHojaSube {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- El texto se escribe solo ---------- */

/* Cada linea se traza de izquierda a derecha, escalonada. Es lo que da la
   sensacion de que el articulo se esta preparando de verdad. */
#pageTransitionLoader.active .esc-hoja .esc-tag {
  animation: escTrazo 300ms ease-out both;
}

#pageTransitionLoader.active .esc-hoja i {
  animation: escTrazo 340ms ease-out both;
}

#pageTransitionLoader.active .esc-hoja .esc-foto {
  animation: escAparece 360ms ease-out both;
}

@keyframes escTrazo {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes escAparece {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Escalonado del trazado, hoja por hoja */
#pageTransitionLoader.active .esc-hoja--centro .esc-tag {
  animation-delay: 380ms;
}
#pageTransitionLoader.active .esc-hoja--centro i:nth-of-type(2) {
  animation-delay: 450ms;
}
#pageTransitionLoader.active .esc-hoja--centro i:nth-of-type(3) {
  animation-delay: 510ms;
}
#pageTransitionLoader.active .esc-hoja--centro i:nth-of-type(4) {
  animation-delay: 570ms;
}
#pageTransitionLoader.active .esc-hoja--centro i:nth-of-type(5) {
  animation-delay: 630ms;
}
#pageTransitionLoader.active .esc-hoja--centro .esc-foto {
  animation-delay: 640ms;
}

#pageTransitionLoader.active .esc-hoja--izq .esc-tag,
#pageTransitionLoader.active .esc-hoja--der .esc-tag {
  animation-delay: 500ms;
}
#pageTransitionLoader.active .esc-hoja--izq i,
#pageTransitionLoader.active .esc-hoja--der i {
  animation-delay: 560ms;
}
#pageTransitionLoader.active .esc-hoja--izq .esc-foto,
#pageTransitionLoader.active .esc-hoja--der .esc-foto {
  animation-delay: 620ms;
}

/* ============================================================================
   ESCENA: ARTICULO  -  una hoja y un cursor que la recorre
   ============================================================================ */

#pageTransitionLoader.esc-articulo .esc-hoja--sola {
  z-index: 2;
  width: 124px;
  height: 152px;
  margin-left: -62px;
  transform: translateY(20px) scale(0.94);
}

#pageTransitionLoader.active.esc-articulo .esc-hoja--sola {
  animation: escHojaSube 620ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    120ms both;
}

#pageTransitionLoader.active.esc-articulo .esc-tag {
  animation-delay: 380ms;
}
#pageTransitionLoader.active.esc-articulo i:nth-of-type(2) {
  animation-delay: 440ms;
}
#pageTransitionLoader.active.esc-articulo i:nth-of-type(3) {
  animation-delay: 500ms;
}
#pageTransitionLoader.active.esc-articulo i:nth-of-type(4) {
  animation-delay: 560ms;
}
#pageTransitionLoader.active.esc-articulo i:nth-of-type(5) {
  animation-delay: 620ms;
}
#pageTransitionLoader.active.esc-articulo i:nth-of-type(6) {
  animation-delay: 680ms;
}
#pageTransitionLoader.active.esc-articulo .esc-foto {
  animation-delay: 700ms;
}

/* El cursor: baja por la hoja como quien va leyendo. Este SI se repite,
   porque es lo que mantiene viva la escena si la carga se alarga. */
#pageTransitionLoader .esc-cursor {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 3px;
  height: 16px;
  margin-left: -54px;
  border-radius: 2px;
  background: var(--rt-lima, #8dc63f);
  box-shadow: 0 0 10px rgba(141, 198, 63, 0.8);
  opacity: 0;
  z-index: 3;
}

#pageTransitionLoader.active.esc-articulo .esc-cursor {
  animation: escCursor 1.9s ease-in-out 700ms infinite;
}

@keyframes escCursor {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(74px);
  }
}

/* ============================================================================
   ESCENA: CALCULADORA  -  visor que cuenta y teclas que se pulsan
   ============================================================================ */

#pageTransitionLoader .esc-maquina {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 152px;
  margin: -76px 0 0 -66px;
  padding: 11px;
  border-radius: 14px;
  background: linear-gradient(165deg, #ffffff 0%, #eef2f6 100%);
  box-shadow: 0 16px 30px rgba(3, 12, 26, 0.45);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

#pageTransitionLoader.active.esc-calculadora .esc-maquina {
  animation: escHojaSube 620ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    100ms both;
}

#pageTransitionLoader .esc-visor {
  position: relative;
  display: block;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: var(--rt-azul-hondo, #0b1e3b);
  overflow: hidden;
}

/* La cifra que corre dentro del visor */
#pageTransitionLoader .esc-visor b {
  position: absolute;
  right: 9px;
  top: 13px;
  display: block;
  height: 8px;
  width: 10px;
  border-radius: 2px;
  background: var(--rt-lima, #8dc63f);
  box-shadow: 0 0 8px rgba(141, 198, 63, 0.7);
}

#pageTransitionLoader.active.esc-calculadora .esc-visor b {
  animation: escCifra 1.4s var(--rt-avance, cubic-bezier(0.3, 0.1, 0.2, 1)) 420ms
    infinite;
}

@keyframes escCifra {
  0% {
    width: 10px;
    opacity: 0.5;
  }
  70% {
    width: 68px;
    opacity: 1;
  }
  100% {
    width: 68px;
    opacity: 0.5;
  }
}

#pageTransitionLoader .esc-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

#pageTransitionLoader .esc-teclado i {
  display: block;
  height: 21px;
  border-radius: 5px;
  background: #dde4ec;
  opacity: 0;
  transform: scale(0.6);
}

/* Las teclas se encienden en cascada y despues una de ellas se "pulsa" */
#pageTransitionLoader.active .esc-teclado i {
  animation: escTecla 300ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    both;
}

#pageTransitionLoader.active .esc-teclado i:nth-child(1) { animation-delay: 420ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(2) { animation-delay: 455ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(3) { animation-delay: 490ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(4) { animation-delay: 525ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(5) { animation-delay: 560ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(6) { animation-delay: 595ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(7) { animation-delay: 630ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(8) { animation-delay: 665ms; }
#pageTransitionLoader.active .esc-teclado i:nth-child(9) { animation-delay: 700ms; }

@keyframes escTecla {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* La tecla de resultado late en lima: es la que "calcula" */
#pageTransitionLoader.active .esc-teclado i:nth-child(9) {
  animation:
    escTecla 300ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 700ms both,
    escTeclaViva 1.4s ease-in-out 1s infinite;
}

@keyframes escTeclaViva {
  0%,
  100% {
    background: #dde4ec;
  }
  50% {
    background: var(--rt-lima, #8dc63f);
  }
}

/* ============================================================================
   ESCENA: BANCO DE HERRAMIENTAS  -  nueve fichas que se encienden en onda
   ============================================================================ */

#pageTransitionLoader .esc-rejilla {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 10px;
  margin: -74px 0 0 -74px;
}

#pageTransitionLoader .esc-rejilla i {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  /* Con menos presencia que esta las fichas se perdian contra el fondo
     azul en el medio segundo que dura la vista. */
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(141, 198, 63, 0.5);
  opacity: 0;
  transform: scale(0.55);
}

#pageTransitionLoader.active.esc-herramientas .esc-rejilla i {
  animation:
    escFicha 380ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) both,
    escFichaOnda 2.2s ease-in-out infinite;
}

/* La onda recorre la rejilla en diagonal: el retardo crece con fila+columna */
#pageTransitionLoader.active .esc-rejilla i:nth-child(1) { animation-delay: 160ms, 900ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(2) { animation-delay: 210ms, 990ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(3) { animation-delay: 260ms, 1080ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(4) { animation-delay: 210ms, 990ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(5) { animation-delay: 260ms, 1080ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(6) { animation-delay: 310ms, 1170ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(7) { animation-delay: 260ms, 1080ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(8) { animation-delay: 310ms, 1170ms; }
#pageTransitionLoader.active .esc-rejilla i:nth-child(9) { animation-delay: 360ms, 1260ms; }

@keyframes escFicha {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes escFichaOnda {
  0%,
  100% {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(141, 198, 63, 0.32);
  }
  50% {
    background: rgba(141, 198, 63, 0.24);
    border-color: rgba(141, 198, 63, 0.8);
  }
}

/* ============================================================================
   ESCENA: CURSOS  -  birrete y barras de progreso
   ============================================================================ */

#pageTransitionLoader .esc-aula {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 150px;
  margin: -75px 0 0 -80px;
}

/* El birrete: un rombo (la tabla) mas una base */
#pageTransitionLoader .esc-birrete {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 96px;
  height: 60px;
  margin-left: -48px;
}

#pageTransitionLoader .esc-birrete b {
  position: absolute;
  left: 50%;
  top: 0;
  width: 66px;
  height: 66px;
  margin-left: -33px;
  border-radius: 8px;
  background: linear-gradient(150deg, #ffffff 0%, #e8eef4 100%);
  box-shadow: 0 12px 22px rgba(3, 12, 26, 0.4);
  transform: rotate(45deg) scale(0.5);
  transform-origin: center;
  opacity: 0;
}

/* La borla */
#pageTransitionLoader .esc-birrete u {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 3px;
  height: 30px;
  margin-left: 26px;
  border-radius: 2px;
  background: var(--rt-lima, #8dc63f);
  transform-origin: 50% 0;
  opacity: 0;
}

#pageTransitionLoader.active.esc-cursos .esc-birrete b {
  animation: escBirrete 640ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    140ms both;
}

#pageTransitionLoader.active.esc-cursos .esc-birrete u {
  animation:
    escAparece 300ms ease-out 620ms both,
    escBorla 2.4s ease-in-out 900ms infinite;
}

@keyframes escBirrete {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes escBorla {
  0%,
  100% {
    transform: rotate(-9deg);
  }
  50% {
    transform: rotate(9deg);
  }
}

/* Las barras: progreso del alumno */
#pageTransitionLoader .esc-barras {
  position: absolute;
  left: 50%;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 52px;
  margin-left: -37px;
}

#pageTransitionLoader .esc-barras i {
  display: block;
  width: 20px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(
    180deg,
    var(--rt-lima, #8dc63f) 0%,
    var(--rt-lima-hondo, #79b12f) 100%
  );
  height: 0;
}

#pageTransitionLoader.active.esc-cursos .esc-barras i:nth-child(1) {
  animation: escBarra1 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 560ms both;
}
#pageTransitionLoader.active.esc-cursos .esc-barras i:nth-child(2) {
  animation: escBarra2 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 650ms both;
}
#pageTransitionLoader.active.esc-cursos .esc-barras i:nth-child(3) {
  animation: escBarra3 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 740ms both;
}

@keyframes escBarra1 {
  from { height: 0; }
  to { height: 26px; }
}
@keyframes escBarra2 {
  from { height: 0; }
  to { height: 40px; }
}
@keyframes escBarra3 {
  from { height: 0; }
  to { height: 52px; }
}

/* ============================================================================
   ESCENA: PRIVACIDAD  -  escudo que se cierra y se marca
   ============================================================================ */

#pageTransitionLoader .esc-escudo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 122px;
  margin: -61px 0 0 -52px;
}

#pageTransitionLoader .esc-escudo b {
  position: absolute;
  inset: 0;
  border-radius: 12px 12px 50% 50% / 12px 12px 62% 62%;
  background: linear-gradient(160deg, #ffffff 0%, #e9eff5 100%);
  box-shadow: 0 14px 26px rgba(3, 12, 26, 0.42);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
}

/* El visto bueno: dos trazos que se dibujan */
#pageTransitionLoader .esc-escudo u {
  position: absolute;
  left: 50%;
  top: 47px;
  width: 40px;
  height: 21px;
  margin-left: -20px;
  border-left: 6px solid var(--rt-lima, #8dc63f);
  border-bottom: 6px solid var(--rt-lima, #8dc63f);
  border-radius: 2px;
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
}

#pageTransitionLoader.active.esc-privacidad .esc-escudo b {
  animation: escHojaSube 600ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    140ms both;
}

#pageTransitionLoader.active.esc-privacidad .esc-escudo u {
  animation: escVisto 460ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    560ms both;
}

@keyframes escVisto {
  from {
    opacity: 0;
    transform: rotate(-45deg) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) scale(1.12);
  }
  to {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }
}

/* ============================================================================
   ESCENA: INICIO  -  los rombos de la marca, en orbita
   ============================================================================ */

#pageTransitionLoader .esc-rombos {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
}

#pageTransitionLoader .esc-rombos i {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid var(--rt-lima, #8dc63f);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.4);
  opacity: 0;
}

#pageTransitionLoader .esc-rombos i:nth-child(1) {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(141, 198, 63, 0.2);
}
#pageTransitionLoader .esc-rombos i:nth-child(2) {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  border-color: rgba(141, 198, 63, 0.55);
}
#pageTransitionLoader .esc-rombos i:nth-child(3) {
  width: 130px;
  height: 130px;
  border-radius: 20px;
  border-color: rgba(141, 198, 63, 0.28);
}

#pageTransitionLoader.active.esc-inicio .esc-rombos i:nth-child(1) {
  animation:
    escRombo 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 140ms both,
    escLatido 2.4s ease-in-out 800ms infinite;
}
#pageTransitionLoader.active.esc-inicio .esc-rombos i:nth-child(2) {
  animation:
    escRombo 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 240ms both,
    escLatido 2.4s ease-in-out 950ms infinite;
}
#pageTransitionLoader.active.esc-inicio .esc-rombos i:nth-child(3) {
  animation:
    escRombo 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1)) 340ms both,
    escLatido 2.4s ease-in-out 1100ms infinite;
}

@keyframes escRombo {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
}

@keyframes escLatido {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.06);
  }
}

/* ============================================================================
   PANTALLAS ESTRECHAS
   ============================================================================ */

@media (max-width: 400px) {
  #pageTransitionLoader .rt-escena {
    height: 150px;
  }

  #pageTransitionLoader .esc-hoja {
    width: 92px;
    height: 118px;
    margin-left: -46px;
  }

  #pageTransitionLoader.esc-blog .esc-hoja--centro {
    width: 102px;
    height: 130px;
    margin-left: -51px;
  }

  #pageTransitionLoader .esc-rejilla {
    grid-template-columns: repeat(3, 40px);
    gap: 8px;
    margin: -64px 0 0 -64px;
  }

  #pageTransitionLoader .esc-rejilla i {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================================
   MENOS MOVIMIENTO
   ----------------------------------------------------------------------------
   Quien pide reducir el movimiento no pide quedarse sin escena: pide que no
   se mueva. Todo aparece de golpe, en su posicion final, sin desplazamientos
   ni latidos. Las hojas del abanico conservan su giro porque es POSICION, no
   movimiento: sin el se apilarian una encima de otra.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  #pageTransitionLoader .rt-escena *,
  #pageTransitionLoader .rt-escena::before,
  #pageTransitionLoader .rt-marca,
  #pageTransitionLoader .rt-titulo,
  #pageTransitionLoader .rt-subtitulo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #pageTransitionLoader .esc-hoja i,
  #pageTransitionLoader .esc-tag {
    transform: scaleX(1) !important;
  }

  #pageTransitionLoader.esc-blog .esc-hoja--izq {
    transform: rotate(-13deg) translate(-52px, 6px) !important;
  }

  #pageTransitionLoader.esc-blog .esc-hoja--der {
    transform: rotate(13deg) translate(52px, 6px) !important;
  }

  #pageTransitionLoader .esc-rombos i {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  #pageTransitionLoader .esc-birrete b {
    transform: rotate(45deg) !important;
  }

  #pageTransitionLoader .esc-escudo u {
    transform: rotate(-45deg) !important;
  }

  #pageTransitionLoader .esc-barras i:nth-child(1) { height: 26px; }
  #pageTransitionLoader .esc-barras i:nth-child(2) { height: 40px; }
  #pageTransitionLoader .esc-barras i:nth-child(3) { height: 52px; }

  #pageTransitionLoader .esc-visor b { width: 68px; }
}

/* ============================================================================
   LA TRANSICION CONTINUA AL LLEGAR
   ----------------------------------------------------------------------------
   js/inicio.js marca el documento con rt-entrando cuando venimos de un enlace
   interno. Va en el <head>, asi que esta regla ya esta aplicada cuando el
   navegador parsea el loader: nace visible y no hay ni un fotograma de la
   pagina nueva asomando antes de taparla.

   js/loader.js retira la marca al ocultar. Si por lo que sea no llegase a
   hacerlo, el respaldo de mas abajo la retira igualmente a los 4 segundos:
   dejar a alguien delante de una pantalla azul para siempre no es una opcion.
   ============================================================================ */

html.rt-entrando #pageTransitionLoader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.rt-entrando #pageTransitionLoader:not(.active) {
  animation: rtRespaldoSalida 400ms ease 4s forwards;
}

@keyframes rtRespaldoSalida {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ============================================================================
   BARRA DE PROGRESO DE LAS ESCENAS
   ----------------------------------------------------------------------------
   El hilo de css/loader.css es una banda de 1 px que barre de lado a lado: se
   lee como "algo esta pasando", no como "va por aqui". El diseno pedia una
   barra de verdad, con su recorrido lleno y un punto luminoso en la cabeza.

   Se reaprovecha el mismo marcado (.rt-hilo > i) en vez de anadir otro: solo
   cambia lo que significa la <i>, que pasa de banda que viaja a relleno que
   crece.
   ============================================================================ */

#pageTransitionLoader.tiene-escena .rt-hilo {
  width: min(300px, 72vw);
  height: 3px;
  margin-top: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  /* El punto de la cabeza sobresale del carril: no puede recortarse */
  overflow: visible;
}

#pageTransitionLoader.tiene-escena .rt-hilo i {
  right: auto;
  width: 0;
  opacity: 1;
  transform: none;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(141, 198, 63, 0.45) 0%,
    var(--rt-lima, #8dc63f) 100%
  );
}

/* El punto luminoso que va en cabeza */
#pageTransitionLoader.tiene-escena .rt-hilo i::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 10px 2px rgba(141, 198, 63, 0.9),
    0 0 22px 6px rgba(141, 198, 63, 0.35);
}

/* Avanza deprisa al principio y se frena cerca del final, como una carga
   real: lo que nunca hace es llegar al 100 % y quedarse, porque eso
   anunciaria un final que no controlamos. */
#pageTransitionLoader.tiene-escena.active .rt-hilo i {
  animation: escAvance 2.6s cubic-bezier(0.16, 0.84, 0.3, 1) 180ms forwards;
}

@keyframes escAvance {
  0% {
    width: 0;
  }
  35% {
    width: 46%;
  }
  70% {
    width: 74%;
  }
  100% {
    width: 92%;
  }
}

/* ---------- Mas presencia, como en el diseno ---------- */

#pageTransitionLoader.tiene-escena .rt-titulo {
  margin-top: 1.5rem;
  font-size: clamp(1.12rem, 4.2vw, 1.42rem);
  font-weight: 600;
}

#pageTransitionLoader.tiene-escena .rt-subtitulo {
  margin-top: 0.45rem;
  font-size: clamp(0.86rem, 3.2vw, 1rem);
}

@media (prefers-reduced-motion: reduce) {
  #pageTransitionLoader.tiene-escena .rt-hilo i {
    animation: none !important;
    width: 60% !important;
  }
}

/* ----------------------------------------------------------------------------
   RED DE SEGURIDAD: NADA DE SELLO MIENTRAS SE MONTA LA ESCENA
   ----------------------------------------------------------------------------
   Al llegar de una transicion el loader ya esta visible (rt-entrando) pero la
   escena la monta JavaScript. Si por lo que sea tardase -conexion lenta, un
   script bloqueando-, lo que se veria en ese hueco es el sello: la composicion
   por defecto. Y salta a la vista, porque es OTRO diseno.

   Mientras el loader viene de una transicion y todavia no tiene escena, el
   sello no se pinta. Se ve el fondo azul con el hilo, que es continuidad, no
   un cambio de diseno a media transicion.
   ---------------------------------------------------------------------------- */

html.rt-entrando #pageTransitionLoader:not(.tiene-escena) .rt-sello,
html.rt-entrando #pageTransitionLoader:not(.tiene-escena) .rt-pie {
  visibility: hidden;
}

/* ============================================================================
   EL VELO DE SALIDA
   ----------------------------------------------------------------------------
   Al pulsar un enlace interno el loader se muestra en modo velo: solo el fondo
   azul, sin escena, sin sello y sin textos.

   POR QUE
   La animacion de la escena dura casi un segundo y la salida de la pagina
   ocurre a los 320 ms. Si se pintara aqui, el visitante veria la escena
   empezar, cortarse a media altura al cambiar de documento, y empezar otra vez
   desde cero en el destino. Dos documentos distintos no comparten animaciones
   CSS: no hay manera de continuarlas, solo de repetirlas.

   Asi que la escena se pinta una sola vez y se pinta donde hay tiempo de
   verla: en la pagina de destino. Lo de aqui es solo el fundido que tapa el
   cambio.
   ============================================================================ */

#pageTransitionLoader.rt-velo .rt-nucleo {
  opacity: 0;
  /* Sin transicion: no se trata de que se desvanezca, es que no esta */
  transition: none;
}

/* ============================================================================
   ESCENA: EQUIPO  -  tres siluetas que se van encendiendo
   ----------------------------------------------------------------------------
   La usan las fichas /equipo/<slug>.html. Cada silueta es un circulo -la
   cabeza- sobre un arco -los hombros-, y entran de izquierda a derecha con
   80ms de diferencia para que se lea como un equipo que se reune y no como
   tres formas apareciendo a la vez.
   ============================================================================ */

#pageTransitionLoader .esc-equipo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  width: 190px;
  height: 96px;
  margin: -48px 0 0 -95px;
}

#pageTransitionLoader .esc-persona {
  position: relative;
  width: 54px;
  height: 76px;
  opacity: 0;
  transform: translateY(14px) scale(0.86);
}

/* La cabeza */
#pageTransitionLoader .esc-persona b {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff 0%, #e2eaf3 100%);
  box-shadow: 0 6px 14px rgba(3, 12, 26, 0.38);
}

/* Los hombros */
#pageTransitionLoader .esc-persona u {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 38px;
  border-radius: 27px 27px 8px 8px;
  background: linear-gradient(160deg, #ffffff 0%, #dde6f0 100%);
  box-shadow: 0 8px 18px rgba(3, 12, 26, 0.34);
}

/* La del centro es la que manda: se queda en lima */
#pageTransitionLoader .esc-persona:nth-child(2) b,
#pageTransitionLoader .esc-persona:nth-child(2) u {
  background: linear-gradient(160deg, var(--rt-lima, #8dc63f) 0%, #6da328 100%);
}

#pageTransitionLoader .esc-persona:nth-child(2) {
  /* Un poco mas alta para que el grupo tenga centro */
  height: 88px;
}

#pageTransitionLoader.active.esc-equipo .esc-persona {
  animation: escPersonaEntra 520ms var(--rt-firmeza, cubic-bezier(0.16, 0.86, 0.26, 1))
    both;
}

#pageTransitionLoader.active.esc-equipo .esc-persona:nth-child(1) {
  animation-delay: 120ms;
}

#pageTransitionLoader.active.esc-equipo .esc-persona:nth-child(2) {
  animation-delay: 200ms;
}

#pageTransitionLoader.active.esc-equipo .esc-persona:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes escPersonaEntra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
  }
  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}