/* ==========================================================================
   DOBRA 03 — QUAL O OBJETIVO DA MKS STUDIO
   Referência: página 3 do PDF original
   ========================================================================== */

.objetivo {
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Texto: título à esquerda, parágrafos à direita
   -------------------------------------------------------------------------- */

.objetivo__texto {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
  padding-top: clamp(3.5rem, 7vw, 7rem);
}

.objetivo__titulo {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--cream);
}

.objetivo__corpo {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gray-on-dark);
  text-wrap: pretty;
}
.objetivo__corpo strong {
  font-weight: 700;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Palco: mockup à esquerda, frase de fecho no card mint à direita
   -------------------------------------------------------------------------- */

.objetivo__palco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  margin-top: clamp(-1rem, -2vw, 0rem);
  padding-inline: var(--gutter);
}

.objetivo__mockup {
  position: relative;
  z-index: 2;             /* passa por cima do card */
  display: block;
  width: 100%;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.5));
}

/* Card em degradê: avança para trás do mockup pela esquerda
   e sangra pela borda direita. O padding-left compensa o avanço,
   então o texto não se desloca junto com o fundo. */
.objetivo__selo {
  --avanco: clamp(5rem, 15vw, 17rem);
  --respiro: clamp(1.4rem, 2.6vw, 2.8rem);

  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--avanco));
  margin-right: calc(-1 * var(--gutter) - var(--r-lg));
  padding: clamp(2rem, 4vw, 3.4rem) var(--respiro);
  padding-left: calc(var(--avanco) + var(--respiro));
  padding-right: calc(var(--respiro) + var(--r-lg));
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  color: var(--charcoal);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* o mockup entra deslizando de baixo quando a dobra aparece */
.objetivo__mockup[data-reveal] {
  transform: translateY(46px);
}
.objetivo__mockup[data-reveal].is-in {
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .objetivo__texto {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* o card mint desce para baixo do mockup */
  .objetivo__palco {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2rem;
    padding-inline: 0;
  }
  .objetivo__mockup {
    width: min(560px, 94%);
    margin-inline: auto;
  }
  .objetivo__selo {
    margin-left: 0;
    margin-right: 0;
    margin-top: -2.5rem;        /* sobe por trás da base do mockup */
    padding: clamp(1.4rem, 5vw, 2rem) var(--gutter);
    padding-top: clamp(3rem, 9vw, 4rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    text-align: center;
  }
}