@media (min-width:1025px){

  :root{
    --fx-dur: 1.15s;
    --fx-ease: cubic-bezier(.22,.61,.36,1);
    --fx-up: 26px;
  }

  .fx{
    opacity: 1;
    transform: none;
    will-change: opacity, transform;
    transition: opacity var(--fx-dur) var(--fx-ease),
                transform var(--fx-dur) var(--fx-ease);
  }

  .fx-start{
    opacity: 0;
    transform: translate3d(0,var(--fx-up),0);
  }

  #block-views-block-herramientas-block-1.fx-start{
    transform: none;
  }

  .fx.inview{
    opacity: 1;
    transform: none;
  }

  .fx[data-stg="1"]{ transition-delay: .10s }
  .fx[data-stg="2"]{ transition-delay: .20s }
  .fx[data-stg="3"]{ transition-delay: .30s }
  .fx[data-stg="4"]{ transition-delay: .40s }
  .fx[data-stg="5"]{ transition-delay: .50s }
  .fx[data-stg="6"]{ transition-delay: .60s }
  .fx[data-stg="7"]{ transition-delay: .70s }

  @media (max-width: 767px){
    :root{ --fx-dur: .95s; --fx-up: 22px; }
  }

  @media (prefers-reduced-motion: reduce){
    .fx, .fx.inview, .fx-start{
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }



/* Animación de elementos de slides home */
.view-herramientas{
  --sl-fade-dur: 340ms;
  --sl-overlap: .5;
  --sl-ease: cubic-bezier(.2,.7,.33,1);
  --sl-left-shift: 18px;
  --sl-image-total: calc(var(--sl-fade-dur) * (3 - (2 * var(--sl-overlap))));
}

.view-herramientas .sl-anim{
  opacity: 0; visibility: hidden;
  transform: translate3d(calc(var(--sl-left-shift) * -1),0,0);
  will-change: opacity, transform;
}

.view-herramientas .sl-media-img{ transform: none; }

.view-herramientas .views-row:not(.is-active) .sl-anim{
  opacity: 0 !important; visibility: hidden !important; animation: none !important;
}

.view-herramientas .views-row.is-active .sl-title{
  visibility: visible;
  animation: slFadeInLeft var(--sl-fade-dur) var(--sl-ease) both;
  animation-delay: 0ms;
}
.view-herramientas .views-row.is-active .sl-desc{
  visibility: visible;
  animation: slFadeInLeft var(--sl-fade-dur) var(--sl-ease) both;
  animation-delay: calc(var(--sl-fade-dur) * (1 - var(--sl-overlap)));
}
.view-herramientas .views-row.is-active .sl-cta{
  visibility: visible;
  animation: slFadeInLeft var(--sl-fade-dur) var(--sl-ease) both;
  animation-delay: calc(var(--sl-fade-dur) * (2 * (1 - var(--sl-overlap))));
}

.view-herramientas .views-row.is-active .sl-media-img{
  visibility: visible;
  animation: slFadeIn var(--sl-image-total) var(--sl-ease) both;
}

@keyframes slFadeInLeft{
  from{ opacity:0; transform: translate3d(calc(var(--sl-left-shift) * -1),0,0); }
  to  { opacity:1; transform: translate3d(0,0,0); }
}
@keyframes slFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .view-herramientas .sl-anim{
    animation:none !important; opacity:1 !important; transform:none !important; visibility:visible !important;
  }
}




}