/* ==========================================================================
   Cases — colagem + slider de cases
   ========================================================================== */

.cases {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 4.375vw 0 5.2083vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-cream);
}

.cases__intro {
  position: relative;
  width: 93.4722vw;
  min-width: 0;
  display: flex;
  margin: 0 0 0 2.7778vw;
  align-items: flex-start;
}

.cases__intro-text {
  position: relative;
  width: 37.5vw;
  padding: 8.0278vw 0 0;
  display: block;
  flex: 0 0 auto;
}

.cases__title {
  width: 37.5vw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.1667vw;
  color: var(--color-black);
  line-height: 106%;
}

.cases__lead {
  margin: 0.6944vw 0 0;
  width: 23.0556vw;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.25vw;
  color: var(--color-black);
  line-height: 110%;
  text-align: justify;
}

.cases__tagline {
  margin: 1.7778vw 0 0;
  width: 25.5556vw;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25vw;
  color: var(--color-pink);
  line-height: 110%;
}

.cases__collage {
  position: relative;
  width: 59.5139vw;
  display: block;
  height: 41.4583vw;
  margin: 0 0 0 -3.5417vw;
  flex: 0 0 auto;
}

.cases__float {
  position: absolute;
  display: block;
}

.cases__float--collage-01 {
  width: 56.8261%;
  height: 52.9313%;
  left: 14.5858%;
}

.cases__float--collage-02 {
  width: 33.3722%;
  height: 54.7739%;
  top: 19.598%;
}

.cases__float--collage-03 {
  width: 33.3722%;
  height: 66.6667%;
  top: 6.8677%;
  left: 66.6278%;
}

.cases__float--collage-04 {
  width: 33.3722%;
  height: 59.799%;
  top: 40.201%;
  left: 23.3372%;
}

.cases__float--collage-05 {
  width: 37.4562%;
  height: 56.2814%;
  top: 37.6884%;
  left: 49.0082%;
}

.cases__photo {
  position: relative;
  width: 100%;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

.cases__photo-image {
  display: block;
  position: absolute;
}

.cases__photo-image--collage-01 {
  width: 145.22%;
  height: 148.97%;
  max-width: 145.22%;
  top: -17.15%;
  left: -22.57%;
}

.cases__photo-image--collage-02 {
  width: 100%;
  height: 109.37%;
  max-width: 100%;
  top: 0.06%;
  left: 0;
}

.cases__photo-image--cover {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.cases__photo-image--collage-05 {
  width: 100%;
  height: 119.03%;
  max-width: 100%;
  top: -4.62%;
  left: 0;
}

.cases__slider {
  position: relative;
  width: 100%;
  display: block;
  margin: 5.4167vw 0 0;
}

.cases__window {
  position: relative;
  width: 89.3056vw;
  display: block;
  overflow: hidden; /* moved by js/modules/cases-slider.js */
  touch-action: pan-y; /* vertical swipes still scroll the page */
  margin: 0 0 0 5.3472vw;
}

.cases__track {
  position: relative;
  width: auto;
  min-width: 0;
  display: flex;
  gap: 1.3889vw;
}

.cases__card {
  position: relative;
  width: 59.7917vw;
  min-width: 0;
  padding: 1.5278vw 3.0556vw 2.2222vw;
  display: flex;
  flex-direction: column;
  height: 30.2083vw;
  overflow: hidden;
  color: var(--color-cream);
  border-radius: var(--radius);
  flex: 0 0 auto;
  justify-content: space-between;
}

.cases__image {
  display: block;
  width: 100%;
  max-width: 100%;
  position: absolute;
  left: 0;
}

.cases__image--case-01 {
  height: 247.41%;
  object-fit: cover;
  top: -121.35%;
}

.cases__image--cover {
  height: 100%;
  object-fit: cover;
  top: 0;
}

.cases__image--case-04 {
  height: 263.91%;
  top: -110.26%;
}

.cases__image--case-05 {
  height: 354.94%;
  top: -198.68%;
}

/* Narrow "peek" card (next case): custom crops switch to a centred cover */
.cases__card.is-peek :is(.cases__image--case-04, .cases__image--case-05) {
  height: 100%;
  top: 0;
  object-fit: cover;
  object-position: center;
}

.cases__overlay {
  position: absolute;
  width: 100%;
  display: block;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 54%;
}

.cases__label {
  width: 100%;
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9722vw;
  color: var(--color-cream);
  line-height: 110%;
}

.cases__content {
  position: relative;
  width: 100%;
  display: block;
  z-index: 1;
  margin: 0 0 0 0.3472vw;
}

.cases__heading {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2222vw;
  color: var(--color-cream);
  line-height: 106%;
}

.cases__heading--toda-marca {
  max-width: 30.9028vw;
}

.cases__heading--operacao-nao {
  max-width: 27.5vw;
}

.cases__heading--time-comercial {
  max-width: 25.5556vw;
}

.cases__heading--campanha-transforma {
  max-width: 35.625vw;
}

.cases__heading--wide {
  max-width: 32.7083vw;
}

.cases__details {
  position: relative;
  width: 100%;
  display: block;
}

.cases__text {
  margin: 0.5556vw 0 0;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1111vw;
  color: var(--color-cream);
  line-height: 110%;
  text-align: justify;
}

.cases__text--standard {
  width: 27.2222vw;
}

.cases__text--organizamos-resultados {
  width: 25.4861vw;
}

.cases__text--criamos-ferramentas {
  width: 25.3472vw;
}

.cases__button {
  white-space: nowrap;
  text-align: center;
  padding: 1.0417vw 2.0833vw;
  border-radius: var(--radius);
  background-color: var(--color-pink);
  display: inline-flex;
  width: 12.9861vw;
  min-height: 3.5417vw;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1111vw;
  color: var(--color-black);
  line-height: 110%;
  margin: 1.6667vw 0 0;
  justify-content: center;
  align-items: center;
}

.cases__stats {
  position: absolute;
  width: 19.3056vw;
  display: block;
  height: 15.0694vw;
  z-index: 1;
}

.cases__stats--case-1 {
  top: 8.4722vw;
  left: 38.2639vw;
}

.cases__stats--case-7 {
  top: 9.7222vw;
  left: 39.2361vw;
}

.cases__stat {
  position: absolute;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 7.3611vw;
  justify-content: center;
}

.cases__stat--414k-pessoas {
  width: 8.4722vw;
  padding: 0.6944vw 1.0417vw;
  top: 3.125vw;
  background-color: var(--color-cream);
}

.cases__stat--33k-acessos {
  width: 8.4722vw;
  padding: 0.6944vw 1.0417vw;
  left: 9.1667vw;
  background-color: var(--color-red);
}

.cases__stat--526-leads {
  width: 8.4722vw;
  padding: 0.6944vw 1.0417vw;
  background-color: var(--color-cream);
}

.cases__stat--captacao-majoritariamente {
  width: 10.0694vw;
  padding: 0.6944vw 0.5556vw;
  top: 4.2361vw;
  left: 7.5vw;
  background-color: var(--color-pink);
}

.cases__stat-value {
  margin: 0 0 0.8333vw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2222vw;
  color: var(--color-black);
  line-height: 54%;
  text-align: center;
}

.cases__stat-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9722vw;
  color: var(--color-black);
  line-height: 110%;
  text-align: center;
}

.cases__stat-note {
  color: var(--color-black);
  line-height: 110%;
  text-align: center;
}

.cases__stat-note--1o-trimestre {
  position: absolute;
  top: 11.3889vw;
  left: 6.3889vw;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1111vw;
  padding: 0.6944vw;
  background-color: var(--color-cream);
}

.cases__stat-note--captacao-majoritariamente {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9722vw;
}

.cases__nav {
  position: absolute;
  width: 4.0972vw;
  padding: 0;
  display: block;
  height: 4.0972vw;
  top: 42.7586%;
  z-index: 3;
  margin: 0;
  border-radius: 50%;
}

.cases__nav--prev {
  left: 2.4306vw;
}

.cases__nav--next {
  right: 3.3333vw;
}

.cases__nav-circle {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.cases__nav-chevron {
  display: block;
  width: 44.0678%;
  height: 44.0678%;
  position: absolute;
  top: 27.1186%;
  left: 27.1186%;
}

.cases__nav-chevron--next {
  transform: rotate(180deg);
}

.cases__cta {
  text-align: center;
  padding: 2.0833vw 1.6667vw;
  border-radius: var(--radius);
  background-color: var(--color-pink);
  display: inline-flex;
  width: 26.3194vw;
  min-height: 5.7639vw;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25vw;
  color: var(--color-black);
  line-height: 110%;
  margin: 2.0833vw 5.2083vw 0 0;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
}


/* Mobile */
@media (max-width: 767px) {
  .cases {
    padding: 21.4159vw 0 14.7727vw;
  }

  .cases__intro {
    width: 93.1818vw;
    margin: 0 auto;
  }

  .cases__intro-text {
    width: 93.1818vw;
    padding: 0;
  }

  .cases__title {
    width: 93.1818vw;
    font-size: 12.0455vw;
    text-align: justify;
  }

  .cases__lead {
    width: 93.1818vw;
    font-size: 3.6364vw;
    margin: 0.8796vw 0 0;
  }

  .cases__tagline {
    width: 93.8636vw;
    font-size: 3.1818vw;
    text-align: center;
    margin: 4.4091vw 0 0;
  }

  .cases__collage {
    display: none;
  }

  .cases__slider {
    margin: 18.9568vw 0 0;
  }

  .cases__window {
    width: 91.5909vw;
    margin: 0 auto;
  }

  .cases__track {
    gap: 4.5454vw;
  }

  .cases__card {
    width: 91.5909vw;
    height: 135.6818vw;
    padding: 4.4318vw 4.5454vw 8.8636vw;
  }

  .cases__image--case-01 {
    width: 132.74%;
    height: 121.14%;
    max-width: 132.74%;
    top: -21.12%;
    left: -16.37%;
  }

  .cases__image--case-04 {
    height: 100%;
    object-fit: cover;
    top: 0;
  }

  .cases__image--case-05 {
    height: 100%;
    object-fit: cover;
    top: 0;
  }

  .cases__label {
    font-size: 2.7273vw;
  }

  .cases__content {
    width: 86.5909vw;
    margin: 0 0 0 -1.5909vw;
  }

  .cases__heading {
    max-width: 86.5909vw;
    font-size: 6.3636vw;
  }

  .cases__text {
    width: 83.8636vw;
    font-size: 3.6364vw;
    margin: 1.8182vw 0 0;
  }

  .cases__button {
    width: 42.5vw;
    min-height: 11.5909vw;
    font-size: 3.6364vw;
    padding: 3.4091vw 6.8182vw;
    margin: 3.8636vw 0 0 1.5909vw;
  }

  .cases__stats {
    width: 63.1818vw;
    height: 49.3182vw;
    top: 20.6818vw;
    left: 14.8864vw;
  }

  .cases__stat {
    height: 24.0909vw;
  }

  .cases__stat--414k-pessoas {
    width: 27.7273vw;
    top: 5.2273vw;
    padding: 2.2727vw 3.4091vw;
  }

  .cases__stat--33k-acessos {
    width: 27.7273vw;
    left: 30vw;
    padding: 2.2727vw 3.4091vw;
  }

  .cases__stat--526-leads {
    width: 27.7273vw;
    padding: 2.2727vw 3.4091vw;
  }

  .cases__stat--captacao-majoritariamente {
    width: 32.9545vw;
    top: 13.8636vw;
    left: 24.5454vw;
    padding: 2.2727vw 1.8182vw;
  }

  .cases__stat-value {
    font-size: 7.2727vw;
    margin: 0 0 2.7273vw;
  }

  .cases__stat-label {
    font-size: 3.1818vw;
  }

  .cases__stat-note--1o-trimestre {
    top: 26.3636vw;
    left: 20.9091vw;
    font-size: 3.6364vw;
    padding: 2.2727vw;
  }

  .cases__stat-note--captacao-majoritariamente {
    font-size: 3.1818vw;
  }

  .cases__nav {
    width: 10.2273vw;
    height: 10.2273vw;
    top: 41.875%;
  }

  .cases__nav--prev {
    right: auto;
    left: 0;
  }

  .cases__nav--next {
    right: 0;
    left: auto;
  }

  .cases__cta {
    width: 93.1818vw;
    min-height: 18.8636vw;
    font-size: 4.0909vw;
    padding: 6.8182vw 5.4546vw;
    margin: 9.5455vw auto 0;
  }
}