/* Pantalla de carga de la portada: espera a las imágenes de la cabecera (máximo 4 s) */
.loading {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: white;
}
.loading .charge-box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18pt;
  font-weight: 300;
  color: #9E8857;
}
.loading .charge-box .t { margin-top: -20%; }
.loading .charge-box .dot { margin-top: -20%; opacity: 0; animation: loadingDots 3s ease infinite; }
.loading .charge-box .dot-2 { animation-delay: 500ms; }
.loading .charge-box .dot-3 { animation-delay: 1000ms; }
@keyframes loadingDots {
  0%, 20% { opacity: 0; }
  21%, 80% { opacity: 1; }
  81%, 100% { opacity: 0; }
}
.loading-img {
  width: 60px;
  height: 60px;
  position: absolute;
  top: calc(50% - 80px);
  left: 50%;
  margin: -30px 0 0 -30px;
  transform: rotate(45deg);
  animation: rotation 8s ease-in-out infinite;
}
@keyframes rotation {
  0%, 25% { transform: rotate(45deg); }
  50%, 75% { transform: rotate(225deg); }
  100% { transform: rotate(405deg); }
}
.loading .loading-img div {
  width: 6px;
  height: 6px;
  background: #DBC698;
  border-radius: 100%;
  float: left;
  margin-bottom: 12px;
  animation: scaleDot 2s ease infinite;
}
.loading .loading-img div:not(:nth-child(4n+4)) { margin-right: 12px; }
.loading .loading-img div:nth-child(2), .loading .loading-img div:nth-child(5) { animation-delay: 0.1s; }
.loading .loading-img div:nth-child(3), .loading .loading-img div:nth-child(6), .loading .loading-img div:nth-child(9) { animation-delay: 0.2s; }
.loading .loading-img div:nth-child(4), .loading .loading-img div:nth-child(7), .loading .loading-img div:nth-child(10), .loading .loading-img div:nth-child(13) { animation-delay: 0.3s; }
.loading .loading-img div:nth-child(8), .loading .loading-img div:nth-child(11), .loading .loading-img div:nth-child(14) { animation-delay: 0.4s; }
.loading .loading-img div:nth-child(12), .loading .loading-img div:nth-child(15) { animation-delay: 0.5s; }
.loading .loading-img div:nth-child(16) { animation-delay: 0.6s; }
@keyframes scaleDot {
  40% { transform: scale(1.3) translate(-2px, -2px); }
  80%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .loading .loading-img, .loading .loading-img div, .loading .charge-box .dot { animation: none; opacity: 1; }
}