/* Carga de la portada pública (marcado en index.html).
   Solo existe para quien llega sin sesión a / (public/escala.js pone la clase
   con-portada en <html> antes de que se lea el marcado). Sale a los 300 ms si
   la portada aún no está lista: si la app y la primera obra llegan antes, no
   se ve nunca. Hasta que arranca la app, las teselas respiran; después se
   encienden con el progreso real (src/components/portadaMosaico.js), que la
   retira con un fundido. Si algo fallara del todo, se va sola a los 15 s. */
@font-face { font-family: 'Jost carga'; font-style: normal; font-weight: 300 500; font-display: block; src: url('/fuentes/jost-normal-latin.woff2') format('woff2'); }
#carga-portada { display: none; }
html.con-portada #carga-portada {
  display: grid; position: fixed; inset: 0; z-index: 60; background: #f6f3ee;
  place-content: center; justify-items: center; row-gap: 34px;
  opacity: 0; animation: cp-entra .6s ease .3s forwards, cp-sale .6s ease 15s forwards;
}
html.con-portada #carga-portada.cp-fuera { opacity: 1; animation: cp-sale .55s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes cp-entra { to { opacity: 1; } }
@keyframes cp-sale { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.cp-logo { display: grid; justify-items: center; row-gap: 10px; font-family: 'Jost carga', 'Jost', sans-serif; line-height: 1; text-transform: uppercase; }
.cp-logo span:first-child { font-weight: 300; font-size: 24px; letter-spacing: .4em; margin-right: -.4em; color: #141212; }
.cp-logo span:last-child { font-weight: 400; font-size: 11px; letter-spacing: .5em; margin-right: -.5em; color: #6e1a2c; }
.cp-hilera { display: flex; gap: 6px; }
.cp-hilera i { width: 10px; height: 10px; border-radius: 1.5px; background: #d9d5cf; opacity: .55;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(20, 18, 18, .1);
  animation: cp-respira 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
  transition: background-color .5s ease, opacity .5s ease, transform .55s cubic-bezier(.3, 1.35, .5, 1); }
.cp-hilera i:nth-child(2) { animation-delay: .2s; } .cp-hilera i:nth-child(3) { animation-delay: .4s; }
.cp-hilera i:nth-child(4) { animation-delay: .6s; } .cp-hilera i:nth-child(5) { animation-delay: .8s; }
.cp-hilera i:nth-child(6) { animation-delay: 1s; } .cp-hilera i:nth-child(7) { animation-delay: 1.2s; }
/* Con la app ya arrancada, el progreso real manda: encendidas, la siguiente respira */
.cp-js .cp-hilera i { animation: none; }
.cp-js .cp-hilera i.cp-prox { animation: cp-respira 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.cp-hilera i.cp-luz { background: #2e2b2b; opacity: 1; transform: none;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .25), 0 1px 1.5px rgba(20, 18, 18, .18); }
.cp-hilera i.cp-cae { transform: translateY(-7px) scale(1.18); opacity: .2; transition: none; }
@keyframes cp-respira { 0%, 100% { opacity: .5; } 50% { opacity: .95; background: #6b6560; } }
@media (prefers-reduced-motion: reduce) {
  html.con-portada #carga-portada { animation: cp-entra .01ms linear .3s forwards, cp-sale .01ms linear 15s forwards; }
  html.con-portada #carga-portada.cp-fuera { animation: cp-sale .01ms linear forwards; }
  .cp-hilera i, .cp-js .cp-hilera i.cp-prox { animation: none; transition: none; }
}