/* ==========================================================================
   Ferramentas
   ========================================================================== */

.tools {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 5.2917vw 0 6.1111vw;
  display: flex;
  flex-direction: column;
  background-color: var(--color-pink);
  align-items: center;
}

.tools__eyebrow {
  width: 58.5417vw;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1111vw;
  color: var(--color-black);
  letter-spacing: 0.3111vw;
  line-height: 1.1;
  text-align: center;
  display: block;
}

.tools__headline {
  position: relative;
  width: 63.6111vw;
  display: block;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0;
  color: var(--color-black);
  line-height: 1.06;
  text-align: center;
  margin: 3.6125vw auto 0;
}

.tools__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.4167vw;
  color: var(--color-black);
  line-height: 1.06;
  text-transform: uppercase;
  display: inline;
}

.tools__title-accent {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.4167vw;
  color: var(--color-cream);
  line-height: 1.06;
  text-transform: uppercase;
  display: inline;
}

.tools__title-end {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.4167vw;
  color: var(--color-black);
  line-height: 1.06;
  text-transform: uppercase;
  display: inline;
}

.tools__body {
  position: relative;
  width: calc(100% - 5.5556vw);
  min-width: 0;
  display: flex;
  margin: 3.2514vw auto 0;
  gap: 1.5972vw;
  justify-content: flex-end;
  align-items: flex-end;
}

.tools__photo {
  position: relative;
  width: 42.1528vw;
  display: block;
  height: 37.4306vw;
  overflow: hidden;
  border-radius: 1.1111vw;
  flex: 0 0 auto;
}

.tools__photo-image {
  display: block;
  width: 107.58%;
  height: 181.92%;
  max-width: 107.58%;
  position: absolute;
  top: -0.19%;
  left: 0.06%;
}

.tools__content {
  position: relative;
  width: 26.1111vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.tools__lead {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 2.0833vw;
  color: var(--color-black);
  line-height: 1.1;
  display: block;
}

.tools__text {
  margin: 2.7778vw 0 0;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3889vw;
  color: var(--color-black);
  line-height: 1.1;
  text-align: justify;
  display: block;
}

.tools__button {
  white-space: nowrap;
  text-align: center;
  padding: 2.0833vw 1.3889vw;
  border-radius: var(--radius-fluid);
  background-color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5.7639vw;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25vw;
  color: var(--color-cream);
  line-height: 1.1;
  margin: 2.7778vw 0 0;
}

.tools__tool-name {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.3889vw;
  color: var(--color-black);
  letter-spacing: 0.1528vw;
  line-height: 1.21;
  text-transform: uppercase;
  transform: rotate(-0.27deg);
  display: block;
}

.tools__tool-name--diagnostico-essencia {
  width: 15.4167vw;
  top: -2.2201vw;
  left: 0%;
}

.tools__tool-name--mapa-operacao {
  width: 17.7778vw;
  top: 1.8882vw;
  left: 15.6944vw;
}

.tools__tool-name--triade-relevancia {
  width: 14.04vw;
  top: 7.9125vw;
  left: 0%;
}

.tools__tool-name--narrativa-conteudo {
  width: 11.0103vw;
  top: 18.1069vw;
  left: 0%;
}

.tools__tool-name--roadmap-comunicacao {
  width: 12.068vw;
  top: 12.9035vw;
  left: 15.9028vw;
}

.tools__tool-name--editorias-series {
  width: 9.5459vw;
  top: 23.5167vw;
  left: 17.1528vw;
}

.tools__tool-name--mapa-potencias {
  width: 26.6667vw;
  top: 31.5819vw;
  left: 0%;
}


/* Mobile */
@media (max-width: 767px) {
  .tools {
    padding: 14.3409vw 0 13.8636vw;
  }

  .tools__eyebrow {
    width: 83.6364vw;
    font-size: 3.1818vw;
    letter-spacing: 0.8909vw;
  }

  .tools__headline {
    width: 91.5909vw;
    max-width: calc(100% - 3.6364vw);
    font-size: 0;
    margin: 7.45vw auto 0;
  }

  .tools__title {
    font-size: 9.0909vw;
    display: block;
  }

  .tools__title-accent {
    font-size: 9.0909vw;
  }

  .tools__title-end {
    font-size: 10.9091vw;
  }

  .tools__body {
    width: calc(100% - 7.7273vw);
    margin: 4.0182vw auto 0;
    flex-direction: column;
    gap: 8.8636vw;
    align-items: stretch;
  }

  .tools__photo {
    width: 100%;
    height: 62.2727vw;
    border-radius: 3.6364vw;
  }

  .tools__photo-image {
    width: 100%;
    height: 222.78%;
    max-width: 100%;
    top: -21.44%;
    left: 0%;
  }

  .tools__content {
    width: 100%;
  }

  .tools__lead {
    font-size: 7.2727vw;
  }

  .tools__text {
    font-size: 4.0909vw;
    margin: 8.8636vw 0 0;
  }

  .tools__button {
    min-height: 18.8636vw;
    font-size: 4.0909vw;
    padding: 6.8182vw 3.4091vw;
    margin: 8.8636vw 0 0;
    border-radius: var(--radius);
  }

  /* No arrow on mobile, so the label never reaches the edges */
  .tools__button-arrow {
    display: none;
  }

  .tools__tool-name {
    display: none;
  }
}