/* ========================================
   SECTION 2 - Ferramentas / Herramientas
   LP Lenovo 360 for Services 2026
   ======================================== */

.tools {
  position: relative;
  background: var(--gradient-section2);
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  overflow: hidden;
}

/* Grafismos decorativos (SVG do Figma) */
.tools__grafismos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header ---------- */
.tools__header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
  padding-inline: var(--container-padding);
  max-width: var(--container-max);
  margin-inline: auto;
}

.tools__title {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  line-height: 1.22;
  max-width: 644px;
  margin: 0 auto 16px;
}

.tools__subtitle {
  font-size: var(--font-size-section-sub);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-dark);
  line-height: 1.333;
  max-width: 713px;
  margin: 0 auto;
}

/* ---------- Body: two columns ---------- */
.tools__body {
  display: grid;
  grid-template-columns: minmax(0, 549px) 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
}

/* ---------- Left: text list ---------- */
.tools__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tools__list-item {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  line-height: 1.44;
}

.tools__list-item strong {
  font-weight: var(--font-weight-bold);
}

/* ---------- Right: rounded photo ---------- */
.tools__photo {
  border-radius: 19px;
  overflow: hidden;
  width: 100%;
  max-width: 472px;
  aspect-ratio: 472 / 398;
}

.tools__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- CTA ---------- */
.tools__cta-wrap {
  text-align: left;
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ---------- Mobile (≤1024px) ---------- */
@media (max-width: 1024px) {
  .tools__body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tools__photo {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }

  .tools__cta-wrap {
    display: flex;
    justify-content: center;
  }
}