/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Avenir', 'Poppins', sans-serif;
  background-color: #fff;
  color: #333;
}

/* CONTAINER */
.container {
  max-width: 1537px;
  padding: 0 185px;
}

.hero-logo.mobile {
  display: none;
}

.hero-logo.desktop {
  display: block;
}

/* HERO DESKTOP */
.hero {
  width: 100%;
  background: url('img/backgroud hero.png') center center / cover no-repeat;
  position: relative;
  z-index: 1;
  padding: 100px 0;
}

.hero-overlay {
  width: 100%;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-logo {
  width: 150px;
  margin-bottom: 40px;
}

.hero-title {
  color: #fff;
  font-family: 'Avenir', sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: normal;
}

.hero-subtitle {
  color: #fff;
  font-family: 'Avenir', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: normal;
}

.btn-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 355px;
  height: 56px;
  padding: 8px 24px;
  background-color: #D95F80;
  color: #fff;
  border-radius: 24px;
  text-decoration: none;
  font-family: 'Avenir', sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 150%;
  transition: background 0.3s ease;
}

.btn-hero:hover {
  background-color: #bf4f6f;
}

.btn-hero img {
  width: 24px;
  height: 24px;
}

/* --- MOBILE --- */
.hero-mobile-top {
  display: none;
}

.hero-logo-mobile {
  width: 90px;
  display: block;
  margin: 20px auto;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}


.aspas-colorida {
   background: linear-gradient(90deg, #F18B1F, #d28ab7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .hero {
    background: url('img/backgroud hero section mobile.png') center center / cover no-repeat;
    padding: 0;
  }

  .hero-mobile-top {
    background-color: #fff;
    display: flex;
  }

  .hero-overlay {
    display: flex;
    align-items: flex-start;
    padding: 40px 0;
  }

  .container {
    padding: 0 24px;
  }

  .hero-content {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    gap: 24px;
  }

  .hero-logo.desktop {
    display: none;
  }

  .hero-title {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.3;
    color: #fff;
  }

  .hero-subtitle {
    font-size: 18px;
        font-weight: 100;
        line-height: 1.4;
        color: #fff;
        width: 300px;
  }

  .btn-hero {
          width: 95%;
        font-size: 16px;
        height: auto;
        padding: 12px 20px;
  }

  .btn-hero img {
    width: 20px;
    height: 20px;
  }
}


/* Nuvem sobreposta */
.cloud-overlay {
  width: 100%;
  height: auto;
  margin-top: -75px;
  display: block;
  position: relative;
  z-index: 2;
}


/* Bloco principal */
.section-dificuldades {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 100px;
}

.section-dificuldades-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding-top: 0px;
}

.profile-photo {
  width: 460px;
  border-radius: 32px;
}

/* Texto */
.text-block {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  font-family: 'Avenir', sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: #313131;
  line-height: normal;
  width: 630px;
}

.section-description {
  font-family: 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #313131;
}

.section-highlight {
  font-family: 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 150%;
  color: #313131;
}

/* Botão */
.btn-section {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 355px;
    height: 56px;
    padding: 8px 24px;
    background-color: #F26A1B;
    color: #fff;
    font-family: 'Avenir', sans-serif;
    font-size: 20px;
  font-weight: 900;
  line-height: 150%;
  border-radius: 24px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-section:hover {
  background-color: #d75e17;
}

.btn-section img {
  width: 24px;
  height: 24px;
}

/* Cards */
.section-cards {
  display: flex;
    justify-content: space-between;
    gap: 69px;
    margin-top: 80px;
    width: 5000px;
}

.card-custom {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-icon {
  width: 56px;
  height: auto;
  margin-bottom: 24px;
}

.card-title {
  color: #313131;
  font-family: 'Avenir', sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: normal;
  margin-bottom: 16px;
}

.card-text {
  color: #313131;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 20px;
}

.card-link {
  font-family: 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #D95F80;
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* Nuvem mobile */
  .cloud-overlay {
    content: url('img/cloud (1).png');
    margin-top: -30px;
  }

  /* Layout principal da section 2 em coluna */
  .section-dificuldades-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  /* Imagem mobile */
  .profile-photo {
    content: url('img/Screenshot_20250618_163849_Maps 6.png');
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
    border-radius: 32px;
  }

  /* Textos da section 2 */
  .text-block {
    align-items: center;
    width: 100%;
  }

  .section-title {
    font-size: 28px;
    width: 100%;
  }

  .section-description {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #313131;
    padding: 0 12px;
  }

  .section-highlight {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    color: #313131;
    padding: 0 12px;
    margin-bottom: 30px;
  }

  /* Botão mobile */
  .btn-section {
    width: 95%;
    font-size: 16px;
    height: auto;
    padding: 12px 20px;
  }

  .btn-section img {
    width: 20px;
    height: 20px;
  }

  /* Cards em coluna */
  .section-cards {
   flex-direction: column;
        align-items: center;
        gap: 48px;
        margin-top: 71px;
        width: auto;
  }

  .card-custom {
    max-width: 300px;
  }
}

/* SECTION 3 — Como podemos ajudar? (desktop) */
.section-ajuda {
  position: relative;
  overflow: hidden;
}

.section-ajuda__bg {
  position: absolute;
  inset: 0;
  background: url('img/fundo roxo com nuvem (1).png') top center / cover no-repeat;
  z-index: 0;
}

/* espaçamento interno da seção, usando o mesmo container do projeto */
.section-ajuda__inner {
      position: relative;
    z-index: 1;
    padding: 0px 0 96px;
    height: 640px;
    width: 1300px;
    top: 150px;
    left: 100px;
}

.ajuda-title {
  color: #313131;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 36px;
}

/* linha dos cards (4 lado a lado) */
.ajuda-cards {
  display: flex;              /* conforme pedido */
  align-items: flex-start;    /* conforme pedido */
  gap: 24px;                  /* conforme pedido */
}

/* cada card é uma imagem pronta */
.ajuda-card {
  display: block;
  width: calc((100% - 3 * 24px) / 4); /* 4 colunas com gap de 24 */
  height: auto;
  border-radius: 16px; /* opcional, as imagens já vêm arredondadas */
  box-shadow: none;     /* mantemos fiel ao asset */
}

@media (max-width: 768px) {
  /* Section 3 — Como podemos ajudar? (mobile) */
  .section-ajuda__inner {
    padding: 40px 24px 64px;
    width: auto;
    height: auto;
    top: 30px;
    left: 0;
  }

  .section-ajuda__bg {
  position: absolute;
  inset: 0;
  background: url('img/fundo\ roxo\ -\ mobile.png') top center / cover no-repeat;
  z-index: 0;
}

  .ajuda-title {
    font-size: 30px;          /* pedido */
    font-weight: 800;
    line-height: normal;
    margin-bottom: 24px;
    text-align: center;
  }

  /* Cards em coluna */
  .ajuda-cards {
    flex-direction: column;
    gap: 24px;                /* siga o Figma; ajuste se precisar */
    align-items: center;
  }

  .ajuda-card {
    width: 70%;
    max-width: 360px;         /* para não encostar nas bordas */
    border-radius: 16px;
  }
}

/* SECTION 4 — Por que escolher / Nossa equipe (desktop) */
.section-porque { position: relative; }

/* TOP GREEN — exatamente como no Figma e centralizado */
.porque-top {
      display: flex;
    width: auto;
    height: 614px;
    padding: 0 80px 80px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    background: #C9D336;
    box-sizing: border-box;
    margin: 0 auto;
}

/* garante que o conteúdo interno também fique centralizado */
.porque-top .container {
 width: 100%;
    max-width: 1345px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    top: 70px;
}

.porque-title {
  color: #313131;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: normal;
  margin: 0;                       /* usa o gap do container */
}

.porque-desc {
  max-width: 979px;                /* conforme pedido */
  margin: 0;                       /* usa o gap do container */
  color: #313131;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

/* CTA laranja centralizado */
.btn-porque {
  display: inline-flex;
  width: 492px;
  height: 62px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 24px;
  background: #F26A1B;
  color: #FFF;
  font-family: 'Avenir', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 150%;
  text-decoration: none;
  transition: background .3s ease;
}
.btn-porque:hover { background: #d75e17; }
.btn-porque img { width: 24px; height: 24px; }

/* ORANGE BASE with cloud image visible at the bottom */
.porque-bottom {
  position: relative;
  background: url('img/fundo laranja com nuvem.png') no-repeat top center;
  background-size: cover; /* cobre toda a largura mantendo as nuvens visíveis */
}

/* 3 FOTOS — metade no verde, metade no laranja */
.porque-photos {
     display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
}

.porque-photo {
  width: calc((100% - 48px) / 3);
    max-width: 390px;
    border-radius: 28px;
    display: block;
    position: relative;
    top: -190px;
}

/* EQUIPE */
.equipe-title {
  color: #FFF;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 24px;
  position: relative;
    top: -185px;
}

.equipe-cards {
  display: flex;
    gap: 24px;
    justify-content: space-between;
    position: relative;
    top: -154px;
}

.equipe-card {
  display: block;
  width: calc((100% - 3 * 24px) / 4);
  border-radius: 16px;
  height: auto;
}

@media (max-width: 768px) {
  /* ---------- SECTION 4 — Por que escolher / Nossa equipe (MOBILE) ---------- */

/* FAIXA VERDE (altura fixa do Figma + centralizado) */
.porque-top{
  height: 682px;                 /* pedido */
  padding: 32px 24px 24px;
  align-items: center;
}

.porque-top .container{
  top: 0;
  gap: 16px;
  align-items: center;
}

/* Título com quebra do layout mobile */
.porque-title{
          font-size: 30px;
        font-weight: 800;
        max-width: 334px;
        text-align: center;
    }

/* Texto */
.porque-desc{
          font-size: 16px;
        font-weight: 500;
        line-height: 150%;
        max-width: 310px;
        text-align: center;
    }

/* Botão */
.btn-porque{
          width: 331px;
        height: 52px;
        font-size: 15px;
        padding: 8px 24px;
    }

/* FUNDO LARANJA (versão mobile com nuvens) */
.porque-bottom {
  position: relative;
  background: url('img/Group\ 58.png') no-repeat top center;
  background-size: cover; /* cobre toda a largura mantendo as nuvens visíveis */
}

/* FOTOS: só a 1ª no mobile, metade no verde / metade no laranja */
.porque-photos{
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  position: relative;
  top: -100px;                                  /* ajuste de invasão do verde */
}

.porque-photo{
          width: 80%;
        max-width: 312px;
        border-radius: 24px;
        top: -45px;
    }

.porque-photo:nth-child(2),
.porque-photo:nth-child(3){
  display: none;                                /* some com as outras duas */
}

/* “Nossa equipe” e cards em coluna */
.equipe-title{
  font-size: 30px;
        color: #fff;
        margin: 16px 0;
        position: relative;
        top: -122px;
    }

.equipe-cards{
            flex-direction: column;
        gap: 24px;
        align-items: center;
        position: relative;
        top: -120px;
    }

.equipe-card{
  width: 70%;
  max-width: 360px;
}
}

/* SECTION 5 — CTA final (desktop) */
.cta-final{
  position: relative;
  background:#FFF;
  overflow: hidden;        /* pra nuvens não criarem barra de rolagem */
}

.cta-final{
  position: relative;
  z-index: 50;           /* fica acima da section anterior */
  margin-top: -120px;    /* puxa a section 5 ~120px para cima (ajuste fino) */
  padding-top: 120px;    /* devolve espaço interno para o conteúdo não colar no topo */
}

/* nuvem laranja no topo desta section */
.cta-top-cloud{
  position: absolute;
  top: -90px; 
  left: 0; 
  right: 0;
  height: 234px;                              /* altura do asset */
  background: url('img/cloud (3).png') top center / cover no-repeat;
  z-index: 60;                                /* acima do conteúdo e da section anterior */
  pointer-events: none;
}

/* conteúdo da section */
.cta-wrap{
  position: relative;
  z-index: 2;                           /* acima da nuvem laranja */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 140px 0 40px;
  max-width: 1537px;     /* mesmo width de .container */
  padding: 0 185px;      /* mesmo padding lateral */
  margin: 0 auto;                 /* 140px para não encostar na nuvem laranja */
}

/* texto com as quebras fixas do layout */
.cta-title{
      color: #313131;
    font-family: 'Avenir', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: normal;
    /* max-width: 884px; */
    width: 612px;                     /* respira e mantém quebras */
}

/* botão */
.btn-cta{
  display:flex;
  width:399px;
  height:62px;
  padding:8px 24px;
  justify-content:center;
  align-items:center;
  gap:8px;
  border-radius:24px;
  background:#F26A1B;
  color:#FFF;
  font-family:'Avenir', sans-serif;
  font-size:22px;
  font-weight:900;
  line-height:150%;
  text-decoration:none;
  margin-top: 28px;
  transition: background .25s ease;
}
.btn-cta:hover{ background:#d75e17; }
.btn-cta img{ width:24px; height:24px; }

/* menino à direita, acima da nuvem roxa */
.cta-kid{
     position: relative;
    z-index: 0;
    max-width: 800px;
    width: 60vw;
    height: auto;
    left: -180px;
}

.cta-kid{ transform: translateY(100px); }

/* nuvem roxa do rodapé */
.cta-bottom-cloud{
  display:block;
  width:100%;
  height:auto;
  margin-top: 24px;                     /* espaço depois do conteúdo */
  position: relative;
  z-index: 5;                           /* abaixo do garoto */
  pointer-events:none;
}

/* --- MOBILE --- */
@media (max-width: 768px){

/* ---------- SECTION 5 — CTA final (MOBILE) ---------- */

/* deixa a section permitir a nuvem laranja sair para cima sem cortar */
.cta-final{
  margin-top: -80px;      /* gruda na section de cima (ajuste fino) */
  padding-top: 100px;     /* respiro interno */
  overflow: visible;      /* importante p/ a nuvem não sumir */
}

/* nuvem laranja do topo (asset mobile) */
.cta-top-cloud{
  position: absolute;
  top: -28px;             /* sobe para sobrepor a section anterior */
  left: 0; right: 0;
  height: 110px;
  background: url('img/cloud (4).png') center top / 100% auto no-repeat;
  z-index: 60;
  pointer-events: none;
}

/* container interno com gutter mobile */
.cta-wrap{
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px 0;      /* usa o mesmo gutter da página */
  max-width: none;
}

/* título mobile com as quebras exatas */
.cta-title.desktop-only{ display: none; }
.cta-title.mobile-only{
  display: block;
  width: 294px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  line-height: normal;
  color: #313131;
  margin: 0 auto;
}

/* botão mais largo para não quebrar */
.btn-cta{
         width: 319px;
        max-width: 378px;
        height: 56px;
        font-size: 18px;
    }

/* menino mobile: maior, centralizado e "atrás" da nuvem roxa */
.cta-kid.desktop-only{ display: none; }
.cta-kid.mobile-only{
  display: block;
        width: 463px;
        max-width: 420px;
        height: auto;
        margin: -50px auto 0;
        z-index: 2;
        left: -25px;
    }

/* nuvem roxa do rodapé (asset mobile) e sobrepondo o rodapé da imagem */
.cta-bottom-cloud{
  content: url('img/cloud (5).png'); /* troca o asset no mobile */
  display: block;
  width: 100%;
  height: auto;
  margin-top: 54px;     /* puxa para cobrir a base do menino */
  z-index: 3;            /* acima do menino */
  position: relative;
}
}