/* Indicador del retén de scroll (assets/js/reten.js): círculo con flechita (el .galeria__chevron de la
   galería), "Seguí scrolleando" y una línea dorada que se llena con --avance. */
.reten {
  position: fixed; left: 50%; z-index: 60;
  display: grid; gap: 0.55rem; justify-items: center; opacity: 0; pointer-events: none;
  transform: translate(-50%, 8px); transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
  font-family: var(--font-support); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250, 247, 240, 0.9);
  /* píldora como la del hero: se lee sobre el blanco de una llama igual que sobre negro */
  padding: 0.6rem 1.1rem 0.7rem; border-radius: 999px;
  background: rgba(13, 13, 13, 0.62); border: 1px solid rgba(212, 175, 55, 0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.reten--arriba { top: 5.4rem; transform: translate(-50%, -8px); } /* bajo la píldora del hero: abajo choca con el titular */
.reten--abajo { bottom: 2.4rem; }
.reten--bajo-nav { top: calc(var(--nav-h) + 1.3rem); transform: translate(-50%, -8px); }
.reten.es-visible { opacity: 1; transform: translate(-50%, 0); }
.reten__fila { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.reten i { display: block; width: 100%; height: 1px; background: rgba(250, 247, 240, 0.25); position: relative; }
.reten i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--avance, 0) * 100%); background: var(--dorado); }