/* ═══════════════════════════════════════════════

   dot-nav — navegación lateral por puntos

   --dot-nav-active: color del punto activo (por sección)

   Hit target 44×44 (WCAG 2.5.5 / práctica del sitio)

   ═══════════════════════════════════════════════ */



.dot-nav {

  position: fixed;

  top: 50%;

  right: var(--grid-margin);

  transform: translateY(-50%);

  z-index: 20;

  pointer-events: none;

}



.dot-nav__list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0;

  pointer-events: auto;

}



.dot-nav__link {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  min-width: 44px;

  min-height: 44px;

  width: 44px;

  height: 44px;

  text-decoration: none;

  border-radius: 50%;

}



.dot-nav__link:focus {

  outline: none;

}



.dot-nav__link:focus-visible {

  outline: 2px solid var(--grey-70);

  outline-offset: 2px;

}



.dot-nav__dot {

  display: block;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--grey-30);

  transition: transform 0.2s ease, background 0.2s ease;

  pointer-events: none;

}



.dot-nav__link:hover .dot-nav__dot,

.dot-nav__link:focus-visible .dot-nav__dot {

  transform: scale(1.25);

  background: var(--grey-50);

}



.dot-nav__link.is-active .dot-nav__dot {

  background: var(--dot-nav-active, var(--color-ciclos));

  transform: scale(1.35);

}



/* TH (1024–1279): sin tooltip persistente del ítem activo (solapa contenido) */

@media (min-width: 1024px) and (max-width: 1279px) {

  .dot-nav__link.is-active .tooltip {

    opacity: 0 !important;

    visibility: hidden !important;

  }

}



/* Desktop 1280+: tooltip del activo siempre visible, estilo sección */

@media (min-width: 1280px) {

  .dot-nav__link.is-active .tooltip {

    opacity: 1;

    visibility: visible;

    background: var(--dot-nav-active, var(--color-ciclos));

    color: var(--black);

  }



  .dot-nav__link.is-active .tooltip--left::after {

    border-left-color: var(--dot-nav-active, var(--color-ciclos));

  }

}



@media (max-width: 1023px) {

  .dot-nav {

    display: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  .dot-nav__dot {

    transition: none;

  }

}