/* ==========================================================================
   bl-ribbon — Índice fijo en cinta
   blomon-base · vanilla, sin dependencias

   Los títulos van CORRIDOS, como un párrafo, separados por una barra, y
   envuelven de línea solos. A la izquierda, un rótulo pequeño ("Índice")
   alineado con la primera línea.

   Hereda el color del contenedor con currentColor y juega con opacidades, así
   funciona igual sobre fondo claro que sobre oscuro sin variante de tema. Si
   el contenedor de Elementor no tiene color de texto definido, la cinta queda
   invisible: es lo primero que hay que mirar si "no se ve".

   AJUSTES — todos en el bloque .bl-ribbon de aquí abajo:
     --bl-ribbon-size     tamaño de los títulos
     --bl-ribbon-sangria  hueco que deja a la izquierda para el rótulo
     --bl-ribbon-dim      opacidad de los apartados en reposo
     --bl-ribbon-sep-dim  opacidad de las barras separadoras
   ========================================================================== */

.bl-ribbon {
  --bl-ribbon-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bl-ribbon-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  --bl-ribbon-leading: 1.28;

  /* Hueco de la primera línea para que quepa el rótulo. En porcentaje para
     que acompañe al ancho del contenedor; si tu rótulo es más largo que
     "Índice", súbelo. */
  --bl-ribbon-sangria: 28%;

  --bl-ribbon-dim: 0.38;        /* apartados en reposo */
  --bl-ribbon-sep-dim: 0.28;    /* barras separadoras */

  --bl-ribbon-rotulo-size: 0.72rem;
  --bl-ribbon-rotulo-track: 0.16em;

  position: relative;
  display: block;
  color: inherit;
}

/* --- Rótulo de la izquierda ("Índice") -------------------------------------
   Va absoluto y no en el flujo: así no empuja al texto ni cambia de sitio
   cuando la cinta gana o pierde líneas. El hueco lo abre la sangría de la
   primera línea de la lista. */

.bl-ribbon__title {
  position: absolute;
  left: 0;
  /* Centrado con la primera línea de los títulos, sea cual sea su tamaño. */
  top: calc(var(--bl-ribbon-size) * var(--bl-ribbon-leading) / 2);
  transform: translateY(-50%);
  margin: 0;
  max-width: calc(var(--bl-ribbon-sangria) - 1.5rem);
  font-size: var(--bl-ribbon-rotulo-size);
  font-weight: 500;
  letter-spacing: var(--bl-ribbon-rotulo-track);
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.75;
}

/* --- La cinta -------------------------------------------------------------
   Nada de flex ni grid: es texto corrido de verdad, que es lo único que
   envuelve de línea partiendo por donde toca y deja las barras al final de
   línea como en la referencia. */

.bl-ribbon__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: var(--bl-ribbon-sangria);
  font-size: var(--bl-ribbon-size);
  line-height: var(--bl-ribbon-leading);
  /* Un pelo de tracking negativo: a tamaño grande, el texto corrido pide
     juntarse un poco. */
  letter-spacing: -0.015em;
}

.bl-ribbon--sin-rotulo .bl-ribbon__list {
  text-indent: 0;
}

.bl-ribbon__item {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Barra separadora: entre apartados, nunca al final. Va en CSS y no en el
   HTML para que no se seleccione ni se copie con los títulos. */
.bl-ribbon__item + .bl-ribbon__item::before {
  content: var(--bl-ribbon-sep, "/");
  margin: 0 0.3em;
  opacity: var(--bl-ribbon-sep-dim);
}

/* Neutraliza los estilos de enlace del tema (Astra/Elementor): color propio,
   subrayado y :visited. Se cubren las tres formas de subrayar que usan los
   temas (text-decoration, border-bottom y box-shadow) y va con !important
   porque sus selectores (.entry-content a, .elementor a...) ganan por
   especificidad: si no, los apartados salen azules y subrayados. */
.bl-ribbon .bl-ribbon__link,
.bl-ribbon .bl-ribbon__link:link,
.bl-ribbon .bl-ribbon__link:visited,
.bl-ribbon .bl-ribbon__link:hover,
.bl-ribbon .bl-ribbon__link:focus,
.bl-ribbon .bl-ribbon__link:active {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.bl-ribbon__link {
  font: inherit;
  cursor: pointer;
  opacity: var(--bl-ribbon-dim);
  transition: opacity 0.3s var(--bl-ribbon-ease);
}

/* Al pasar por encima se oscurece: sube a color pleno. */
.bl-ribbon__link:hover,
.bl-ribbon__link:focus-visible {
  opacity: 1;
}

/* La sección en pantalla, destacada igual que el hover. */
.bl-ribbon__item.is-active .bl-ribbon__link {
  opacity: 1;
}

.bl-ribbon :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- Entrada escalonada, una sola vez al montarse ------------------------- */

.bl-ribbon__item {
  opacity: 0;
}

.bl-ribbon.is-ready .bl-ribbon__item {
  opacity: 1;
  transition: opacity 0.5s var(--bl-ribbon-ease);
  transition-delay: calc(var(--bl-ribbon-i, 0) * 50ms);
}

/* --- Anclaje opcional: data-ribbon-sticky="120" --------------------------- */

.bl-ribbon--sticky {
  position: sticky;
  top: var(--bl-ribbon-top, 120px);
}

/* --- Pantallas estrechas --------------------------------------------------
   Aquí la cinta SÍ se ve (a diferencia de bl-index, que se oculta): el texto
   corrido se adapta solo. Lo que no cabe es el rótulo a la izquierda, así que
   se pone encima y se quita la sangría.
   Para ocultarla en móvil como bl-index, añade en el CSS del tema:
     @media (max-width: 767px) { .bl-ribbon { display: none; } }  */

@media (max-width: 767px) {
  .bl-ribbon {
    --bl-ribbon-sangria: 0%;
  }

  .bl-ribbon__title {
    position: static;
    transform: none;
    max-width: none;
    margin-bottom: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-ribbon__item,
  .bl-ribbon__link {
    transition-duration: 0.01ms !important;
  }

  .bl-ribbon__item {
    opacity: 1;
  }
}