/* Speciale · gestos editoriales opcionales
   Capa aislada: puede retirarse sin afectar el diseño ni el contenido. */

.speciale-progreso{
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  width:100%;
  height:2px;
  pointer-events:none;
  transform:scaleX(var(--speciale-avance,0));
  transform-origin:0 50%;
  background:#B8944F;
  will-change:transform;
}

html.efectos-listos .revelar-editorial{
  /* El contenido nunca desaparece: la animacion solo aporta desplazamiento.
     Asi no quedan titulares blancos/palidos si IntersectionObserver tarda. */
  opacity:1;
  transform:translateY(10px);
  transition:
    transform .58s cubic-bezier(.2,.72,.2,1);
}

html.efectos-listos .revelar-editorial.es-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .speciale-progreso{display:none}
  html.efectos-listos .revelar-editorial{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media print{
  .speciale-progreso{display:none}
  html.efectos-listos .revelar-editorial{opacity:1;transform:none}
}

/* Hero · lente de control, portada actual con la firma interactiva de la v1. */
.portada.portadaTipografica{
  --lente-x:72%;
  --lente-y:48%;
}
.speciale-lente-control{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(#00000024,#00000024),
    url('/historia-montaje-v4.jpg') center/cover no-repeat;
  filter:grayscale(1) contrast(1.08);
  -webkit-mask-image:radial-gradient(circle 0 at var(--lente-x) var(--lente-y),#000 98%,transparent 100%);
  mask-image:radial-gradient(circle 0 at var(--lente-x) var(--lente-y),#000 98%,transparent 100%);
  transition:opacity .22s ease,-webkit-mask-image .5s cubic-bezier(.2,.72,.2,1),mask-image .5s cubic-bezier(.2,.72,.2,1);
}
.portada.lente-activa .speciale-lente-control{
  opacity:1;
  -webkit-mask-image:radial-gradient(circle clamp(105px,13vw,190px) at var(--lente-x) var(--lente-y),#000 97%,transparent 100%);
  mask-image:radial-gradient(circle clamp(105px,13vw,190px) at var(--lente-x) var(--lente-y),#000 97%,transparent 100%);
}
.speciale-lente-control:after{
  content:"LO QUE LO SOSTIENE";
  position:absolute;
  left:var(--lente-x);
  top:var(--lente-y);
  transform:translate(-50%,calc(clamp(105px,13vw,190px) - 28px));
  padding:7px 10px;
  color:#fff;
  background:#0a0a0a;
  font:600 9px/1 Arial,sans-serif;
  letter-spacing:.2em;
  white-space:nowrap;
}
.portada .portadaEditorialCentro{z-index:5!important}
.portada .portadaNombre{z-index:4!important}

@media (max-width:700px){
  .speciale-lente-control{bottom:48%;background-position:center}
  .portada.lente-activa .speciale-lente-control{
    -webkit-mask-image:radial-gradient(circle 92px at var(--lente-x) var(--lente-y),#000 97%,transparent 100%);
    mask-image:radial-gradient(circle 92px at var(--lente-x) var(--lente-y),#000 97%,transparent 100%);
  }
  .speciale-lente-control:after{transform:translate(-50%,70px)}
}

@media (prefers-reduced-motion:reduce){
  .speciale-lente-control{display:none!important}
}