/* 🧭 El índice de las guías firmadas (guía de estilo, «Índice del artículo»). Sólo variables del sitio: vale en claro y oscuro.
   Por defecto, cerrado (móvil, táctil y lo que no cabe). Con ratón y hueco al lado de la columna, va abierto junto a la foto y al
   bajar se convierte en una línea con puntos y números. El corte de 1120 px está medido: ahí sobran 25 px hasta el borde. */
.ind,.ind *{box-sizing:border-box}
.ind{--ind-bg:var(--fondo);--ind-curva:cubic-bezier(.5,0,.15,1)}
.ind ol{list-style:none;margin:0;padding:0}
.ind a{color:inherit;text-decoration:none}
.ind a:focus-visible,.ind button:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
article h2[id]{scroll-margin-top:calc(var(--cab,68px) + 68px)}
article h2[tabindex="-1"]:focus{outline:none}

/* La línea y sus puntos: los dos estados son el mismo dibujo, por eso la transformación no da saltos. */
.ind-lista li{position:relative;--f:0;overflow:hidden}
.ind-lista li::before,.ind-lista li::after{content:"";position:absolute;left:5px;top:0;width:2px}
.ind-lista li::before{bottom:0;background:var(--borde)}
.ind-lista li::after{height:calc(var(--f) * 100%);background:var(--acento);transition:height .2s linear}
.ind-lista li.pasado{--f:1}
.ind-lista a{position:relative;z-index:1;display:flex;align-items:baseline;gap:9px;padding:6px 8px 6px 18px;font-size:13.5px;line-height:1.3;color:var(--tinta-suave);border-radius:8px}
.ind-punto{position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--ind-bg);border:2px solid color-mix(in srgb,var(--tinta-tenue) 60%,var(--borde));transition:background .25s,border-color .25s,transform .35s var(--ind-curva),box-shadow .35s}
.ind-n{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:-.02em;color:var(--tinta-tenue);transition:color .2s}
.ind-t{flex:1;min-width:0}
.ind-lista a:hover{color:var(--tinta)}
.ind-lista a:hover .ind-n{color:var(--acento-texto)}
.ind-lista a:hover .ind-punto{border-color:var(--acento)}
.ind-lista .pasado .ind-punto{background:var(--acento);border-color:var(--acento)}
.ind-lista a[aria-current]{color:var(--acento-texto);font-weight:600}
.ind-lista a[aria-current] .ind-n{color:var(--acento-texto);font-weight:700}
.ind-lista a[aria-current] .ind-punto{background:var(--acento);border-color:var(--acento);transform:scale(1.25);box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 22%,transparent);animation:ind-late .5s var(--ind-curva)}
@keyframes ind-late{0%{transform:scale(.6)}55%{transform:scale(1.55)}100%{transform:scale(1.25)}}

/* ── Cerrado: móvil, táctil y lo que no cabe al lado ───────────────────────── */
.ind-rail{position:sticky;top:calc(var(--cab,68px) + 8px);z-index:15;margin:18px 0 0}
.ind{position:relative;border:1px solid var(--borde);border-radius:13px;background:color-mix(in srgb,var(--panel) 97%,transparent);backdrop-filter:blur(10px);box-shadow:var(--sombra);--ind-bg:var(--panel)}
.ind-boton{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 14px;border:0;border-radius:13px;background:none;color:var(--tinta);font:600 14px var(--texto);cursor:pointer;text-align:left}
.ind-cuenta{flex:none;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--acento-texto)}
.ind-cuenta:empty{display:none}
.ind-actual{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ind-boton svg{flex:none;transition:transform .2s}
.ind-boton[aria-expanded=true] svg{transform:rotate(180deg)}
.ind-pelo{position:absolute;left:14px;right:14px;bottom:0;height:2px;overflow:hidden}
.ind-pelo i{display:block;height:100%;width:0;background:var(--acento)}
.ind-cab{display:none}
.ind-lista{display:none;position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);padding:8px 8px 8px 14px;background:var(--panel);border:1px solid var(--borde);border-radius:13px;box-shadow:var(--sombra);max-height:calc(100dvh - var(--cab,68px) - 72px);overflow-y:auto;overscroll-behavior:contain}
.ind-lista.abierta{display:block}
.ind-lista a{padding:10px 8px 10px 20px;font-size:15px;color:var(--tinta)}
.ind-lista a .ind-punto{top:15px}
.ind-lista .ind-n{font-size:12px;color:var(--tinta-suave)}

/* ── Al lado de la foto: con ratón y con hueco ─────────────────────────────── */
@media (min-width:1120px) and (hover:hover) and (pointer:fine){
  article h2[id]{scroll-margin-top:calc(var(--cab,68px) + 18px)}
  .ind-rail{top:var(--cab,68px);height:0;z-index:5;margin:0}
  .ind{position:absolute;z-index:0;left:calc(100% + 40px);top:18px;width:236px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;--ind-bg:var(--fondo);transition:width .52s var(--ind-curva) .06s}
  .ind-boton,.ind-pelo{display:none}
  /* Un fondo que sólo se ve al reabrir desde la línea. Invisible, también ensancha la zona que reacciona al ratón. */
  .ind::before{content:"";position:absolute;z-index:-1;inset:-12px -14px -12px -12px;border:1px solid var(--borde);border-radius:14px;background:var(--panel);box-shadow:var(--sombra);opacity:0;transition:opacity .22s}
  .ind.flotando{--ind-bg:var(--panel)}
  .ind.flotando::before{opacity:1}
  .ind-cab{display:grid;grid-template-rows:1fr;transition:grid-template-rows .52s var(--ind-curva),opacity .22s}
  .ind-cab p{margin:0;min-height:0;overflow:hidden;padding:0 0 10px 7px;font-family:var(--titulos);font-size:15px;font-weight:700;color:var(--tinta);white-space:nowrap}
  .ind-lista,.ind-lista.abierta{display:block;position:static;padding:0;background:none;border:0;border-radius:0;box-shadow:none;max-height:calc(100vh - var(--cab,68px) - 64px);overflow:hidden auto;scrollbar-width:none}
  .ind-lista li{height:var(--alto,auto);transition:height .52s var(--ind-curva)}
  .ind-lista a{width:236px;padding:6px 8px 6px 18px;font-size:13.5px;color:var(--tinta-suave)}
  .ind-lista a .ind-punto{top:11px;transition:top .52s var(--ind-curva),background .25s,border-color .25s,transform .35s var(--ind-curva),box-shadow .35s}
  .ind-lista .ind-n{font-size:11px;color:var(--tinta-tenue)}
  .ind-t{flex:none;width:176px;transition:opacity .26s calc(var(--i,0) * 16ms),transform .4s var(--ind-curva) calc(var(--i,0) * 16ms)}

  /* La línea fina: los títulos se van en cascada y todo se estrecha a la vez. */
  .ind.en-linea{width:52px}
  .ind.en-linea .ind-cab{grid-template-rows:0fr;opacity:0}
  .ind.en-linea li{height:25px}
  .ind.en-linea a{padding-top:4px;padding-bottom:4px}
  .ind.en-linea .ind-punto{top:8px}
  .ind.en-linea .ind-t{opacity:0;transform:translateX(-10px);pointer-events:none}
  /* Reabrir desde la línea va más rápido que recogerse: quien pasa el ratón quiere leer ya. */
  .ind.flotando{transition-duration:.28s;transition-delay:0s}
  .ind.flotando .ind-cab,.ind.flotando li,.ind.flotando .ind-punto{transition-duration:.28s}
  .ind.flotando .ind-t{transition-duration:.2s,.28s;transition-delay:calc(var(--i,0) * 7ms)}
  .ind.sin-anim,.ind.sin-anim *,.ind.sin-anim::before{transition:none!important;animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  .ind,.ind *,.ind::before,.ind *::before,.ind *::after{transition:none!important;animation:none!important}
}
@media print{.ind-rail{display:none}}