/* Speciale · lujo silencioso
   Una única firma de entrada y un wordmark que se compone sin prisa. */

.introPantalla.introLujo{
  display:grid!important;
  background:#0b0b0a;
  animation:retirarIntroLujo 0s 3.05s forwards!important;
}
.introLujo .introHoja{
  background:#0b0b0a;
  animation-duration:.95s!important;
  animation-delay:2.1s!important;
  animation-timing-function:cubic-bezier(.76,0,.24,1)!important;
}
.introLujo .introCentro{
  animation:none!important;
  transform:none;
}
.introLujo .introCentro::after{
  content:"";
  width:min(112px,24vw);
  height:1px;
  margin-top:22px;
  background:linear-gradient(90deg,transparent,#c7a254 18% 82%,transparent);
  opacity:0;
  transform:scaleX(.08);
  animation:trazoFirma 1.15s .62s cubic-bezier(.22,1,.36,1) both;
}
.introLujo .introCentro img{
  opacity:0;
  transform:translateY(10px) scale(.982);
  filter:sepia(.18) saturate(.84) brightness(.88);
  animation:emblemaImpreso 1.45s .18s cubic-bezier(.16,1,.3,1) both;
}
.introLujo .introCentro strong{
  opacity:0;
  transform:translateY(9px);
  animation:nombreFirma 1.05s .7s cubic-bezier(.16,1,.3,1) both;
}
.introLujo .introCentro span{
  opacity:0;
  transform:translateY(6px);
  animation:subtituloFirma .9s 1.02s cubic-bezier(.22,1,.36,1) both;
}

@keyframes emblemaImpreso{
  0%{opacity:0;transform:translateY(10px) scale(.982)}
  36%{opacity:.48}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes nombreFirma{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes subtituloFirma{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:.68;transform:translateY(0)}
}
@keyframes trazoFirma{
  0%{opacity:0;transform:scaleX(.08)}
  20%{opacity:.72}
  100%{opacity:.72;transform:scaleX(1)}
}
@keyframes retirarIntroLujo{
  to{visibility:hidden;pointer-events:none}
}

/* El barrido dorado de la portada descubre letras que llegan una a una.
   Se reemplaza el movimiento de bloque por una composición más serena. */
.portada.portadaTipografica .portadaNombre{
  animation:none!important;
  display:flex!important;
  justify-content:center;
  letter-spacing:-.062em!important;
}
.portada.portadaTipografica .portadaNombre>span{
  display:inline-block;
  opacity:0;
  transform:translateY(20px) scale(.985);
  animation:letraSilenciosa 1.55s cubic-bezier(.16,1,.3,1) both;
}
.portada.portadaTipografica .portadaNombre>span:nth-child(1){animation-delay:.28s}
.portada.portadaTipografica .portadaNombre>span:nth-child(2){animation-delay:.335s}
.portada.portadaTipografica .portadaNombre>span:nth-child(3){animation-delay:.39s}
.portada.portadaTipografica .portadaNombre>span:nth-child(4){animation-delay:.445s}
.portada.portadaTipografica .portadaNombre>span:nth-child(5){animation-delay:.5s}
.portada.portadaTipografica .portadaNombre>span:nth-child(6){animation-delay:.555s}
.portada.portadaTipografica .portadaNombre>span:nth-child(7){animation-delay:.61s}
.portada.portadaTipografica .portadaNombre>span:nth-child(8){animation-delay:.665s}

@keyframes letraSilenciosa{
  0%{opacity:0;transform:translateY(20px) scale(.985)}
  42%{opacity:.82}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:700px){
  .introLujo .introCentro img{width:min(76vw,390px)!important}
  .introLujo .introCentro strong{font-size:clamp(28px,9vw,42px)!important}
  .portada.portadaTipografica .portadaNombre>span{transform:translateY(12px) scale(.99)}
}

@media(prefers-reduced-motion:reduce){
  .introPantalla.introLujo{display:none!important}
  .portada.portadaTipografica .portadaNombre>span{
    opacity:1;
    transform:none;
    animation:none!important;
  }
}