/*
 * Menú de etapas (barra lateral fija con el recorrido).
 * Estructura en Elementor (clases globales):
 *   .etapas-menu            contenedor fijo
 *     img                   ilustración del recorrido (img/menu-etapas.png)
 *     a.etapa-punto  x6     un enlace por círculo (#experiencia, #recorridos, ...)
 *       .etapa-nombre       nombre que aparece al pasar el ratón
 * El JS (js/menu-etapas.js) añade .activa al punto de la sección visible.
 * Posiciones de los círculos medidas sobre la imagen de 228x578 px.
 */
.etapas-menu{position:fixed!important;left:36px;top:50%;transform:translateY(-50%);width:104px!important;max-width:none!important;margin:0!important;padding:0!important;z-index:40;filter:drop-shadow(0 4px 8px rgba(25,27,25,.12))}
.etapas-menu > img{display:block;width:100%!important;height:auto!important}
.etapas-menu > .etapa-punto{position:absolute!important;left:46.05%;width:24px!important;height:24px;min-width:0!important;margin:0!important;padding:0!important;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}
.etapas-menu > .etapa-punto:nth-child(2){top:14.36%}
.etapas-menu > .etapa-punto:nth-child(3){top:27.85%}
.etapas-menu > .etapa-punto:nth-child(4){top:41.70%}
.etapas-menu > .etapa-punto:nth-child(5){top:55.19%}
.etapas-menu > .etapa-punto:nth-child(6){top:68.69%}
.etapas-menu > .etapa-punto:nth-child(7){top:82.18%}
/* El punto amarillo */
.etapas-menu > .etapa-punto::before{content:''!important;position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:13px!important;height:13px!important;margin:-6.5px 0 0 -6.5px!important;border-radius:50%;background:#F5BD53;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.etapas-menu > .etapa-punto:hover::before,.etapas-menu > .etapa-punto:focus-visible::before{transform:scale(.55)}
.etapas-menu > .etapa-punto.activa::before{transform:scale(1)}
.etapas-menu > .etapa-punto:focus-visible{outline:2px solid #165632;outline-offset:2px}
/* Nombre de la etapa (aparece a la derecha de la barra) */
.etapas-menu .etapa-nombre{position:absolute!important;left:60px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;padding:5px 10px!important;border-radius:6px;background:#165632;color:#FFFDF5!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.etapas-menu > .etapa-punto:hover .etapa-nombre,.etapas-menu > .etapa-punto:focus-visible .etapa-nombre{opacity:1;transform:translate(0,-50%)}
/* Solo en escritorio */
@media (max-width:1024px){.etapas-menu{display:none!important}}