/* Etapas de tu rehabilitación (Servicios, versión sin agenda). Carrusel semiautomático; el script es fuentes/js/etapas.js. */

/* Sin JavaScript: todas las etapas, una debajo de otra, sin controles. */
.etapas-marco:not(.js) .etapa{grid-area:auto;opacity:1;visibility:visible;margin-bottom:34px}
.etapas-marco:not(.js) .etapa-img{animation:none}
.etapas-marco:not(.js) .etapa-controles,.etapas-marco:not(.js) .etapa-barra{display:none}

.etapas-marco.js .etapas-diapos{display:grid}
.etapa{grid-area:1/1;display:grid;justify-items:center;gap:14px;padding:4px 0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility .45s}
.etapa.activa{opacity:1;visibility:visible}
.etapa-figura{margin:0;width:min(74%,320px);aspect-ratio:1;display:grid;place-items:center}
.etapa-img{display:block;width:100%;height:100%;object-fit:contain}
/* Flotabilidad suave: solo sube y baja unos píxeles; la pose no cambia. */
.etapa.activa .etapa-img{animation:etapa-flota 5.2s ease-in-out infinite}
.etapas-marco.detenido .etapa-img{animation-play-state:paused}
@keyframes etapa-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.etapa-pend{display:grid;place-items:center;width:100%;height:100%;padding:24px;border-radius:var(--r);text-align:center;background:color-mix(in srgb,var(--texto-suave) 18%,transparent);color:var(--texto-suave);font-weight:700}
.etapa-texto{text-align:center}
.etapa-num{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.etapa h3{margin:4px 0 0;font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}

.etapa-controles{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.etapa-boton{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1.5px solid var(--negro);border-radius:12px;background:var(--blanco);color:var(--negro);cursor:pointer}
.etapa-boton svg{width:22px;height:22px}
.etapa-boton:hover{background:var(--tinte)}
.etapa-boton:focus-visible,.etapa-seg:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
/* Pausa: mano abierta mientras avanza, mano cerrada cuando está detenido (como en el inicio). */
.etapa-pausa .i-puno,.etapas-marco.detenido .etapa-pausa .i-palma{display:none}
.etapas-marco.detenido .etapa-pausa .i-puno{display:block}

/* Barra de progreso: segmentos juntos, sin espacios entre ellos. */
.etapa-barra{display:flex;list-style:none;max-width:560px;height:12px;margin:18px auto 0;padding:0;border:1.5px solid var(--negro);border-radius:999px;overflow:hidden}
.etapa-barra li{flex:1;min-width:0;margin:0}
.etapa-seg{display:block;position:relative;width:100%;height:100%;padding:0;border:0;border-radius:0;background:var(--tinte);overflow:hidden;cursor:pointer}
.etapa-barra li+li .etapa-seg{box-shadow:inset 1.5px 0 0 var(--negro)}
.etapa-seg i{position:absolute;inset:0;background:var(--azul);transform:scaleX(0);transform-origin:left center}
.etapa-seg[aria-current="step"]{background:var(--blanco)}

@media (min-width:720px){.etapa-figura{width:min(60%,340px)}}
@media (prefers-reduced-motion:reduce){
  .etapa{transition:none}
  .etapa.activa .etapa-img{animation:none}
}