/* ===== Metodología: apertura y cierre suaves ===== */

/* Base: oculto pero medible */
.caja-pasos .caja-txt{
  display: block !important; /* por si había reglas antiguas con display:none */
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    height .40s ease,
    opacity .35s ease,
    transform .35s ease;
  will-change: height, opacity, transform;
}

/* Apertura: cuando está abierto, mostramos */
.caja-pasos.is-open .caja-txt{
  opacity: 1;
  transform: translateY(0);
}

/* Cierre suave: durante el cierre, forzamos la transición de opacidad/transform */
.caja-pasos.is-closing .caja-txt{
  opacity: 0;
  transform: translateY(-4px);
}

/* Botón ver más/menos con flecha */
a.ver-mas{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
}
a.ver-mas .ico{
  display:inline-block; transition: transform .25s ease;
}
.caja-pasos.is-open a.ver-mas .ico{
  transform: rotate(180deg);
}

/* Accesibilidad */
a.ver-mas:focus-visible{
  outline:2px solid currentColor; outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .caja-pasos .caja-txt, a.ver-mas .ico{ transition: none !important; }
}