/* Navegación por partes de la portada (la construye secciones.js).
   Ordenador: columna de puntitos fantasma a la derecha; el de la parte actual en rojo y
   alargado; al pasar el ratón sale el nombre. Móvil (≤900px): pastilla abajo con la parte
   actual y una barrita de progreso; al tocarla se abre la lista. Se esconde al bajar leyendo
   y vuelve al subir o al pararse. Por debajo del header (100) y del aviso de cookies (80). */

/* ---- Ordenador ---- */
.secc-puntos { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; }
.secc-puntos a { position: relative; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; }
.secc-puntos i { display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .28);
  transition: height .25s, background .25s, box-shadow .25s; }
.secc-puntos:hover i { background: rgba(255, 255, 255, .55); }
.secc-puntos a:hover i, .secc-puntos a:focus-visible i { background: #fff; }
.secc-puntos a[aria-current] i { height: 22px; background: var(--rojo); box-shadow: 0 0 14px rgba(220, 50, 40, .7); }
.secc-puntos a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.secc-etq { position: absolute; right: 34px; top: 50%; transform: translate(6px, -50%); white-space: nowrap;
  padding: 9px 12px; border-radius: 999px; background: rgba(10, 11, 13, .92); border: 1px solid var(--border-2);
  color: #fff; font: 600 13px/1 var(--font); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.secc-etq em, .secc-pastilla em, .secc-lista em { font-style: normal; }
.secc-etq em { color: var(--rojo-claro); margin-right: 6px; }
.secc-puntos a:hover .secc-etq, .secc-puntos a:focus-visible .secc-etq { opacity: 1; transform: translate(0, -50%); }

/* ---- Móvil ---- */
.secc-movil { display: none; }
.secc-fila { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none;
  opacity: 0; transform: translateY(20px); transition: opacity .25s, transform .25s; }
.secc-movil.is-visible .secc-fila { opacity: 1; transform: none; }
.secc-movil.is-visible .secc-fila > * { pointer-events: auto; }
.secc-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; flex: none;
  background: var(--rojo); color: #fff; font: 800 14px/1 var(--font); text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 28px -6px rgba(220, 50, 40, .85); }
.secc-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.secc-pastilla { position: relative; min-width: 0;
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(10, 11, 13, .94); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  font: 600 13px/1 var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px); }
.secc-nombre { overflow: hidden; text-overflow: ellipsis; }
.secc-pastilla em { color: var(--rojo-claro); }
.secc-pastilla:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.secc-barra { position: relative; width: 46px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.secc-barra b { position: absolute; inset: 0; background: var(--rojo); border-radius: 3px; transform-origin: left; transform: scaleX(0); }
.secc-pastilla svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .55); transition: transform .2s; }
.secc-pastilla[aria-expanded="true"] svg { transform: rotate(180deg); }
.secc-lista { position: fixed; left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: 420px; margin: 0 auto; max-height: calc(100vh - 170px); overflow-y: auto; display: grid; gap: 2px;
  padding: 8px; border-radius: 18px; background: rgba(10, 11, 13, .97); border: 1px solid var(--border-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.secc-lista[hidden] { display: none; }
.secc-lista a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: rgba(255, 255, 255, .78); font: 600 15px/1 var(--font); text-decoration: none; }
.secc-lista em { width: 22px; color: rgba(255, 255, 255, .35); }
.secc-lista a[aria-current] { background: rgba(220, 50, 40, .16); color: #fff; }
.secc-lista a[aria-current] em { color: var(--rojo-claro); }

@media (max-width: 900px) {
  .secc-puntos { display: none; }
  .secc-movil { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .secc-puntos i, .secc-etq, .secc-fila, .secc-pastilla svg { transition: none; }
}
@media print { .secc-puntos, .secc-movil { display: none !important; } }