/* =========================================================
   COMPONENT — Attract (split: imagem rosa + texto)
   Usado em: home, quem-somos, para-candidatos, sub-marcas
   ========================================================= */

.attract {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.attract__content {
  order: 2;
}

.attract__visual {
  order: 1;
  position: relative;
  aspect-ratio: 1 / 1;
  /* background: linear-gradient(135deg, var(--color-pink) 0%, #b81560 100%); */
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8rem;
}

/* Imagem ocupa o quadrado todo, mantendo proporção */
.attract__visual-img {
  width: 90%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.attract__visual::before,
.attract__visual::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-md);
}
.attract__visual::before {
  width: 60px;
  height: 60px;
  background: var(--color-blue);
  top: 20%;
  left: 0px;
}
.attract__visual::after {
  width: 50px;
  height: 50px;
  background: var(--color-pink);
  bottom: 10%;
  right: 0px;
}

/* Modificadores de cor para sub-marcas (sobrescreve o gradient padrão) */
.attract__visual--infinity {
  background: linear-gradient(135deg, var(--color-infinity), #119a5e);
}
.attract__visual--top {
  background: linear-gradient(
    135deg,
    var(--color-top-executive),
    var(--color-blue-dark)
  );
}
.attract__visual--labs {
  background: linear-gradient(135deg, var(--color-labs), #4a3eaa);
}
.attract__visual--advisory {
  background: linear-gradient(135deg, var(--color-advisory), #16194d);
}

.attract__title {
  color: var(--color-pink);
  font-size: 64px;
  margin-bottom: var(--space-5);
  line-height: 1.1;
}

.attract__text {
  margin-bottom: var(--space-4);
}
.attract__text strong {
  color: var(--color-text);
}

.attract__divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
}

.attract__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-pink);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.attract__link:hover {
  color: var(--color-pink-dark);
}

@media (min-width: 1024px) {
  .attract {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
  }
  .attract__content {
    order: 1;
  }
  .attract__visual {
    order: 2;
  }
  .attract__title {
    font-size: rem;
  }
}