/* Octubre Rosa PJRN — V6
   Desktop: PNG completo + revelado continuo por máscara.
   Mobile: composición propia para conservar origen y lazo.
*/
#pjrn-octubre-overlay{
  position:fixed; inset:0; z-index: 999999; pointer-events:none;
  overflow:hidden; opacity:0; transition:opacity .35s ease;
}
#pjrn-octubre-overlay.pjrn-activo{opacity:1}
#pjrn-octubre-overlay .pjrn-tinte{
  position:absolute; inset:0; background:rgba(170,20,78,.03);
  opacity:0; animation:pjrnTinte 10s ease forwards;
}
#pjrn-octubre-overlay .pjrn-ribbon-stage{
  position:absolute; overflow:visible; transform-origin:0 0;
}
#pjrn-octubre-overlay .pjrn-ribbon-svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 7px 8px rgba(50,0,18,.25));
}
#pjrn-octubre-overlay .pjrn-reveal-path{
  fill:none; stroke:#fff; stroke-width:235; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:pjrnFollowRibbon 5.1s cubic-bezier(.34,.02,.16,1) forwards;
}
/* Segunda máscara, levemente adelantada: evita huecos en curvas cerradas. */
#pjrn-octubre-overlay .pjrn-reveal-path.pjrn-wide{
  stroke-width:300; opacity:.72; animation-duration:5.25s;
}

/* El primer tramo queda detrás del logo para que parezca emerger de él. */
#pjrn-octubre-overlay .pjrn-logo-cover{
  position:absolute; z-index:2; pointer-events:none;
}

/* Imagen Octubre Rosa en reemplazo del mensaje */
#pjrn-octubre-overlay .pjrn-mensaje{
  position:absolute;
  z-index:4;
  left:50%;
  top:43%;
  bottom:auto;
  transform:translate(-50%,-44%);
  width:min(460px,calc(100vw - 60px));
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  opacity:0;
  animation:pjrnMensaje .65s 3.25s ease forwards;
}
#pjrn-octubre-overlay .pjrn-mensaje-img{
  display:block;
  width:100%;
  height:auto;
  max-height:72vh;
  object-fit:contain;
}

@keyframes pjrnFollowRibbon{to{stroke-dashoffset:0}}
@keyframes pjrnMensaje{to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes pjrnTinte{0%,100%{opacity:0}18%,80%{opacity:1}}

/* MOBILE: no se intenta meter toda la panorámica.
   Se amplía y recorta deliberadamente, conservando el lazo derecho. */
@media(max-width:767px){
  #pjrn-octubre-overlay .pjrn-reveal-path{stroke-width:350}
  #pjrn-octubre-overlay .pjrn-reveal-path.pjrn-wide{stroke-width:415}
  #pjrn-octubre-overlay .pjrn-mensaje{
    top:51%;
    width:min(280px,calc(100vw - 34px));
    transform:translate(-50%,-44%);
  }
  #pjrn-octubre-overlay .pjrn-mensaje-img{
    max-height:68vh;
  }
}
@media(prefers-reduced-motion:reduce){
  #pjrn-octubre-overlay .pjrn-reveal-path,
  #pjrn-octubre-overlay .pjrn-mensaje,
  #pjrn-octubre-overlay .pjrn-tinte{
    animation-duration:.01ms!important; animation-delay:0s!important;
  }
}
/* Imagen Octubre Rosa clickeable */
#pjrn-octubre-overlay .pjrn-mensaje{pointer-events:auto}
#pjrn-octubre-overlay .pjrn-mensaje-link{
  display:block; cursor:pointer; text-decoration:none !important;
}
#pjrn-octubre-overlay .pjrn-mensaje-link:focus-visible{
  outline:2px solid #fff; outline-offset:4px;
}

#pjrn-octubre-overlay .pjrn-mensaje-link{
    display:block;
    width:100%;
    height:100%;
    pointer-events:auto;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

#pjrn-octubre-overlay .pjrn-mensaje-img{
    pointer-events:none;
}

#pjrn-octubre-overlay .pjrn-mensaje-link{
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

#pjrn-octubre-overlay .pjrn-mensaje-img{
    pointer-events:none;
}