/* Speciale · experiencia privada
   Capa final de dirección: puerta, telón y lente. */
:root{
  --sp-ease-ceremonial:cubic-bezier(.76,0,.24,1);
  --sp-ease-seda:cubic-bezier(.16,1,.3,1);
  --sp-oro-calmo:#b8944f;
}

/* La puerta conserva ceremonia, sin convertir la entrada en espera. */
.introPantalla.introLujo{
  animation:sp-retirar-experiencia 0s 1.72s forwards!important;
}
.introLujo .introHoja{
  animation-duration:.72s!important;
  animation-delay:1s!important;
  animation-timing-function:var(--sp-ease-ceremonial)!important;
  will-change:transform;
}
.introLujo .introCentro{transition:opacity .26s ease .9s!important}
.introLujo .introCentro img{animation-duration:.72s!important;animation-delay:.06s!important}
.introLujo .introCentro strong{animation-duration:.62s!important;animation-delay:.24s!important}
.introLujo .introCentro span{animation-duration:.54s!important;animation-delay:.38s!important}
.introLujo .introCentro::after{animation-duration:.62s!important;animation-delay:.2s!important}
@keyframes sp-retirar-experiencia{to{visibility:hidden;pointer-events:none}}

/* El gran nombre se compone como una inscripción, no como un efecto. */
.portada.portadaTipografica .portadaNombre>span{
  animation-duration:1.34s!important;
  animation-timing-function:var(--sp-ease-seda)!important;
}

/* Movimiento óptico mínimo: suficiente para que la fotografía respire. */
.portada.portadaTipografica::before{
  transform:translate3d(0,var(--sp-hero-y,0),0) scale(1.025)!important;
  transform-origin:center center!important;
  will-change:transform;
}

/* La lente vuelve como detalle secreto. Las correcciones previas la ocultaban. */
.portada.portadaTipografica .speciale-lente-control{
  display:block!important;
  opacity:0;
  transition:opacity .56s ease,
    -webkit-mask-image .72s var(--sp-ease-seda),
    mask-image .72s var(--sp-ease-seda)!important;
}
.portada.portadaTipografica.lente-activa .speciale-lente-control{opacity:1}
.speciale-lente-control::after{
  padding:8px 11px!important;
  background:#0b0b0a!important;
  color:#f3f0e9!important;
  border:1px solid rgba(184,148,79,.42);
  font-family:var(--sans)!important;
  font-size:8px!important;
  letter-spacing:.22em!important;
}

/* La mirada al detrás de escena funciona como un detalle preciso, no como
   un segundo protagonista de la portada. */
.portada.portadaTipografica.lente-activa .speciale-lente-control{
  -webkit-mask-image:radial-gradient(circle clamp(72px,8vw,118px) at var(--lente-x) var(--lente-y),#000 97%,transparent 100%)!important;
  mask-image:radial-gradient(circle clamp(72px,8vw,118px) at var(--lente-x) var(--lente-y),#000 97%,transparent 100%)!important;
}
.speciale-lente-control::after{
  transform:translate(-50%,calc(clamp(72px,8vw,118px) + 13px))!important;
}

/* Historia · tres momentos conectados por una línea editorial. */
.origenCabecera{
  padding-bottom:clamp(30px,4vw,54px)!important;
  border-bottom:1px solid rgba(10,10,10,.22);
}
.origenRelato{
  margin:clamp(54px,7vw,104px) 0 clamp(64px,8vw,118px)!important;
}
.origenRelato>div{
  position:relative;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:0 clamp(18px,2.2vw,34px)!important;
  max-width:none!important;
  counter-reset:historia;
}
.origenRelato>div>p,
.origenRelato>div>p:first-child,
.origenRelato>div>p:nth-child(2),
.origenRelato>div>p:nth-child(3){
  position:relative!important;
  grid-column:2 / 11!important;
  max-width:none!important;
  padding:clamp(28px,3vw,42px) 0 clamp(32px,3.5vw,50px) clamp(68px,7vw,108px)!important;
  border-top:1px solid rgba(10,10,10,.2)!important;
  font-size:clamp(20px,1.7vw,27px)!important;
  line-height:1.48!important;
  counter-increment:historia;
}
.origenRelato>div>p::before{
  content:"0" counter(historia);
  position:absolute;
  top:clamp(33px,3.3vw,47px);
  left:0;
  color:#9a783b;
  font:600 10px/1 var(--sans);
  letter-spacing:.2em;
}
.origenRelato>div>p:nth-child(2){grid-column:3 / 12!important}
.origenRelato>div>p:nth-child(3){
  grid-column:4 / 13!important;
  color:#f4f0e7!important;
  background:#151514!important;
  border-top:0!important;
  padding-right:clamp(28px,4vw,64px)!important;
}
.origenRelato>div>p:nth-child(3)::before{color:#c7a254}
.origenCierre{
  grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr)!important;
  gap:clamp(28px,6vw,92px)!important;
  align-items:end!important;
  padding-top:clamp(38px,5vw,70px)!important;
  border-top:1px solid rgba(10,10,10,.22)!important;
}
.origenCierre p{margin:0!important}
.origenCierre strong{margin:0!important}

/* Telones: lentos al revelar; controles: inmediatos al responder. */
.sp-revela-marco::after{transition-duration:1.12s!important;transition-timing-function:var(--sp-ease-ceremonial)!important}
.sp-revela-marco>img{transition-duration:1.32s,.48s!important;transition-timing-function:var(--sp-ease-seda),ease!important}
.sp-tinta-capa{transition-duration:.36s!important}
a,button,summary,input,textarea{transition-duration:.24s}

/* Los capítulos respiran antes de entrar, sin ocultar el contenido si falla JS. */
.sp-experiencia-lista .sp-escena{
  opacity:1;
  transform:translate3d(0,18px,0);
  transition:transform .9s var(--sp-ease-seda);
}
.sp-experiencia-lista .sp-escena.sp-en-cuadro{transform:none}
.sp-experiencia-lista .revelar-editorial{
  clip-path:inset(0 0 12% 0);
  transition:transform .82s var(--sp-ease-seda),clip-path .82s var(--sp-ease-seda)!important;
}
.sp-experiencia-lista .revelar-editorial.es-visible{clip-path:inset(0)}

/* Un hilo dorado discreto da continuidad al recorrido. */
.speciale-progreso{
  height:1px!important;
  background:linear-gradient(90deg,#8f6c2e,var(--sp-oro-calmo),#d3b877)!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  .portada.portadaTipografica::before{transform:translate3d(0,var(--sp-hero-y,0),0) scale(1.018)!important}
  .portada.portadaTipografica .speciale-lente-control{display:none!important}
  .sp-experiencia-lista .sp-escena{transform:translate3d(0,12px,0)}
  .origenCabecera{padding-bottom:28px!important}
  .origenRelato{margin:42px 0 64px!important}
  .origenRelato>div{display:block!important}
  .origenRelato>div>p,
  .origenRelato>div>p:first-child,
  .origenRelato>div>p:nth-child(2),
  .origenRelato>div>p:nth-child(3){
    padding:24px 0 30px 42px!important;
    font-size:18px!important;
    line-height:1.55!important;
  }
  .origenRelato>div>p::before{top:30px!important}
  .origenRelato>div>p:nth-child(3){
    margin-top:10px!important;
    padding:30px 24px 34px 58px!important;
  }
  .origenRelato>div>p:nth-child(3)::before{left:20px}
  .origenCierre{grid-template-columns:1fr!important;gap:26px!important}
}
@media(prefers-reduced-motion:reduce){
  .introPantalla.introLujo{display:none!important}
  .portada.portadaTipografica::before{transform:none!important}
  .portada.portadaTipografica .speciale-lente-control{display:none!important}
  .sp-experiencia-lista .sp-escena,.sp-experiencia-lista .revelar-editorial{transform:none!important;clip-path:none!important;transition:none!important}
}