<!-- =========================================
     SHIRLEY SOUZA | SEDENTAS POR ALGO MAIS
     ========================================= -->

<div class="shirley-page">

  <!-- HERO -->
  <section class="ss-hero">

    <div class="ss-decoration ss-decoration-1"></div>
    <div class="ss-decoration ss-decoration-2"></div>

    <div class="ss-container ss-hero-grid">

      <div class="ss-hero-text">

        <span class="ss-small-title">
          UM CONVITE PARA O SECRETO
        </span>

        <h1>
          Aprenda a construir um
          <em>relacionamento profundo</em>
          com o Senhor no secreto.
        </h1>

        <p class="ss-intro">
          Há uma vida com Deus que não é construída no palco,
          na aparência ou apenas no que ouvimos sobre Ele.
          Ela nasce quando fechamos a porta, abrimos o coração
          e decidimos conhecê-Lo de perto.
        </p>

        <a
          class="ss-button"
          href="https://pay.kiwify.com.br/gATJ9gj"
        >
          Quero me aprofundar
        </a>

      </div>


      <div class="ss-photo-wrap">

        <div class="ss-photo-shape"></div>

        <img
          class="ss-photo"
          src="https://soushirleysouza.com/wp-content/uploads/2026/08/Verde-e-Branco-Minimalista-Corretor-de-Imoveis-Logo.png"
          alt="Shirley Souza"
        >

        <div class="ss-flower flower-top">
          ❀
        </div>

      </div>

    </div>

  </section>


  <!-- VERSÍCULO PRINCIPAL -->
  <section class="ss-main-verse">

    <div class="ss-container">

      <span class="ss-section-label">
        O SEGREDO ESTÁ NO SECRETO
      </span>

      <blockquote>
        “Mas quando você orar, vá para seu quarto,
        feche a porta e ore a seu Pai, que está no secreto.
        Então seu Pai, que vê no secreto, o recompensará.”
      </blockquote>

      <p class="ss-reference">
        — Mateus 6:6 — NVI 🌹
      </p>

      <div class="ss-divider"></div>

      <p class="ss-reflection">
        Antes de existir uma vida pública com Deus,
        precisa existir uma vida secreta com Ele.
        É nesse lugar escondido que aprendemos a ouvi-Lo,
        conhecê-Lo, confiar e permanecer.
      </p>

      <a
        class="ss-button ss-button-light"
        href="https://pay.kiwify.com.br/gATJ9gj"
      >
        Quero me aprofundar
      </a>

    </div>

  </section>


  <!-- JORNADA -->
  <section class="ss-journey" id="secreto">

    <div class="ss-container ss-journey-grid">

      <div class="ss-journey-art">

        <div class="ss-arch">

          <span class="ss-arch-flower">🌹</span>

          <span class="ss-arch-word">
            SEDENTAS
          </span>

        </div>

      </div>


      <div class="ss-journey-content">

        <span class="ss-small-title">
          SEDENTAS POR ALGO MAIS
        </span>

        <h2>
          Uma jornada de 10 encontros
          para guiá-la a um relacionamento
          profundo com o Senhor no secreto. 🌹
        </h2>

        <p>
          Talvez você já tenha entendido que deseja mais de Deus,
          mas ainda se pergunte:
          <strong>“Como eu começo?”</strong>
        </p>

        <p>
          O <em>Sedentas por Algo Mais</em> foi criado para acompanhá-la
          nesse começo. Não para ocupar o lugar da Palavra,
          da oração ou da presença de Deus — mas para conduzi-la
          de volta a elas.
        </p>

        <p class="ss-emphasis">
          Comece no secreto.
        </p>

      </div>

    </div>

  </section>


  <!-- VERSÍCULOS ESPALHADOS -->
  <section class="ss-scriptures">

    <div class="ss-container">

      <div class="ss-scripture scripture-left">

        <span>JOÃO 7:37</span>

        <p>
          “Se alguém tem sede,
          venha a mim e beba.”
        </p>

      </div>


      <div class="ss-scripture scripture-right">

        <span>JEREMIAS 29:13</span>

        <p>
          “Vocês me buscarão e me encontrarão
          quando me buscarem de todo o coração.”
        </p>

      </div>


      <div class="ss-scripture scripture-left">

        <span>APOCALIPSE 22:17</span>

        <p>
          “Quem tem sede venha;
          e quem quiser receba de graça
          a água da vida.”
        </p>

      </div>


      <div class="ss-scripture scripture-right">

        <span>MATEUS 6:6</span>

        <p>
          “Quando você orar, vá para seu quarto,
          feche a porta e ore a seu Pai,
          que está no secreto.”
        </p>

      </div>

    </div>

  </section>


  <!-- CTA FINAL -->
  <section class="ss-final">

    <div class="ss-final-flower">
      ❀
    </div>

    <div class="ss-container">

      <span class="ss-section-label">
        SE VOCÊ TEM SEDE, VENHA.
      </span>

      <h2>
        O relacionamento profundo
        que você deseja com Deus
        começa quando você decide buscá-Lo.
      </h2>

      <p>
        Não espere sentir tudo para começar.
        Abra a porta. Entre no secreto.
        Leve sua sede para Aquele que pode preenchê-la.
      </p>

      <a
        class="ss-button"
        href="https://pay.kiwify.com.br/gATJ9gj"
      >
        Quero me aprofundar
      </a>

    </div>

  </section>

</div>


<style>

/* ==================================
   PALETA
   ================================== */

.shirley-page {
  --cream: #F8F3ED;
  --cream-light: #FFFDF9;
  --rose: #A97170;
  --rose-soft: #D9B7B0;
  --rose-light: #EBDCD7;
  --brown: #493A35;
  --brown-soft: #725F58;
  --beige: #E7D9CD;

  background: var(--cream);
  color: var(--brown);

  overflow: hidden;
}

.shirley-page * {
  box-sizing: border-box;
}

.ss-container {
  width: min(1160px, 88%);
  margin: 0 auto;
}


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

.ss-hero {
  position: relative;

  min-height: 780px;

  display: flex;
  align-items: center;

  padding: 100px 0;

  background:
    linear-gradient(
      110deg,
      #F9F4EE 0%,
      #F8F3ED 60%,
      #F3E8E3 100%
    );
}

.ss-hero-grid {
  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 90px;

  align-items: center;

  position: relative;

  z-index: 2;
}

.ss-small-title {
  display: block;

  margin-bottom: 22px;

  font-family: Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 3px;

  color: var(--rose);
}

.ss-hero h1 {
  max-width: 690px;

  margin: 0 0 30px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(44px, 5vw, 73px);

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -2px;

  color: var(--brown);
}

.ss-hero h1 em {
  color: var(--rose);

  font-weight: 400;
}

.ss-intro {
  max-width: 590px;

  margin-bottom: 38px;

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.85;

  color: var(--brown-soft);
}


/* ==================================
   FOTO
   ================================== */

.ss-photo-wrap {
  position: relative;

  max-width: 420px;

  margin-left: auto;
}

.ss-photo-shape {
  position: absolute;

  width: 340px;
  height: 340px;

  top: -40px;
  right: -65px;

  border-radius: 50%;

  background: var(--rose-light);
}

.ss-photo {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  border-radius: 220px 220px 28px 28px;

  box-shadow:
    0 30px 70px rgba(73, 58, 53, 0.10);
}

.ss-flower {
  position: absolute;

  z-index: 4;

  color: var(--rose);

  opacity: .55;
}

.flower-top {
  top: 30px;
  left: -32px;

  font-size: 40px;
}


/* ==================================
   DECORAÇÃO
   ================================== */

.ss-decoration {
  position: absolute;

  border-radius: 50%;

  opacity: .45;

  filter: blur(2px);
}

.ss-decoration-1 {
  width: 300px;
  height: 300px;

  left: -160px;
  bottom: -100px;

  background: var(--rose-light);
}

.ss-decoration-2 {
  width: 170px;
  height: 170px;

  right: 4%;
  top: 30px;

  border: 1px solid var(--rose-soft);
}


/* ==================================
   BOTÕES
   ================================== */

.ss-button {
  display: inline-block;

  padding: 16px 31px;

  border-radius: 50px;

  background: var(--rose);

  color: #FFFFFF !important;

  font-family: Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 1.1px;

  text-decoration: none !important;

  transition:
    transform .3s ease,
    background .3s ease;
}

.ss-button:hover {
  background: #875B59;

  transform: translateY(-2px);
}


/* ==================================
   VERSÍCULO PRINCIPAL
   ================================== */

.ss-main-verse {
  padding: 125px 0;

  text-align: center;

  background: var(--rose);
}

.ss-main-verse .ss-container {
  max-width: 880px;
}

.ss-section-label {
  display: block;

  margin-bottom: 34px;

  font-family: Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 3px;

  color: #F8EDEA;
}

.ss-main-verse blockquote {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(30px, 3.8vw, 49px);

  font-weight: 400;

  line-height: 1.35;

  color: #FFFFFF;
}

.ss-reference {
  margin-top: 30px;

  font-family: Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 1.6px;

  color: #F5E5E1;
}

.ss-divider {
  width: 55px;

  height: 1px;

  margin: 45px auto;

  background: #F5DED9;
}

.ss-reflection {
  max-width: 650px;

  margin: 0 auto 35px;

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.9;

  color: #FAF1EF;
}

.ss-button-light {
  background: #FFF9F6;

  color: var(--rose) !important;
}

.ss-button-light:hover {
  background: #FFFFFF;
}


/* ==================================
   JORNADA
   ================================== */

.ss-journey {
  padding: 130px 0;

  background: var(--cream-light);
}

.ss-journey-grid {
  display: grid;

  grid-template-columns: .85fr 1.15fr;

  gap: 100px;

  align-items: center;
}

.ss-journey-art {
  display: flex;

  justify-content: center;
}

.ss-arch {
  width: 330px;

  min-height: 450px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

  border-radius: 170px 170px 25px 25px;

  background:
    linear-gradient(
      180deg,
      #EAD7D1,
      #F4E9E4
    );

  border: 1px solid #E1C7C0;
}

.ss-arch::after {
  content: "";

  position: absolute;

  width: 270px;
  height: 390px;

  border-radius: 150px 150px 20px 20px;

  border: 1px solid rgba(169, 113, 112, .25);
}

.ss-arch-flower {
  position: relative;

  z-index: 2;

  margin-bottom: 25px;

  font-size: 44px;
}

.ss-arch-word {
  position: relative;

  z-index: 2;

  font-family: Georgia, serif;

  font-size: 25px;

  letter-spacing: 5px;

  color: var(--rose);
}

.ss-journey-content h2 {
  max-width: 650px;

  margin: 0 0 30px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(34px, 4vw, 53px);

  font-weight: 400;

  line-height: 1.2;

  color: var(--brown);
}

.ss-journey-content p {
  max-width: 620px;

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.85;

  color: var(--brown-soft);
}

.ss-emphasis {
  margin-top: 35px !important;

  font-family: Georgia, serif !important;

  font-size: 27px !important;

  font-style: italic;

  color: var(--rose) !important;
}


/* ==================================
   VERSÍCULOS ESPALHADOS
   ================================== */

.ss-scriptures {
  padding: 115px 0;

  background: var(--cream);
}

.ss-scriptures .ss-container {
  display: flex;

  flex-direction: column;

  gap: 70px;
}

.ss-scripture {
  width: min(600px, 100%);

  position: relative;

  padding: 36px 45px;

  border: 1px solid rgba(169, 113, 112, .18);

  background:
    rgba(255, 253, 249, .7);
}

.scripture-left {
  align-self: flex-start;

  border-radius: 60px 12px 60px 12px;
}

.scripture-right {
  align-self: flex-end;

  border-radius: 12px 60px 12px 60px;
}

.ss-scripture span {
  display: block;

  margin-bottom: 15px;

  font-family: Arial, sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 2.5px;

  color: var(--rose);
}

.ss-scripture p {
  margin: 0;

  font-family: Georgia, serif;

  font-size: 25px;

  line-height: 1.5;

  color: var(--brown);
}


/* ==================================
   FINAL
   ================================== */

.ss-final {
  position: relative;

  padding: 130px 0;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #E8D3CC,
      #F4E7E1
    );
}

.ss-final .ss-container {
  max-width: 790px;
}

.ss-final .ss-section-label {
  color: var(--rose);
}

.ss-final h2 {
  margin: 0 auto 28px;

  font-family: Georgia, serif;

  font-size: clamp(35px, 4vw, 55px);

  font-weight: 400;

  line-height: 1.2;

  color: var(--brown);
}

.ss-final p {
  max-width: 610px;

  margin: 0 auto 38px;

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.85;

  color: var(--brown-soft);
}

.ss-final-flower {
  margin-bottom: 15px;

  font-size: 40px;

  color: var(--rose);

  opacity: .65;
}


/* ==================================
   RESPONSIVO
   ================================== */

@media (max-width: 850px) {

  .ss-hero {
    min-height: auto;

    padding: 75px 0;
  }

  .ss-hero-grid,
  .ss-journey-grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .ss-hero h1 {
    font-size: 44px;
  }

  .ss-photo-wrap {
    width: min(100%, 380px);

    margin: 0 auto;
  }

  .ss-journey-content {
    order: 1;
  }

  .ss-journey-art {
    order: 2;
  }

  .ss-main-verse,
  .ss-journey,
  .ss-scriptures,
  .ss-final {
    padding: 80px 0;
  }

}


@media (max-width: 480px) {

  .ss-container {
    width: 88%;
  }

  .ss-hero h1 {
    font-size: 38px;

    letter-spacing: -1px;
  }

  .ss-intro,
  .ss-reflection,
  .ss-journey-content p,
  .ss-final p {
    font-size: 15px;
  }

  .ss-main-verse blockquote {
    font-size: 29px;
  }

  .ss-journey-content h2,
  .ss-final h2 {
    font-size: 34px;
  }

  .ss-scripture {
    padding: 30px 28px;
  }

  .ss-scripture p {
    font-size: 21px;
  }

  .ss-arch {
    width: 280px;

    min-height: 390px;
  }

  .ss-arch::after {
    width: 225px;
    height: 330px;
  }

}

</style>