
/* RehabMe — Orientator Flow */

.hm4-evaluator .hm4-evaluator-panel{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:35px;
}

.rm-flow{
  min-width:0;
  width:100%;
  color:#fff;
}

.rm-flow-phase,
.rm-flow-transition{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.13em;
  color:#36d8c8;
  margin-bottom:14px;
}

.rm-flow-transition{
  margin-top:20px;
  color:#c0d9ff;
}

.rm-flow-phase-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  background:currentColor;
}

.rm-flow-list{
  display:grid;
  gap:9px;
  list-style:none;
  padding:0;
  margin:0;
}

.rm-flow-step{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:13px 15px;
  border:1px solid rgba(54,216,200,.24);
  border-radius:12px;
  background:rgba(17,103,132,.28);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .25s,box-shadow .25s;
}

.rm-flow-step::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    90deg,
    rgba(54,216,200,.19),
    rgba(54,216,200,.035)
  );
  transform:scaleX(0);
  transform-origin:left;
}

.rm-flow-clinic{
  border-color:rgba(192,217,255,.27);
  background:rgba(78,120,178,.20);
}

.rm-flow-clinic::before{
  background:linear-gradient(
    90deg,
    rgba(130,171,235,.26),
    rgba(130,171,235,.04)
  );
}

.rm-flow-number{
  flex:0 0 auto;
  font-size:1.35rem;
  font-weight:850;
  color:#36d8c8;
  font-variant-numeric:tabular-nums;
}

.rm-flow-clinic .rm-flow-number{
  color:#bfd9ff;
}

.rm-flow-content{
  display:grid;
  gap:3px;
  min-width:0;
}

.rm-flow-content strong{
  color:#fff;
  font-size:.86rem;
  line-height:1.3;
}

.rm-flow-content span{
  color:rgba(255,255,255,.68);
  font-size:.73rem;
  line-height:1.4;
}

.hm4-evaluator .rm-flow-footer{
  margin:17px 0 0;
  color:rgba(255,255,255,.79);
  font-size:.76rem;
  line-height:1.55;
}

.rm-flow-step:hover{
  border-color:rgba(54,216,200,.7);
  box-shadow:0 0 20px rgba(54,216,200,.09);
}

/* Animation only after JavaScript enables it */

.rm-flow.is-ready.is-playing .rm-flow-step{
  animation:rm-flow-enter .55s ease-out both;
  animation-delay:calc(var(--step) * 1.12s);
}

.rm-flow.is-ready.is-playing .rm-flow-step::before{
  animation:rm-flow-fill .75s ease-out both;
  animation-delay:calc(var(--step) * 1.12s + .25s);
}

.rm-flow.is-ready.is-playing .rm-flow-transition{
  animation:rm-flow-phase-in .55s ease-out both;
  animation-delay:3.35s;
}

@keyframes rm-flow-enter{
  from{opacity:.35;transform:translateX(-18px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes rm-flow-fill{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@keyframes rm-flow-phase-in{
  from{opacity:.35;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1050px){
  .hm4-evaluator .hm4-evaluator-panel{
    grid-template-columns:1fr;
  }

  .rm-flow{
    max-width:700px;
    margin-inline:auto;
  }
}

@media(max-width:700px){
  .hm4-evaluator .hm4-evaluator-panel{
    gap:28px;
  }

  .rm-flow-step{
    padding:12px;
    gap:10px;
  }

  .rm-flow-content strong{
    font-size:.82rem;
  }

  .rm-flow-content span{
    font-size:.72rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .rm-flow *,
  .rm-flow *::before{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }

  .rm-flow-step::before{
    transform:scaleX(1);
  }
}


/* REHABME ORIENTATOR DESKTOP V2 */

/* Disposición general */

.hm4-evaluator .hm4-evaluator-panel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:26px;
  min-height:0;
}

.hm4-evaluator .hm4-evaluator-copy{
  max-width:100%;
}

.hm4-evaluator .hm4-evaluator-copy h2{
  max-width:850px;
  font-size:clamp(2.4rem,3.5vw,3.6rem);
  line-height:1.08;
}

.hm4-evaluator .hm4-evaluator-copy h2 strong{
  display:inline;
}

.hm4-evaluator .hm4-evaluator-copy p{
  max-width:850px;
  margin-bottom:13px;
}

.hm4-evaluator .hm4-evaluator-copy small{
  max-width:850px;
}

/* Cinco bloques horizontales */

@media(min-width:1051px){

  .hm4-evaluator .hm4-evaluator-panel{
    gap:30px;
    padding:45px;
  }

  .hm4-evaluator .rm-flow{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    column-gap:0;
    row-gap:13px;
    width:100%;
    max-width:none;
    margin:0;
  }

  .hm4-evaluator .rm-flow-phase{
    grid-column:1 / 4;
    grid-row:1;
    margin:0 0 3px;
  }

  .hm4-evaluator .rm-flow-transition{
    grid-column:4 / 6;
    grid-row:1;
    margin:0 0 3px;
  }

  .hm4-evaluator .rm-flow-list{
    display:contents;
  }

  .hm4-evaluator .rm-flow-step{
    grid-row:2;
    grid-column:calc(var(--step) + 1);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:19px;
    min-width:0;
    min-height:220px;
    padding:23px 15px;
    border-radius:0;
    border-right:0;
    background:rgba(16,117,143,.34);
  }

  .hm4-evaluator .rm-flow-step:first-child{
    border-radius:15px 0 0 15px;
  }

  .hm4-evaluator .rm-flow-step[style*="--step:4"]{
    border-radius:0 15px 15px 0;
    border-right:1px solid rgba(192,217,255,.27);
  }

  .hm4-evaluator .rm-flow-clinic{
    background:rgba(54,104,158,.38);
  }

  .hm4-evaluator .rm-flow-number{
    font-size:clamp(2.3rem,3.2vw,3.6rem);
    line-height:1;
    letter-spacing:-.06em;
  }

  .hm4-evaluator .rm-flow-content{
    gap:9px;
  }

  .hm4-evaluator .rm-flow-content strong{
    font-size:clamp(.75rem,.95vw,.93rem);
    line-height:1.3;
  }

  .hm4-evaluator .rm-flow-content span{
    font-size:clamp(.68rem,.79vw,.8rem);
    line-height:1.5;
  }

  .hm4-evaluator .rm-flow-footer{
    grid-column:1 / -1;
    grid-row:3;
    margin:8px 0 0;
  }
}

/* CTA posterior al recorrido */

.hm4-evaluator .rm-flow-main-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  gap:12px;
  padding:14px 22px;
  border-radius:9px;
  background:var(--h4-teal,#36d8c8);
  color:#062a40;
  font-weight:850;
  text-decoration:none;
  transition:transform .2s,background .2s;
}

.hm4-evaluator .rm-flow-main-cta:hover{
  transform:translateY(-2px);
  background:#5be5d8;
}

.hm4-evaluator .rm-flow-main-cta:focus-visible{
  outline:3px solid #fff;
  outline-offset:4px;
}

/* Tablet y móvil conservan secuencia vertical */

@media(max-width:1050px){

  .hm4-evaluator .hm4-evaluator-panel{
    display:flex;
    flex-direction:column;
    gap:25px;
  }

  .hm4-evaluator .rm-flow{
    display:block;
    width:100%;
    max-width:700px;
  }

  .hm4-evaluator .rm-flow-list{
    display:grid;
  }

  .hm4-evaluator .rm-flow-transition{
    margin-top:20px;
  }

  .hm4-evaluator .rm-flow-main-cta{
    align-self:flex-start;
  }
}

@media(max-width:700px){

  .hm4-evaluator .hm4-evaluator-panel{
    padding:30px 23px;
    gap:24px;
  }

  .hm4-evaluator .hm4-evaluator-copy h2{
    font-size:clamp(2.4rem,10vw,3.4rem);
  }

  .hm4-evaluator .rm-flow-main-cta{
    width:100%;
    text-align:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .hm4-evaluator .rm-flow-main-cta{
    transition:none;
  }

  .hm4-evaluator .rm-flow-main-cta:hover{
    transform:none;
  }
}


/* REHABME MOBILE SPACING FIX */

@media (max-width:700px){

  .hm4-services{
    padding-bottom:24px;
  }

  .hm4-evaluator{
    padding-top:24px;
  }

}
