/* ============================================
   SECTIONS - ThinkAgile HX
   ============================================ */

/* Solution Section */
.solution {
  padding-block: clamp(4rem, 5vw, 5.5rem);
}

.solution h2 {
  font-weight: 700;
  font-family: var(--font-gotham-bold);
  max-width: 25ch;
  line-height: 120%;
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  margin-bottom: 1rem;
  padding: 0;
}

.solution p+p {
  margin-top: 1rem;
}

.solution .benefits-list {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.solution .benefits-list li {
  font-family: var(--font-gotham-book);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-gray);
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.solution .benefits-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary-red-alt);
  font-size: 1.5rem;
  line-height: 1.2;
}

.solution a {
  margin-top: 2rem;
  min-width: 22.125rem;
  box-sizing: border-box;
}

.solution .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: background-color var(--transition-default), color var(--transition-default),
    transform var(--transition-default), box-shadow var(--transition-default);
}

.solution .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.solution .button:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.solution .image {
  display: grid;
  place-items: center;
}

.solution__container {
  display: grid;
  gap: 3rem;
}

@media (min-width: 45em) {
  .solution__container {
    grid-template-areas: 'image content';
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
  }

  .solution__container .content {
    grid-area: content;
  }

  .solution__container .image {
    grid-area: image;
  }
}

/* Solution Part 2 - Inverted Layout */
.solution__container--inverted {
  display: grid;
  gap: 3rem;
  margin-top: 4rem;
}

@media (min-width: 45em) {
  .solution__container--inverted {
    grid-template-areas: 'content image';
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }

  .solution__container--inverted .content {
    grid-area: content;
  }

  .solution__container--inverted .image {
    grid-area: image;
  }
}

@media (max-width: 45em) {
  .solution h2 {
    text-align: center !important;
    margin-inline: auto;
  }

  .solution p {
    text-align: center !important;
  }

  .solution .benefits-list li {
    text-align: left;
  }

  .solution a {
    margin-inline: auto;
    min-width: unset;
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: center;
  }
}

/* Crie Section */
.crie {
  padding-block: clamp(3.75rem, 5vw, 5rem);
  background: linear-gradient(103deg, #b8252e -16.61%, #4d144a 34.68%, #11184f 104.61%);
  position: relative;
  display: grid;
  color: var(--color-white);
}

.crie__container {
  z-index: 1;
}

.crie__container h2 {
  font-weight: 700;
  font-family: var(--font-gotham-bold);
  color: var(--color-white);
  margin-inline: auto;
  text-align: center;
  max-width: 20ch;
  line-height: 120%;
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  margin-bottom: clamp(3rem, 4vw, 4.25rem);
  padding: 0;
}

.crie__container ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 2.5rem;
}

.crie__container ul li {
  display: grid;
  gap: 1.5rem;
  justify-content: center;
  text-align: center;
}

.crie__container ul h3 {
  color: var(--color-primary-red-alt);
  font-weight: 700;
  font-family: var(--font-gotham-bold);
  font-size: clamp(2.25rem, 3.5vw, 2.625rem);
  line-height: 115%;
  max-width: 8ch;
  margin-inline: auto;
}

.crie__container ul h3 span {
  font-size: 50%;
}

.crie__container ul p {
  font-size: 1rem;
  max-width: 22ch;
  text-align: center;
  margin-inline: auto;
  color: var(--color-white);
}

.crie .fontes {
  display: grid;
  gap: 0.5rem;
  text-align: center;
  margin-top: 4.5rem;
  max-width: 550px;
  font-size: 0.75rem;
  margin-inline: auto;
  opacity: 0.9;
}

.crie .fontes a {
  text-decoration: underline !important;
  color: var(--color-white);
}

.crie .fontes small {
  color: var(--color-white);
}

@media (min-width: 40em) {
  .crie__container ul {
    align-items: start;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 70em) {
  .crie__container ul {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  .crie__container ul li {
    grid-template-rows: 1fr max-content;
    gap: 1.3125rem;
  }

  .crie__container ul li h3 {
    font-size: 3rem;
  }

  .crie__container ul li:not(:last-child) h3 {
    margin-top: 2.25rem;
  }

  .crie__container ul li p {
    max-width: 21ch;
  }
}

.crie .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

.crie .bg>* {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Slides Section */
.slides {
  isolation: isolate;
  background-color: var(--color-bg-light);
  color: var(--color-white);
  position: relative;
  display: grid;
  padding-block: clamp(3.75rem, 5vw, 5rem);
}

.slides .container {
  width: min(90%, 1100px);
}

.slides__container {
  z-index: 1;
}

.slides h2 {
  color: var(--color-black);
  max-width: 25ch;
  font-family: var(--font-gotham-bold);
  text-align: center;
  margin-inline: auto;
  padding-bottom: 0;
  margin-bottom: 2.3125rem;
  line-height: 120%;
}

.slides h2 span {
  font: inherit;
  color: var(--color-primary-red-alt);
}

.slides .cards {
  display: grid;
  gap: 1.5rem;
}

.slides .cards article {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  align-items: center;
  position: relative;
  padding: 1.5rem;
  padding-top: 4rem;
  color: var(--color-text-dark);
}

.slides .cards article h3 {
  font-family: var(--font-gotham-bold);
}

.slides .cards article>div p {
  font-size: 0.9rem;
}

.slides .cards article::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='46' height='33' viewBox='0 0 46 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45.9 6.8C38.8333 7.53333 35.5667 10.8333 36.1 16.7H42.3V32.7H26.1V19.2C26.1 12.6 27.7 7.86666 30.9 5C34.1 2.13333 38.6667 0.633331 44.6 0.499996L45.9 6.8ZM20.5 6.8C13.4333 7.53333 10.1667 10.8333 10.7 16.7H16.9V32.7H0.7V19.2C0.7 12.6 2.3 7.86666 5.5 5C8.7 2.13333 13.2667 0.633331 19.2 0.499996L20.5 6.8Z' fill='%23F26A52'/%3E%3C/svg%3E%0A");
  width: 40px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 1rem;
  position: absolute;
  top: 1.5rem;
}

@media (min-width: 45em) {
  .slides .cards article {
    padding: 2.25rem;
    padding-top: 3.25rem;
  }

  .slides .cards article::before {
    top: 1rem;
  }

  .slides .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .slides .cards article {
    padding: 2.5rem 4.375rem;
    padding-top: 2.5rem;
  }

  .slides .cards article::before {
    top: 2rem;
  }
}

.slides .cards article>p {
  font-style: italic;
  margin-bottom: 1.875rem;
  font-size: 1rem;
}

.slides .bg {
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slides .bg>* {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Pay Section */
.pay {
  padding-block: clamp(3.75rem, 5vw, 5rem);
  background: linear-gradient(103deg, #b8252e -16.61%, #4d144a 34.68%, #11184f 104.61%);
  position: relative;
  color: var(--color-white);
}

.pay .content h2 {
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  font-family: var(--font-gotham-bold);
  line-height: 120%;
  margin-bottom: 1rem;
  padding: 0;
  max-width: 20ch;
  color: var(--color-white);
}

.pay .content p {
  color: var(--color-white);
}

.pay .content a {
  margin-top: 2rem;
  min-width: 22.125rem;
  box-sizing: border-box;
}

.pay .image {
  display: grid;
  place-items: center;
}

.pay .image img {
  height: auto;
}

.pay__container {
  display: grid;
  gap: 2rem;
  max-width: 66.25rem;
}

@media (max-width: 40em) {
  .pay .content h2 {
    text-align: center !important;
    margin-inline: auto;
    max-width: 100%;
  }

  .pay .content p {
    text-align: center !important;
  }

  .pay .content a {
    min-width: unset;
    width: 100%;
    max-width: 320px;
    display: flex;
    margin-inline: auto;
    justify-content: center;
  }
}

@media (min-width: 40em) {
  .pay__container {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
}

@media (min-width: 70em) {
  .pay__container {
    gap: 3.5rem;
  }
}

/* Disclaimer Final */
#disclaimer-final {
  padding: 58px 0;
  background-color: var(--color-disclaimer-bg);
}

#disclaimer-final p {
  font-family: var(--font-gotham-book);
  font-size: 12px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: normal;
  text-align: center;
  color: var(--color-black);
}

@media screen and (max-width: 767px) {
  #disclaimer-final {
    padding-bottom: 90px;
  }

  #disclaimer-final p {
    line-height: 1.8;
    font-size: 10px !important;
  }
};