/* Web ANLOK 2026 · progreso-llave.css — la llave que baja por la derecha según el scroll (progreso-llave.js). */
.pl{position:fixed;z-index:45;right:14px;top:calc(var(--cabecera, 64px) + 20px);bottom:28px;width:24px;pointer-events:none;
  opacity:.9;transition:opacity .3s ease}
.pl--corta{display:none}
.pl__pista{position:absolute;left:50%;top:0;bottom:30px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(108,99,255,.18);overflow:hidden}
.pl__relleno{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,#8C85FF,#6C63FF 70%,#FAAA2F);transform-origin:50% 0;transform:scaleY(0)}
.pl__llave{position:absolute;left:50%;top:0;width:18px;height:auto;aspect-ratio:115 / 240;overflow:visible;fill:#6C63FF;
  filter:drop-shadow(0 2px 6px rgba(108,99,255,.55));transform-origin:50% 50%;will-change:transform}
.pl__cerradura{position:absolute;left:50%;bottom:0;width:24px;height:24px;margin-left:-12px;display:grid;place-items:center;border-radius:50%;
  background:#16161B;box-shadow:inset 0 0 0 1.5px rgba(140,133,255,.45);transition:background-color .35s ease,box-shadow .35s ease}
.pl__cerradura svg{width:16px;height:16px;fill:rgba(140,133,255,.75);transition:fill .35s ease}
.pl--fin .pl__cerradura{background:#FAAA2F;box-shadow:0 0 0 4px rgba(250,170,47,.22),0 0 18px rgba(250,170,47,.7)}
.pl--fin .pl__cerradura svg{fill:#16161B}
:root.menu-abierto .pl{opacity:0}
/* sobre secciones lila: llave en ámbar y la línea en blanco suave (regla de la marca: fondo lila → llave amarilla) */
.pl__llave{transition:fill .25s ease,filter .25s ease}
.pl--sobre-lila .pl__llave{fill:#FAAA2F;filter:drop-shadow(0 2px 6px rgba(26,20,80,.45))}
.pl--sobre-lila .pl__pista{background:rgba(255,255,255,.28)}

/* en el móvil no va: en pequeño quedaba mal (Xuban, 27/10/2026) */
@media (max-width:759px){.pl{display:none}}
@media (prefers-reduced-motion:reduce){.pl,.pl__cerradura,.pl__cerradura svg{transition:none}}
@media print{.pl{display:none}}