/* =========================================================
   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: 100%;
  height: 100%;
  object-fit: cover;
  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: -30px;
}
.attract__visual::after {
  width: 50px;
  height: 50px;
  background: var(--color-pink);
  bottom: 10%;
  right: -25px;
}

/* 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: var(--fs-4xl);
  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: 3rem; }
}