.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: 366px;
      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) 43%, rgba(11,54,54,0.82) 100%);
    }

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

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

    .soulsTexto p {
      width: 100%;
      margin-top: 11px;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0;
      font-weight: 500;
      color: white;
    }

    @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: 214.5px;
        height: 290.7px;
      }

      .soulsTexto {
        padding: 0 25px 33px;
      }

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

      .soulsTexto p {
        margin-top: 6px;
        font-size: 11.71px;
        line-height: 12.88px;
      }
    }

    @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: 270px;
        height: 366px;
      }

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

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

      .soulsTexto p {
        margin-top: 8px;
        font-size: 16px;
        line-height: 19px;
      }
    }

    @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: 300px;
        height: 406px;
      }

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

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

      .soulsTexto p {
        margin-top: 8px;
        font-size: 16px;
        line-height: 21px;
      }
    }

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