/* Estilos para el encabezado */
#mdw-main-header {
  top: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#mdw-main-header.slide-up {
  transform: translateY(-100%);
}

#mdw-main-header.slide-down {
  transform: translateY(0);
}

#mdw-main-header.mdw__header_fixed {
  position: fixed;
}


/**
Estilos para el footer CTA
*/
#mdw-cta-footer {
  transition: all 0.5s ease-out;
  position: fixed;
  display: flex;
  bottom: -100%;
  z-index: 1000;
  height: 80px;
  width: 100%;
  background-color: white;
  
  &.show {
    bottom: 0;

    @media screen and (max-width: 1023px) {
      display: none ;
    }
  }
}

/* Estilos para la animación de párrafos */
.mdw-paragraph span {
  display: inline-block;
}

/* Grow Efect to image */
.mdw-grow-efect {
  figure {
    overflow: hidden;
  }
  img {
    scale: 1;
    transition: scale 0.3s ease-in-out;

    &:hover {
      scale: 1.1;
    }
  }
}

/* Estilos para la animación de párrafos */
.mdw-paragraph span {
  display: inline-block;
}

/* Animaciones waves */
.mdw__wave {
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0 -40px auto;
    margin-bottom: -1px;
    z-index: 1;
    height: 21px;
    background-color: transparent;
    background-position: 0 bottom;
    background-size: 114px 22px;
    background-repeat: repeat-x;
  }

  &.mdw__wave_blue::after {
    background-image: url("../img/wave-blue.svg");
  }

  &.mdw__wave_lightgreen::after {
    background-image: url("../img/wave-light-green.svg");
  }

  &.mdw__wave_inv::after {
    transform: scaleY(-1);
  }

  &.mdw__wave_bottom::after {
    top: calc(100% - 21px);
  }

  &.mdw__wave_lr::after {
    animation: lr 2.5s linear infinite both;
  }

  &.mdw__wave_rl::after {
    animation: rl 2.5s linear infinite both;
  }
}

.mdw__wave_before {
  &::before {
    content: "" !important;
    display: block;
    position: absolute;
    inset: 0 -40px auto;
    margin-bottom: -1px;
    z-index: 1;
    height: 21px !important;
    background-color: transparent;
    background-position: 0 bottom;
    background-size: 114px 22px;
    background-repeat: repeat-x;
  }

  &.mdw__wave_blue-before::before {
    background-image: url("../img/wave-blue.svg");
  }
  
  &.mdw__wave_lightgreen-before::before {
    background-image: url("../img/wave-light-green.svg");
  }

  &.mdw__wave_inv-before::before {
    transform: scaleY(-1);
  }

  &.mdw__wave_lr-before::before {
    animation: lr 2.5s linear infinite both;
  }

  &.mdw__wave_rl-before::before {
    animation: rl 2.5s linear infinite both;
  }
}

@keyframes lr {
    0% {
        background-position: 0 bottom
    }

    to {
        background-position: 114px bottom
    }
}

@keyframes rl {
    0% {
      background-position: 114px bottom
    }
    
    to {
      background-position: 0 bottom
    }
}

/* =========================
   Wave Text Animation
   ========================= */

.wavy {
  position: relative;
  animation: wavy-desktop 3s ease infinite;
}

/* Desktop */
@keyframes wavy-desktop {
  0% {
    top: 0;
  }
  50% {
    top: -35px;
  }
  100% {
    top: 0;
  }
}

/* =========================
   Tablet
   ========================= */

@media screen and (max-width: 1023px) {
  .wavy {
    animation-name: wavy-tablet;
  }
}

@keyframes wavy-tablet {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}

/* =========================
   Mobile
   ========================= */

@media screen and (max-width: 766px) {
  .wavy {
    animation-name: wavy-mobile;
  }
}

@keyframes wavy-mobile {
  0% {
    top: 0;
  }
  50% {
    top: -12px;
  }
  100% {
    top: 0;
  }
}

.card-item {
  transition: none !important;
}