/* ─────── SCROLL METER · cinta horizontal · pegada al borde inferior del navbar ─────── */
/* Está siempre en su posición final · oculto con clip-path mientras estás en el hero */
/* Así nunca "pasa" por la zona del navbar · solo se revela en su sitio definitivo */
.scroll-meter {
  position: fixed;
  top: var(--nav-height, 70px);
  left: 0;
  right: 0;
  height: 22px;
  z-index: 100; /* por debajo del navbar (110), por encima del contenido */
  display: block;
  pointer-events: none;
  clip-path: inset(0 0 100% 0); /* recortado · invisible */
  transition: clip-path 0.5s var(--ease-out), top 0.4s var(--ease-out);
}
.scroll-meter.is-visible {
  clip-path: inset(0); /* totalmente visible */
}

.scroll-meter-tape {
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(4,114,6,0.4);
  border-bottom: 1px solid rgba(4,114,6,0.12);
  background-image:
    /* mm ticks verticales cada 8px desde arriba */
    linear-gradient(to right, rgba(4,114,6,0.28) 0, rgba(4,114,6,0.28) 1px, transparent 1px, transparent 8px),
    /* cm ticks largos cada 80px desde arriba */
    linear-gradient(to right, var(--verde) 0, var(--verde) 1px, transparent 1px, transparent 80px);
  background-size: 8px 6px, 80px 12px;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 0, 0 0;
  background-color: #ffffff;
}

/* Cursor · línea vertical verde · contenida dentro del meter (no sobresale) */
.scroll-meter-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--verde);
  left: 0;
  transition: left 0.12s linear, background 0.4s, box-shadow 0.4s;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.9);
}
/* Badge del % · integrado dentro de la cinta, a la derecha del cursor */
.scroll-meter-cursor::before {
  content: attr(data-pct) '%';
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-family: 'Alice', serif;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--verde);
  background: #ffffff;
  padding: 2px 7px;
  white-space: nowrap;
  border: 1px dashed rgba(4,114,6,0.3);
  line-height: 1;
}
/* Si el cursor pasa del 80%, el badge salta a la izquierda · evita que se salga */
.scroll-meter-cursor[data-pct="80"]::before,
.scroll-meter-cursor[data-pct="81"]::before,
.scroll-meter-cursor[data-pct="82"]::before,
.scroll-meter-cursor[data-pct="83"]::before,
.scroll-meter-cursor[data-pct="84"]::before,
.scroll-meter-cursor[data-pct="85"]::before,
.scroll-meter-cursor[data-pct="86"]::before,
.scroll-meter-cursor[data-pct="87"]::before,
.scroll-meter-cursor[data-pct="88"]::before,
.scroll-meter-cursor[data-pct="89"]::before,
.scroll-meter-cursor[data-pct="90"]::before,
.scroll-meter-cursor[data-pct="91"]::before,
.scroll-meter-cursor[data-pct="92"]::before,
.scroll-meter-cursor[data-pct="93"]::before,
.scroll-meter-cursor[data-pct="94"]::before,
.scroll-meter-cursor[data-pct="95"]::before,
.scroll-meter-cursor[data-pct="96"]::before,
.scroll-meter-cursor[data-pct="97"]::before,
.scroll-meter-cursor[data-pct="98"]::before,
.scroll-meter-cursor[data-pct="99"]::before,
.scroll-meter-cursor[data-pct="100"]::before {
  left: auto;
  right: 8px;
}