/* =========================================================
   MILA — MANIFESTO
   Arquivo exclusivo da página manifesto.html
   VERSÃO COMPLETA RESTAURADA + MOBILE CORRIGIDO
   ========================================================= */

.manifesto-page {
  background: var(--cream);
}


/* =========================================================
   HERO ROXO
   ========================================================= */

.mental-load {
  position: relative;

  width: 100%;

  height: clamp(880px, 105svh, 980px);
  min-height: 900px;
  max-height: none;

  overflow: hidden;

  background: #75419a;
  color: var(--cream);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.mental-load__inner {
  position: relative;

  width: min(1480px, calc(100% - 120px));
  height: 100%;

  margin: 0 auto;
}


/* =========================================================
   TEXTO ESQUERDO
   ========================================================= */

.mental-load__copy {
  position: absolute;

  z-index: 3;

  top: 85px;
  left: 25px;

  width: 700px;
}


.mental-load__copy p {
  margin:
    0
    0
    46px;

  color: var(--cream);

  font-family: var(--sans);

  font-size:
    clamp(
      34px,
      2.55vw,
      45px
    );

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -1.6px;
}


.mental-load__copy p:last-child {
  margin-bottom: 0;
}


.mental-load__copy strong {
  color: var(--cream);

  font-weight: 700;
}


/* =========================================================
   MÃO
   ========================================================= */

.mental-load__hand {
  position: absolute;

  z-index: 1;

  top: 40%;
  right: -80px;

  width: auto;
  max-width: none;

  height: 116%;

  transform: translateY(-50%);

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   LETTERING INFERIOR
   ========================================================= */

.mental-load__headline {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 42px;

  width: calc(100% - 100px);
  max-width: 1240px;

  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  transform: translateX(-50%);

  color: var(--cream);

  font-family: var(--display);

  font-weight: 400;

  text-align: center;

  letter-spacing: -2px;
}


/* PRIMEIRA LINHA */

.mental-load__headline-top {
  display: block;

  margin-bottom: 5px;

  font-size:
    clamp(
      56px,
      5vw,
      72px
    );

  line-height: .94;
}


.mental-load__headline-top strong {
  color: var(--peach);

  font-weight: 400;
}


/* SEGUNDA LINHA */

.mental-load__headline-bottom {
  display: block;

  white-space: nowrap;

  font-size:
    clamp(
      47px,
      4.2vw,
      63px
    );

  line-height: .96;
}


/* =========================================================
   PROPÓSITO — CREME
   ========================================================= */

.ai-purpose {
  background: var(--cream);

  padding:
    clamp(
      80px,
      8vw,
      125px
    )
    clamp(
      36px,
      6vw,
      96px
    );
}


.ai-purpose__inner {
  width:
    min(
      1380px,
      100%
    );

  margin: 0 auto;
}


.ai-purpose__inner h2 {
  width: fit-content;

  margin:
    0
    0
    48px;

  color: #75419a;

  font-family: var(--display);

  font-size:
    clamp(
      72px,
      7vw,
      118px
    );

  font-weight: 400;

  line-height: .96;

  letter-spacing: -3px;

  text-decoration: underline;

  text-decoration-thickness: 5px;

  text-underline-offset: 10px;
}


.ai-purpose__inner p {
  max-width: 1320px;

  margin:
    0
    0
    24px;

  color: #75419a;

  font-family: var(--sans);

  font-size:
    clamp(
      34px,
      3.65vw,
      62px
    );

  font-weight: 400;

  line-height: 1.13;

  letter-spacing: -1.8px;
}


.ai-purpose__inner p:last-child {
  margin-bottom: 0;
}


.ai-purpose__inner strong {
  font-weight: 700;
}


.ai-purpose__inner u {
  text-decoration-thickness: 3px;

  text-underline-offset: 6px;
}


/* =========================================================
   CTA CORAL
   ========================================================= */

.organize-callout {
  padding:
    clamp(
      72px,
      7vw,
      108px
    )
    32px;

  background: var(--peach);

  text-align: center;
}


.organize-callout p {
  max-width: 1380px;

  margin:
    0
    auto
    34px;

  color: var(--cream);

  font-family: var(--sans);

  font-size:
    clamp(
      42px,
      4.7vw,
      76px
    );

  font-weight: 700;

  line-height: 1.08;

  letter-spacing: -2.2px;
}


.organize-callout p strong {
  color: var(--purple-logo);
}


.organize-callout__button {
  min-width: 220px;

  min-height: 56px;

  padding:
    0
    28px;

  border-radius: 999px;

  background: var(--purple-logo);

  color: #fff;

  text-decoration: none;

  font-family: var(--sans);

  font-size: 14px;

  font-weight: 700;
}


/* =========================================================
   REVEAL AO SCROLL
   ========================================================= */

.js .reveal-on-scroll {
  opacity: 0;

  transform:
    translateY(34px);

  transition:
    opacity .75s ease,
    transform .9s
      cubic-bezier(
        .16,
        1,
        .3,
        1
      );

  will-change:
    opacity,
    transform;
}


.js .reveal-on-scroll.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* O headline precisa manter o translateX */

.js .mental-load__headline.reveal-on-scroll {
  transform:
    translateX(-50%)
    translateY(30px);
}


.js .mental-load__headline.reveal-on-scroll.is-visible {
  transform:
    translateX(-50%)
    translateY(0);
}


/* delays */

.js .reveal-delay-1 {
  transition-delay: .08s;
}


.js .reveal-delay-2 {
  transition-delay: .18s;
}


.js .reveal-delay-3 {
  transition-delay: .28s;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1500px) {

  .mental-load__inner {
    width: min(1520px, calc(100% - 140px));
  }


  .mental-load__copy {
    top: 92px;

    width: 740px;
  }


  .mental-load__copy p {
    font-size: 47px;
  }


  .mental-load__hand {
    top: 40%;
    right: -70px;
  }


  .mental-load__headline {
    bottom: 46px;
  }


  .mental-load__headline-top {
    font-size: 76px;
  }


  .mental-load__headline-bottom {
    font-size: 66px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .mental-load {
    height: auto;

    min-height: 0;

    max-height: none;
  }


  .mental-load__inner {
    width:
      min(
        900px,
        calc(100% - 48px)
      );

    height: auto;

    min-height: 0;

    padding:
      72px
      0
      42px;

    display: flex;

    flex-direction: column;
  }


  .mental-load__copy {
    position: relative;

    top: auto;
    left: auto;

    width: 100%;
  }


  .mental-load__copy p {
    margin-bottom: 40px;

    font-size:
      clamp(
        30px,
        4.5vw,
        42px
      );

    line-height: 1.08;
  }


  .mental-load__hand {
    position: relative;

    top: auto;
    right: auto;

    width:
      min(
        620px,
        82vw
      );

    height: auto;

    transform: none;

    margin:
      -95px
      -60px
      -82px
      auto;
  }


  .mental-load__headline {
    position: relative;

    left: auto;
    bottom: auto;

    width: 100%;

    max-width: none;

    margin-top: 0;

    transform: none;
  }


  .js .mental-load__headline.reveal-on-scroll {
    transform:
      translateY(30px);
  }


  .js .mental-load__headline.reveal-on-scroll.is-visible {
    transform:
      translateY(0);
  }


  .mental-load__headline-top {
    font-size:
      clamp(
        52px,
        7vw,
        68px
      );
  }


  .mental-load__headline-bottom {
    white-space: normal;

    font-size:
      clamp(
        46px,
        6vw,
        62px
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .mental-load__inner {
    width:
      calc(
        100% - 36px
      );

    padding:
      52px
      0
      30px;
  }


  .mental-load__copy p {
    margin-bottom: 30px;

    font-size: 27px;

    line-height: 1.1;

    letter-spacing: -.7px;
  }


  .mental-load__copy br {
    display: none;
  }


  ..mental-load__hand {
  width:
    min(
      520px,
      118vw
    );

  height: auto;

  /* move a mão para a esquerda */
  transform: translateX(-70px);

  margin:
    -78px
    -45px
    -112px
    auto;
}


  .mental-load__headline {
    margin-top: 0;
  }


  .mental-load__headline-top {
    margin-bottom: 8px;

    font-size:
      clamp(
        44px,
        13vw,
        60px
      );
  }


  .mental-load__headline-bottom {
    white-space: normal;

    font-size:
      clamp(
        35px,
        9.4vw,
        48px
      );

    line-height: 1;
  }


  .ai-purpose {
    padding:
      68px
      22px;
  }


  .ai-purpose__inner h2 {
    margin-bottom: 34px;

    font-size:
      clamp(
        50px,
        14vw,
        72px
      );

    letter-spacing: -1.8px;

    text-decoration-thickness: 3px;

    text-underline-offset: 6px;
  }


  .ai-purpose__inner p {
    font-size:
      clamp(
        28px,
        8vw,
        38px
      );

    line-height: 1.15;

    letter-spacing: -.9px;
  }


  .organize-callout {
    padding:
      64px
      20px;
  }


  .organize-callout p {
    margin-bottom: 28px;

    font-size:
      clamp(
        34px,
        9.5vw,
        48px
      );

    line-height: 1.11;

    letter-spacing: -1.2px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .js .reveal-on-scroll {
    opacity: 1;

    transform: none !important;

    transition: none;

    will-change: auto;
  }

}

@media (max-width: 720px) {

  .mental-load__hand {
    position: relative !important;

    width: min(520px, 118vw) !important;
    height: auto !important;

    left: -45px !important;
    right: auto !important;

    transform: none !important;

    margin:
      -78px
      -45px
      -112px
      auto !important;
  }

}