/* --- ESTILO GERAL DE DESTAQUE --- */
.destaque {
  padding: 80px 0;
}

.destaque-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.destaque-text,
.destaque-image {
  flex: 1;
}

/* --- ESTILO DA IMAGEM (ESQUERDA) --- */
.destaque-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.destaque-image > img {
  width: 550px;
  height: 548px;
  object-fit: cover;
  border-radius: 12px;

  border: 10px solid rgba(4, 115, 255, 0.3);
  box-shadow: 0px 0px 80px -20px rgba(4, 115, 255, 0.5);
}

/* utility: remove frame (border + shadow) for SVG portraits */
.no-frame {
  border: none !important;
  box-shadow: none !important;
  width: auto; /* let SVG size naturally or be controlled elsewhere */
  height: auto;
  border-radius: 0;
}

.destaque .pill-1 {
  top: 15%;
  left: -40px;
}

.destaque .pill-2 {
  top: 50%;
  right: -25px;
}

.destaque .pill-3 {
  bottom: 5%;
  left: -25px;
}

/* --- ESTILO DO TEXTO (DIREITA) --- */
.destaque-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.destaque .hovered-secondary {
  margin-top: 12px;
}

.destaque-hat {
  color: var(--Grey-50);
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 1px;
  width: fit-content;

  border: 1px solid rgb(255, 255, 255, 0.2);
  padding: 8px 14px;
  border-radius: 64px;
}

.destaque-title {
  color: var(--Grey-50);
  font-size: 56px;
  font-weight: 100px;
  text-align: left;
  line-height: 1.3;
  max-width: 543px;
}

.destaque-description {
  color: var(--Grey-50);
  font-size: 16px;
  font-weight: 100;
  text-align: left;
  max-width: 543px;
}

/* --- VARIAÇÃO DESTAQUE 02 (ORDEM INVERTIDA) --- */
.destaque--reverse .destaque-content {
  flex-direction: row-reverse;
}

.destaque--reverse .pill-1 {
  top: 5%;
  left: -130px;
}

.destaque--reverse .pill-2 {
  top: 65%;
  right: -40px;
}

.destaque--reverse .pill-3 {
  bottom: 5%;
  left: -130px;
}