/* Estilos globais */
:root {
  --font-santander-headline-light: 'SantanderHeadline-Light', sans-serif;
  --font-santander-headline: 'SantanderHeadline', sans-serif;
  --font-santander-regular: 'SantanderTextRegular', sans-serif;
  --font-santander-microtext: 'SantanderMicroText', sans-serif;
  --font-santander-microtext-light: 'SantanderMicroText-Light', sans-serif;

  --color-gray-light: #cccccc;
  --color-gray: #999999;
  --color-black-darker: #181818;

  --color-medium-black: #222222;
  --color-gray-medium: #343030;
  --color-gray-medium-black: #424242;
  --color-gray-medium-lighter-3: #727272;
  --color-gray-medium-lighter-4: #ddd;
  --color-blue-ligher: #deedf2;
  --color-effect-shadow: rgba(163, 163, 163, 0.4);
  --color-red-light: #ec0000;
  --color-red-hover: #d10000;
  --color-green-lighter: #dce8e4;
  --color-primary-link-green: #127277;
  --color-green-hover: #849b94;
  --color-green: #add5c3;
  --color-brown: #cec5bb;

  --spacing-2: 0.125rem;
  --spacing-2-64: 0.165rem;
  --spacing-4: 0.25rem;
  --spacing-5: 0.3125rem;
  --spacing-6: 0.375rem;
  --spacing-7: 0.437rem;
  --spacing-8: 0.5rem;
  --spacing-9: 0.5625rem;
  --spacing-10: 0.625rem;
  --spacing-11: 0.6875rem;
  --spacing-12: 0.75rem;
  --spacing-12-8: 0.8rem;
  --spacing-14: 0.875rem;
  --spacing-15: 0.937rem;
  --spacing-17: 1.0625rem;
  --spacing-18: 1.125rem;
  --spacing-19: 1.1875rem;
  --spacing-20: 1.25rem;
  --spacing-22: 1.375rem;
  --spacing-25: 1.5625rem;
  --spacing-26: 1.625rem;
  --spacing-29: 1.8125rem;
  --spacing-32: 2rem;
  --spacing-34: 2.125rem;
  --spacing-48: 3rem;
  --spacing-53: 3.3125rem;
  --spacing-60: 3.75rem;
  --spacing-62: 3.875rem;
  --spacing-64: 4rem;
  --spacing-72: 4.5rem;
  --spacing-74: 4.625rem;
  --spacing-96: 6rem;
  --spacing-117: 7.3125rem;
  --spacing-120: 7.5rem;
  --spacing-132: 8.25rem;
  --font-size-6: 0.3125rem;
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-700: 700;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --border-radius-4: 4px;
  --border-radius-6: 6px;
  --border-radius-8: 8px;
  --border-radius-50: 50%;
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-21: 21px;
  --line-height-22: 22px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-35: 35px;
  --line-height-42: 42px;
}

/* Fontes personalizadas */
@font-face {
  font-family: 'SantanderHeadline-Light';
  /* src:
    local('SantanderHeadline-Light'),
    url('../../../../assets/fonts/SantanderHeadlineW05-Light.woff2')
      format('woff2'); */
  src:
    local('SantanderHeadline-Light'),
    url('/sites/WPC_Banco/assets/fonts/fontes_woff2/SantanderHeadlineW05-Light.woff2')
      format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SantanderHeadline';
  src:
    local('SantanderHeadline'),
    url('/sites/WPC_Banco/assets/fonts/fontes_woff2/SantanderHeadlineW05-Rg.woff2')
      format('woff2');
  /* src:
    local('SantanderHeadline'),
    url('../../../../assets/fonts/SantanderHeadlineW05-Rg.woff2')
      format('woff2'); */
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SantanderMicroText';
  src:
    local('SantanderMicroText'),
    url('/sites/WPC_Banco/assets/fonts/fontes_woff2/SantanderMicroTextW05-Rg.woff2')
      format('woff2');
  /* src:
    local('SantanderMicroText'),
    url('../../../../assets/fonts/SantanderMicroTextW05-Rg.woff2')
      format('woff2'); */
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SantanderMicroText-Light';
  src:
    local('SantanderMicroText-Light'),
    url('/sites/WPC_Banco/assets/fonts/fontes_woff2/SantanderMicroTextW05-Light.woff2')
      format('woff2');
  /* src:
    local('SantanderMicroText-Light'),
    url('../../../../assets/fonts/SantanderMicroTextW05-Light.woff2')
      format('woff2'); */
  font-weight: var(--font-weight-300);
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SantanderTextRegular';
  src:
    local('SantanderText-Regular'),
    url('/sites/WPC_Banco/assets/fonts/fontes_woff2/SantanderTextW05-Regular.woff2')
      format('woff');
  /* src:
    local('SantanderTextRegular'),
    url('../../../../assets/fonts/SantanderTextW05-Regular.woff2')
      format('woff2'); */
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wrapper {
  padding: 0 var(--spacing-64);

  @media (max-width: 768px) {
    padding: 0 var(--spacing-16);
  }
}

.section-gap {
  margin-bottom: var(--spacing-80);

  @media (max-width: 768px) {
    margin-bottom: var(--spacing-40);
  }
}

/* Swiper estilization */
.swiper-pagination-bullet {
  opacity: 1;
  background-color: var(--color-gray);
  --swiper-pagination-bullet-width: 10px;
  --swiper-pagination-bullet-height: 10px;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-red);
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-red-hover);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  max-width: fit-content;
  position: relative;
  background-color: var(--color-blue-ligher);
  border-radius: var(--border-radius-8);
  padding: var(--spacing-2);
  margin: var(--spacing-24) auto;
  gap: var(--spacing-8);
}

.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-horizontal {
  .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0;
  }
}

.primary-link {
  color: var(--color-primary-link-green);
  font-size: var(--font-size-14);
  font-family: var(--font-santander-headline);
  font-weight: var(--font-weight-700);
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  display: inline-flex;
  padding: var(--spacing-8) var(--spacing-0);
  line-height: 20px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &.private-spaces-link {
    display: inline;
  }
}

.primary-button {
  background-color: var(--color-red);
  color: var(--color-white);
  font-size: var(--font-size-16);
  font-family: var(--font-santander-headline);
  font-weight: var(--font-weight-700);
  cursor: pointer;
  width: fit-content;
  padding: var(--spacing-8) var(--spacing-16);
  border: none;
  border-radius: var(--border-radius-4);
  line-height: var(--line-height-24);

  &:hover {
    background-color: var(--color-red-light);
  }
}

.title-section,
.subtitle-section {
  color: var(--color-medium-black);
  font-family: var(--font-santander-headline);
}

.title-section {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-42);
  margin-bottom: var(--spacing-24);

  @media (max-width: 768px) {
    font-size: var(--font-size-20);
    line-height: var(--line-height-35);
  }
}

.subtitle-section {
  font-size: var(--font-size-18);
  margin-top: var(--spacing-16);
  font-weight: var(--font-weight-400);
  line-height: normal;
  margin-bottom: var(--spacing-24);

  @media (max-width: 768px) {
    margin-top: var(--spacing-8);
    font-size: var(--font-size-14);
  }
}

.overlay {
  display: none;

  &.active {
    display: block;
    z-index: var(--z-index-40);
    background-color: var(--color-black);
    opacity: 0.9;
    height: 100vh;
    width: 100%;
    position: fixed;
  }
}

santander-footer {
  --footer-bg-color: var(--color-green-lighter);
  --footer-text-color: var(--color-medium-black);
  --footer-divider-color: var(--color-medium-black);
  --footer-divider-background: var(--color-medium-black);
  --footer-social-icon-filter: brightness(0);
}

/* Solutions Section Styles */
.global-solutions-section {
  display: flex;
  flex-direction: column;

  & .global-solutions-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    width: 100%;

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
    }

    & .global-solutions-cards {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-16);
      width: 100%;
      position: relative;
      overflow: hidden;

      @media (min-width: 768px) {
        overflow: visible;
      }

      & .global-solutions-cards-wrapper {
        display: flex;
        width: 100%;

        @media (min-width: 768px) {
          gap: var(--spacing-16);
        }

        & .global-solution-card {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--color-gray-light);
          border-radius: var(--border-radius-8);
          padding: var(--spacing-16);
          width: 100%;
          min-height: 288px;
          box-shadow: 0px 1px 6px rgba(163, 163, 163, 0.4);
          gap: var(--spacing-16);
          transition: box-shadow 0.3s ease;
          flex-shrink: 0;
          box-sizing: border-box;

          @media (min-width: 768px) {
            width: 185px;
            max-width: none;
          }

          &:hover {
            box-shadow: 0px 4px 12px rgba(163, 163, 163, 0.6);
          }

          & .card-icon {
            width: 24px;
            height: 24px;

            & img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          & .card-text {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-8);

            & h3,
            p {
              font-family: var(--font-santander-microtext);
              font-size: var(--font-size-12);
              color: var(--color-medium-black);
              line-height: var(--line-height-16);
            }

            & h3 {
              font-weight: var(--font-weight-700);
            }

            & p {
              font-weight: var(--font-weight-400);
            }
          }
        }
      }
    }

    /* Map Section */
    & .global-solutions-map-container {
      @media (max-width: 768px) {
        margin-left: -1rem;
        margin-right: -1rem;
        overflow: hidden;
      }

      & .map-wrapper {
        position: relative;
        width: 100%;
        height: auto;

        & img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
      }
    }
  }
}

.designed-solutions-section {
  padding: var(--spacing-80) 0;
  background-color: #dde8e4;

  @media (max-width: 1024px) {
    padding: var(--spacing-40) 0;
  }

  & .designed-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-24);
    align-items: start;

    @media (max-width: 1024px) {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-8);
    }
  }

  & .designed-solution-item {
    background-color: #add5c3;
    border-radius: var(--border-radius-4);
    width: 100%;
    transition: background-color 0.3s ease;

    &:hover,
    &:focus {
      background-color: var(--color-green-hover);
    }

    &[open] {
      background-color: #add5c3;

      &:hover,
      &:focus {
        background-color: var(--color-green-hover);
      }

      & .summary-arrow {
        background-image: url('https://www.santander.com.br/sites/WPC_Banco/assets/images/lp-private-banking/drp-icon.svg');
      }
    }
  }

  & .designed-solution-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-16);
    cursor: pointer;
    list-style: none;
    min-height: 64px;
    box-sizing: border-box;

    &::-webkit-details-marker {
      display: none;
    }

    & .summary-content {
      display: flex;
      align-items: center;
      gap: var(--spacing-8);
      width: 100%;
    }

    & .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      flex-shrink: 0;

      &.icon-bg {
        background-color: #dde8e4;
        border-radius: 4px;
        padding: 4px;
        box-sizing: border-box;
      }
    }

    & .summary-title {
      font-family: var(--font-santander-microtext);
      font-weight: 700;
      font-size: var(--font-size-12);
      line-height: normal;
      color: var(--color-medium-black);
    }

    & .summary-arrow {
      width: 10px;
      height: 10px;
      background-image: url('https://www.santander.com.br/sites/WPC_Banco/assets/images/lp-private-banking/drp-icon.svg');
      background-size: contain;
      background-repeat: no-repeat;
      flex-shrink: 0;
      margin-left: var(--spacing-8);
    }
  }

  & .designed-solution-content {
    padding: 0 var(--spacing-16) var(--spacing-16) var(--spacing-16);
    border-top: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-18);

    @media (min-width: 768px) {
      min-height: 120px;
    }

    & p {
      font-family: var(--font-santander-microtext);
      font-weight: 400;
      font-size: var(--font-size-12);
      line-height: normal;
      color: var(--color-medium-black);
    }

    & a {
      color: var(--color-primary-link-green);
      font-family: var(--font-santander-microtext);
      font-size: var(--font-size-14);
      font-weight: var(--font-weight-700);
      line-height: var(--line-height-20);
      text-decoration: none;
    }
  }
}

/* Customer Services Section */
.customer-services-section {
  & .customer-services-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    padding: 0;
    overflow: hidden;

    @media (min-width: 768px) {
      padding: 0 var(--spacing-132);
      overflow: visible;
    }

    & .title-section {
      padding: 0 var(--spacing-16);

      @media (min-width: 768px) {
        padding: 0;
      }
    }
  }

  & .customer-services-cards {
    width: 100%;
    position: relative;
    overflow: hidden;

    & .customer-services-cards-wrapper {
      display: flex;
    }

    & .spacer-slide {
      display: none;
      visibility: hidden;
      pointer-events: none;
      border: none;
      background: transparent;
      box-shadow: none;
      min-height: 0;

      @media (min-width: 768px) {
        display: block;
      }
    }

    & .customer-services-card {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-8);
      padding: var(--spacing-16);
      border-bottom: 1px solid var(--color-gray-light);
      background-color: var(--color-white);
      box-sizing: border-box;
      height: auto;
      min-height: 105px;
      width: 85%;
      margin-right: var(--spacing-16);

      @media (min-width: 768px) {
        width: auto;
        margin-right: 0;
        box-shadow: none;
        height: 100%;
      }

      @media (min-width: 1024px) and (max-width: 1279px) {
        min-height: 137px;
      }

      & h3,
      p {
        font-family: var(--font-santander-microtext);
        font-size: var(--font-size-12);
        color: var(--color-medium-black);
        line-height: var(--line-height-16);
      }

      & h3 {
        font-weight: 700;
      }

      & p {
        font-weight: 400;
      }
    }
  }
}

/* Banking Section */
.banking-section {
  background-color: var(--color-brown);
  & .banking-section-container {
    & h2 {
      font-size: var(--font-size-22);

      @media (min-width: 768px) {
        padding: var(--spacing-20) 0 var(--spacing-20) 0;
        font-size: var(--font-size-32);
      }
    }
  }
}

/* Credit Cards Section */
.credit-cards-section {
  & .credit-cards-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-24);
    font-family: var(--font-santander-headline);

    & .credit-cards-item-container {
      width: 100%;

      & .credit-cards-item-wrapper {
        display: flex;
        justify-content: space-between;

        @media (min-width: 768px) {
          gap: var(--spacing-16);
        }

        & .credit-cards-item {
          padding: 0;
          border-radius: 8px;
          border: none;
          background-color: transparent;
          width: 100%;

          &.flipped .inner-cards {
            transform: rotateY(180deg);
          }

          & .inner-cards {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 325px;
            text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            border-radius: 8px;

            & .credit-cards-item-primary-content,
            & .credit-cards-item-extra-content {
              top: 0;
              left: 0;
              width: 100%;
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              border-radius: 8px;
              background-color: #fff;
              border: 1px solid var(--color-gray-light);
              padding: var(--spacing-7);
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;

              @media (min-width: 768px) {
                min-height: auto;
              }
            }

            & .credit-cards-item-primary-content {
              position: relative;
              height: 100%;
              min-height: 325px;
              z-index: 2;
              transform: rotateY(0deg);
              justify-content: space-between;

              & img {
                width: 100%;
                max-height: 180px;
                object-fit: contain;
                margin-bottom: var(--spacing-24);
              }

              & .credit-cards-item-content {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin-bottom: auto;

                & p:first-child {
                  color: var(--color-gray-medium-black);
                  font-family: var(--font-santander-headline);
                  font-size: var(--font-size-18);
                  font-weight: var(--font-weight-700);
                }

                & p:last-child {
                  color: var(--color-gray-medium-black);
                  font-size: var(--font-size-16);
                  font-weight: var(--font-weight-300);
                  font-family: var(--font-santander-headline-light);
                }

                & .card-title {
                  color: #424242;
                  text-align: center;
                  font-family: var(--font-santander-headline);
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: 21px;
                }

                & hr {
                  border: 0;
                  border-top: 1px solid var(--color-gray-medium-black);
                  width: 100%;
                  max-width: 140px;
                  margin: var(--spacing-8) 0;
                }

                & .card-description {
                  color: #424242;
                  text-align: center;
                  font-family: var(--font-santander-headline);
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 300;
                  line-height: 21px;
                  margin-bottom: var(--spacing-8);
                }
              }

              & .credit-cards-item-button {
                margin-top: var(--spacing-10);

                & .button-view-more {
                  font-size: var(--font-size-14);
                  border: none;
                  background-color: transparent;
                  cursor: pointer;
                  font-family: var(--font-santander-headline);
                }
              }
            }

            & .credit-cards-item-extra-content {
              transform: rotateY(180deg);
              z-index: 1;
              justify-content: center;

              position: absolute;
              height: 100%;
              & .card-back {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: var(--spacing-16);
                width: 100%;
                height: 100%;
                overflow: visible;

                & .card-back-container {
                  text-align: left;
                  flex: 1;

                  & .card-back-title {
                    color: var(--color-gray-medium-black);
                    text-align: center;
                    font-family: var(--font-santander-headline);
                    font-size: var(--font-size-18);
                    font-style: normal;
                    font-weight: var(--font-weight-700);
                  }

                  & p {
                    font-size: var(--font-size-14);
                    margin-bottom: var(--spacing-8);
                    line-height: 20px;
                    font-weight: 700;
                  }

                  & hr {
                    max-width: 145px;
                    color: var(--color-gray-medium-black);
                  }

                  & ul {
                    display: flex;
                    flex-direction: column;
                    gap: var(--spacing-8);
                    padding-left: 16px;

                    & li {
                      font-size: var(--font-size-12);
                      font-family: var(--font-santander-microtext);
                      color: var(--color-gray-medium-black);

                      & span {
                        font-weight: 700;
                        display: block;
                      }
                    }
                  }
                }

                & .see-less-container {
                  align-self: center;
                  flex-shrink: 0;
                  position: relative;
                  bottom: 0;

                  & .button-see-less {
                    font-size: var(--font-size-14);
                    border: none;
                    background-color: transparent;
                    cursor: pointer;
                    font-family: var(--font-santander-headline);
                    justify-content: center;
                  }

                  & a {
                    color: var(--color-red-light);
                    font-family: var(--font-santander-microtext);
                    font-size: var(--font-size-14);
                    font-weight: var(--font-weight-700);
                    line-height: var(--line-height-20);
                    text-decoration: none;

                    &:hover {
                      color: var(--color-red-hover);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    & .credit-cards-disclaimer {
      font-family: var(--font-santander-headline-light);
      font-weight: var(--font-weight-300);
      font-size: var(--font-size-16);
      color: var(--color-gray-medium-black);
      line-height: 21px;
    }

    & .credit-cards-swiper-pagination-container {
      & .credit-cards-swiper-pagination {
        & .swiper-pagination-bullet {
          margin: 0;
        }
      }
    }
  }
}

/* International Services Section & Tabs */
.international-services-section {
  background-color: var(--color-green-lighter);
  padding: var(--spacing-40) 0;

  @media (min-width: 768px) {
    height: 432px;
    display: flex;
    align-items: center;
  }

  & .tabs-component {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);

    @media (min-width: 768px) {
      flex-direction: row;
      align-items: stretch;
      gap: var(--spacing-24);

      &:has(.tab-panel.active .tab-content-inner:nth-child(4)) {
        align-items: center;
      }
    }

    & .title-section-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--spacing-24);
      min-width: 0;

      @media (min-width: 768px) {
        flex: 1.5;
        gap: var(--spacing-56);
      }

      & .subtitle-section,
      & .title-section {
        margin-bottom: auto;
      }

      & .tabs-buttons {
        display: flex;
        justify-content: space-between;
        background-color: var(--color-white);
        padding: var(--spacing-4);
        border-radius: var(--border-radius-4);
        gap: var(--spacing-8);

        & .tab-button {
          background: transparent;
          border: none;
          font-family: var(--font-santander-headline);
          font-size: var(--font-size-16);
          font-weight: var(--font-weight-700);
          color: var(--color-primary-link-green);
          cursor: pointer;
          transition: color 0.3s ease;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          border-radius: var(--border-radius-4);
          white-space: nowrap;
          min-height: 48px;

          &:hover,
          &:focus {
            color: var(--color-red);
          }

          &.active {
            color: var(--color-white);
            background-color: var(--color-red-light);
          }

          &:focus-visible {
            outline: 2px solid var(--color-red);
            outline-offset: 4px;
          }
        }
      }
    }

    & .tabs-content-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;

      @media (min-width: 768px) {
        flex: 2;
      }

      & .tab-panel {
        opacity: 0;
        transition:
          opacity 0.4s ease-in-out,
          transform 0.4s ease-in-out;
        display: none;

        &.active {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-16);
          opacity: 1;
          flex: 1;

          @media (min-width: 768px) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
          }

          &:has(.tab-content-inner:nth-child(4)) {
            @media (min-width: 768px) {
              grid-template-columns: repeat(2, 1fr);
            }
          }
        }

        &[hidden] {
          display: none;
        }

        & .tab-content-inner {
          background-color: var(--color-green);
          padding: var(--spacing-16);
          border-radius: var(--border-radius-4);
          display: flex;
          flex-direction: column;
          gap: var(--spacing-8);
          min-height: 120px;

          @media (min-width: 768px) {
            min-height: auto;
          }

          & h3 {
            font-weight: var(--font-weight-700);
          }

          & p {
            font-weight: var(--font-weight-400);
          }

          & h3,
          & p {
            color: var(--color-medium-black);
            font-family: var(--font-santander-microtext);
            font-size: var(--font-size-12);
            line-height: normal;
          }
        }
      }
    }
  }
}

/* Your Needs Section */
.your-needs-section {
  background-color: var(--color-green);
  padding: var(--spacing-40) 0;

  @media (min-width: 768px) {
    padding: var(--spacing-80) 0;
  }

  & .your-needs-container {
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
      flex-direction: row;
      gap: var(--spacing-24);
      justify-content: center;
      align-items: center;
    }

    .image-container {
      display: none;

      @media (min-width: 768px) {
        display: block;

        & img {
          width: 560px;
          max-width: 560px;
          height: auto;
          min-height: 362px;
          object-fit: cover;
          border-radius: var(--border-radius-4);
        }
      }
    }

    & .title-section {
      white-space: nowrap;
    }
    @media (max-width: 1024px) {
      & .title-section {
        white-space: normal;
      }
    }

    & .your-needs-list-container {
      & ul {
        list-style: none;
        padding-left: var(--spacing-0);

        & li {
          margin-bottom: var(--spacing-24);
          position: relative;
          padding-left: 48px;
          display: flex;
          align-items: center;
          font-family: var(--font-santander-microtext);
          font-size: var(--font-size-12);
          font-weight: var(--font-weight-400);

          &::before {
            content: '';
            position: absolute;
            left: 0;
            width: 24px;
            height: 24px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23c00' d='m15.354 4.146 7.5 7.5.011.013.033.039-.044-.052A.5.5 0 0 1 23 12v.02l-.005.052L23 12a.5.5 0 0 1-.136.342l-.01.011-7.5 7.5a.5.5 0 1 1-.708-.706l6.645-6.647H1.5a.5.5 0 0 1 0-1h19.793l-6.646-6.646a.5.5 0 1 1 .707-.708'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}

/* Benefits Section */
.benefits-section {
  & .benefits-container {
    & .benefits-cards-list-container {
      overflow: hidden;

      & .benefits-cards-wrapper {
        @media (min-width: 768px) {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: var(--spacing-24);
        }
      }

      & .benefits-card {
        border-radius: var(--border-radius-8);
        border: 1px solid var(--color-gray-light);
        min-height: 410px;
        box-sizing: border-box;

        & .card-header {
          & img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-top-left-radius: var(--border-radius-8);
            border-top-right-radius: var(--border-radius-8);
          }
        }

        & .card-title {
          display: flex;
          flex-direction: row;
          gap: var(--spacing-8);
          padding: var(--spacing-16) var(--spacing-16) var(--spacing-8)
            var(--spacing-16);

          & h4 {
            font-family: var(var(--font-santander-regular));
            font-weight: var(--font-weight-300);
            font-size: var(--font-size-18);
            line-height: var(--line-height-28);
            color: var(--color-medium-black);
          }
        }

        & .card-content {
          & p {
            padding: var(--spacing-0) var(--spacing-16) var(--spacing-8)
              var(--spacing-16);
            color: var(--color-medium-black);
            font-family: var(--font-santander-regular);
            font-size: var(--font-size-14);
            font-style: normal;
            font-weight: var(--font-weight-400);
            line-height: var(--line-height-22);
          }
        }

        @media (max-width: 768px) {
          width: 100%;
        }
      }
    }
  }
}

/* Channels Section */
.channels-section {
  & [slot='answer'] {
    & p {
      font-family: var(--font-santander-headline);
      font-size: var(--font-size-12);
      font-weight: var(--font-weight-400);
      line-height: var(--line-height-28);
      color: var(--color-medium-black);
    }

    & ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;

      & li {
        font-family: var(--font-santander-headline);
        font-size: var(--font-size-12);
        font-weight: var(--font-weight-400);
        line-height: normal;
        color: var(--color-medium-black);
      }
    }

    & span {
      font-family: var(--font-santander-headline);
      font-size: var(--font-size-12);
      font-weight: var(--font-weight-400);
      line-height: var(--line-height-28);
      color: var(--color-medium-black);

      & a {
        padding: 0;
        margin: 0;
        width: auto;
        font-size: var(--font-size-12);
        text-decoration: underline;
      }
    }
  }
}

/* Disclaimer Section */
.disclaimer {
  & santander-legal-text [slot='legal-text'] {
    margin-bottom: var(--spacing-16);
  }

  & santander-legal-text [slot='legal-text']:last-of-type {
    margin-bottom: 0;
  }

  & santander-legal-text [slot='legal-text'] a {
    color: var(--color-gray-medium);
    font-weight: var(--font-weight-700);
  }
}

.details-section {
  & .download-item-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-24);

    & .download-item {
      padding: var(--spacing-24) var(--spacing-8);
      border-radius: 4px;
      border: 1px solid var(--color-gray-light);
      display: flex;
      justify-content: space-between;
      color: var(--color-medium-black);
      font-family: var(--font-santander-headline);
      font-size: var(--font-size-16);
      line-height: var(--line-height-21);
      text-decoration: none;

      & span {
        color: var(--color-gray-light);
      }
    }
  }
}