:root {
  --ui-primary: #f0c3daff;
  --ui-secondary: #f085bcff;
}

#metodos_section,
#servicios,
#pagos {
  max-width: 1200px;
  margin: auto;
}

#servicios,
#pagos {
  margin-top: 100px;
}

#servicios {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 32px;
}

.subtitulo,
.titulo {
  text-wrap: balance;
}

.subtitulo {
  color: var(--ui-primary);
}

.titulo {
  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 600 !important;
  font-size: 38px;
  line-height: 1.2em;
}

.card_img {
  width: 350px !important;
  position: relative;
  width: 100%;
  height: fit-content;
  gap: 0px;
  align-items: start;
  justify-content: start;
  border-radius: 20px;
  background: rgba(245, 245, 245, 0.5);
  padding: 4% !important;

  h3 {
    font-weight: 500 !important;
  }

  p {
    font-weight: 300 !important;
    text-wrap: balance;
    text-wrap: pretty;
  }

  a {
    color: var(--ui-secondary) !important;
    position: relative;
    text-transform: uppercase;

    &::after {
      content: " ➡️" !important;
      width: 50px !important;
    }
  }
}

hr {
  margin: 0 !important;
  width: 50%;
  height: 2px;
  border: none;
  background-color: var(--ui-secondary);
}

figure {
  width: 100% !important;
  margin: 0 !important;

  img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: contain !important;
  }
}

#metodos_section {
  margin-top: 40px;

  aside {
    width: 700px !important;
    hr {
      width: 200px !important;
    }
  }
}

#pagos {
  figure {
    width: 100%;

    img {
      width: 100%;
      aspect-ratio: 1/1 !important;
      object-fit: contain !important;
    }
  }

  h3 {
    font-size: 1.2rem !important;
  }
  p {
    font-size: 0.89rem !important;
  }

  article {
    width: 200px !important;
  }
}

/* clases generales */

.flex_column {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.flex_start {
  display: flex !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 16px !important;
}

.flex_between {
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.flex_evenly {
  display: flex !important;
  justify-content: space-evenly !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.link_primary {
  width: fit-content;
  padding: 8px 16px !important;
  background: var(--ui-secondary) !important;
  color: #fff !important;
  transition: all 0.3s linear !important;

  &:hover {
    text-decoration: none !important;
    background: var(--ui-primary) !important;
  }
}