.souls {
      display: flex;
      width: 100%;
      justify-content: center;
      background-color: #F8FBFB;
      padding: 89px 0 0;
      overflow: hidden;
      position: relative;
    }

    .soulsContainer {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 90px;
    }

    .soulsTop {
      display: flex;
      width: 100%;
      align-self: center;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
      padding: 0 104px 0 110px;
    }

    .soulsTitle {
      font-size: 39.5px;
      line-height: 43px;
      letter-spacing: -2.37px;
      font-weight: 800;
      color: #0B3636;
    }

    .soulsTitle span,
    .soulsTitleDesktop span,
    .soulsTitleResponsive span {
      color: #39C197;
    }

    .soulsTitleDesktop {
      display: inline;
    }

    .soulsTitleResponsive {
      display: none;
    }

    .soulsControls {
      display: flex;
      align-items: center;
      gap: 21px;
      padding-top: 26px;
    }

    .soulsArrow {
      display: flex;
      width: 64px;
      height: 64px;
      padding: 0;
      border: none;
      background-color: transparent;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.25s ease;
    }

    .soulsArrow img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      object-position: center;
    }

    .soulsArrow:hover {
      transform: translateY(-2px);
    }

    .soulsCarrusel {
      display: flex;
      width: 100%;
      position: relative;
      padding-bottom: 80px;
    }

    .soulsFondo {
      display: flex;
      width: 100%;
      height: 406px;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
      background-color: #59A691;
    }

    .soulsViewport {
      display: flex;
      width: 100%;
      overflow: hidden;
      position: relative;
      z-index: 2;
      touch-action: pan-y;
    }

    .soulsTrack {
      display: flex;
      width: max-content;
      gap: 9px;
      padding-left: 0;
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }

    .soulsCard {
      display: flex;
      width: 597px;
      height: 496px;
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      align-items: flex-end;
    }

    .soulsImagen {
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .soulsImagen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .soulsOverlay {
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: linear-gradient(180deg, rgba(11,54,54,0.0) 43%, rgba(11,54,54,0.82) 100%);
      mix-blend-mode: normal;
      transition: background 0.32s ease, mix-blend-mode 0.32s ease;
    }

    .soulsTexto {
      display: flex;
      width: 100%;
      position: relative;
      z-index: 3;
      flex-direction: column;
      padding: 0 42px 57px;
      color: white;
      transition: padding 0.32s ease, transform 0.32s ease;
    }

    .soulsTexto h3 {
      font-size: 28px;
      line-height: 30.31px;
      letter-spacing: -0.56px;
      font-weight: 700;
      color: white;
    }

    .soulsDescripcion {
      width: 100%;
      max-width: 560px;
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      font-size: 18px;
      line-height: 29px;
      letter-spacing: 0;
      font-weight: 500;
      color: white;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.32s ease, transform 0.32s ease, max-height 0.32s ease, margin 0.32s ease;
    }

    .soulsBoton {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      gap: 11px;
      max-height: 0;
      margin-top: 0;
      padding-bottom: 0;
      overflow: hidden;
      border-bottom: 0 solid #39C197;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      line-height: 20px;
      font-weight: 800;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.32s ease, transform 0.32s ease, max-height 0.32s ease, margin 0.32s ease, padding 0.32s ease, border-width 0.32s ease;
    }

    .soulsBoton img {
      display: block;
      width: 14px;
      height: auto;
      flex-shrink: 0;
    }

    .soulsCard:hover .soulsOverlay,
    .soulsCard:focus-within .soulsOverlay {
      background: rgba(11, 54, 54, 0.6);
      mix-blend-mode: multiply;
    }

    .soulsCard:hover .soulsTexto,
    .soulsCard:focus-within .soulsTexto {
      height: 100%;
      justify-content: center;
      padding: 0 60px;
      transform: translateY(0);
    }

    .soulsCard:hover .soulsDescripcion,
    .soulsCard:focus-within .soulsDescripcion {
      max-height: 120px;
      margin-top: 18px;
      opacity: 1;
      transform: translateY(0);
    }

    .soulsCard:hover .soulsBoton,
    .soulsCard:focus-within .soulsBoton {
      max-height: 40px;
      margin-top: 20px;
      padding-bottom: 9px;
      border-bottom-width: 2px;
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1200px) {
      .souls {
        padding-top: 52px;
      }

      .soulsContainer {
        gap: 53px;
      }

      .soulsTop {
        padding: 0 61px 0 65px;
      }

      .soulsTitle {
        font-size: 23.14px;
        line-height: 25.18px;
        letter-spacing: -1.39px;
      }

      .soulsControls {
        gap: 12px;
        padding-top: 15px;
      }

      .soulsArrow,
      .soulsArrow img {
        width: 37.5px;
        height: 37.5px;
      }

      .soulsCarrusel {
        padding-bottom: 134px;
      }

      .soulsFondo {
        height: 238px;
      }

      .soulsTrack {
        gap: 5px;
      }

      .soulsCard {
        width: 70vw;
        max-width: 520px;
        min-width: 300px;
        height: 70vh;
        min-height: 520px;
      }


      
      .soulsCard:hover .soulsOverlay,
      .soulsCard:focus-within .soulsOverlay {
        background: linear-gradient(180deg, rgba(11,54,54,0) 43%, rgba(11,54,54,0.82) 100%);
        mix-blend-mode: normal;
      }
      
      .soulsOverlay {
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: linear-gradient(180deg, rgba(11,54,54,0.2) 0%, rgba(11,54,54,0.82) 100%);
      mix-blend-mode: normal;
      transition: background 0.32s ease, mix-blend-mode 0.32s ease;
    }
      .soulsTexto {
        padding: 0 25px 30px;
      }

      .soulsTexto h3 {
        font-size: 16.4px;
        line-height: 17.76px;
        letter-spacing: -0.33px;
      }

      .soulsDescripcion {
        max-height: none;
        margin-top: 8px;
        font-size: 11.71px;
        line-height: 15.5px;
        opacity: 1;
        transform: none;
      }

      .soulsBoton {
        gap: 8px;
        max-height: none;
        margin-top: 13px;
        padding-bottom: 6px;
        border-bottom-width: 2px;
        font-size: 11.71px;
        line-height: 15px;
        opacity: 1;
        transform: none;
      }

      .soulsBoton img {
        width: 10px;
      }

      .soulsCard:hover .soulsTexto,
      .soulsCard:focus-within .soulsTexto {
        height: auto;
        justify-content: flex-start;
        padding: 0 25px 30px;
      }

      .soulsCard:hover .soulsDescripcion,
      .soulsCard:focus-within .soulsDescripcion {
        max-height: none;
        margin-top: 8px;
      }

      .soulsCard:hover .soulsBoton,
      .soulsCard:focus-within .soulsBoton {
        max-height: none;
        margin-top: 13px;
        padding-bottom: 6px;
      }
    }

    @media (max-width: 700px) {
      .souls {
        padding-top: 62px;
      }

      .soulsContainer {
        gap: 42px;
      }

      .soulsTop {
        padding: 0 25px;
        align-items: flex-end;
        gap: 24px;
      }

      .soulsTitle {
        width: 245px;
        flex-shrink: 0;
        font-size: 31px;
        line-height: 34px;
        letter-spacing: -1.86px;
      }

      .soulsTitleDesktop {
        display: none;
      }

      .soulsTitleResponsive {
        display: inline;
      }

      .soulsControls {
        gap: 10px;
        padding-top: 0;
      }

      .soulsArrow,
      .soulsArrow img {
        width: 40px;
        height: 40px;
      }

      .soulsCarrusel {
        padding-bottom: 120px;
      }

      .soulsFondo {
        height: 330px;
      }

      .soulsTrack {
        gap: 9px;
        padding-left: 25px;
        padding-right: 25px;
      }

      .soulsCard {
        width: 70vw;
        max-width: 380px;
        min-width: 270px;
        height: 70vh;
        min-height: 500px;
      }

      .soulsTexto {
        padding: 0 28px 34px;
      }

      .soulsTexto h3 {
        font-size: 22px;
        line-height: 25px;
        letter-spacing: -0.44px;
      }

      .soulsDescripcion {
        max-height: none;
        margin-top: 10px;
        font-size: 16px;
        line-height: 23px;
        opacity: 1;
        transform: none;
      }

      .soulsBoton {
        max-height: none;
        margin-top: 16px;
        padding-bottom: 7px;
        border-bottom-width: 2px;
        font-size: 14px;
        line-height: 19px;
        opacity: 1;
        transform: none;
      }

      .soulsCard:hover .soulsTexto,
      .soulsCard:focus-within .soulsTexto {
        height: auto;
        justify-content: flex-start;
        padding: 0 28px 34px;
      }

      .soulsCard:hover .soulsDescripcion,
      .soulsCard:focus-within .soulsDescripcion {
        margin-top: 10px;
      }

      .soulsCard:hover .soulsBoton,
      .soulsCard:focus-within .soulsBoton {
        margin-top: 16px;
      }
    }

    @media (max-width: 760px) {
      .soulsTitle {
        width: 245px;
        flex-shrink: 0;
        font-size: 31px;
        line-height: 34px;
        letter-spacing: -1.86px;
      }

      .soulsTitleDesktop {
        display: none;
      }

      .soulsTitleResponsive {
        display: inline;
      }
    }

    @media (max-width: 1200px) and (min-width: 701px) {
      .souls {
        padding-top: 84px;
      }

      .soulsContainer {
        gap: 58px;
      }

      .soulsTop {
        padding: 0 54px;
      }

      .soulsTitle {
        font-size: 38px;
        line-height: 42px;
        letter-spacing: -1.8px;
      }

      .soulsControls {
        gap: 16px;
        padding-top: 0;
      }

      .soulsArrow,
      .soulsArrow img {
        width: 52px;
        height: 52px;
      }

      .soulsCarrusel {
        padding-bottom: 118px;
      }

      .soulsFondo {
        height: 335px;
      }

      .soulsTrack {
        gap: 12px;
        padding-left: 54px;
        padding-right: 54px;
      }

      .soulsCard {
        width: 70vw;
        max-width: 560px;
        min-width: 420px;
        height: 70vh;
        min-height: 560px;
      }

      .soulsTexto {
        padding: 0 32px 36px;
      }

      .soulsTexto h3 {
        font-size: 23px;
        line-height: 26px;
        letter-spacing: -0.4px;
      }

      .soulsDescripcion {
        max-height: none;
        margin-top: 10px;
        font-size: 16px;
        line-height: 21px;
        opacity: 1;
        transform: none;
      }

      .soulsBoton {
        max-height: none;
        margin-top: 16px;
        padding-bottom: 7px;
        border-bottom-width: 2px;
        font-size: 14px;
        line-height: 18px;
        opacity: 1;
        transform: none;
      }

      .soulsCard:hover .soulsTexto,
      .soulsCard:focus-within .soulsTexto {
        height: auto;
        justify-content: flex-start;
        padding: 0 32px 36px;
      }

      .soulsCard:hover .soulsDescripcion,
      .soulsCard:focus-within .soulsDescripcion {
        margin-top: 10px;
      }

      .soulsCard:hover .soulsBoton,
      .soulsCard:focus-within .soulsBoton {
        margin-top: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .soulsArrow {
        transition: none;
      }

      .soulsOverlay,
      .soulsTexto,
      .soulsDescripcion,
      .soulsBoton {
        transition: none;
      }
    }