/* ================= COMO FUNCIONA ================= */

.como-funciona {
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  padding: 120px 40px;
  overflow: hidden;
}

/* CONTAINER REAL */
.cf-container {
  max-width: 2400px;            /* 🔥 MAIS LARGO */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* imagem | texto */
  gap: 120px;
  align-items: center;
}

/* ================= IMAGEM ================= */

.cf-imagem {
  display: flex;
  justify-content: center;
}

.cf-imagem img {
  width: 100%;
  max-width: 900px;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.18));
  animation: pessoaFloat 6s ease-in-out infinite;
}

@keyframes pessoaFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

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

.cf-conteudo {
  max-width: 680px;  /* 🔥 AQUI É O PULO DO GATO */
}

/* TAG */
.cf-tag {
  display: inline-block;
  background: rgba(199, 0, 0, 0.12);
  color: #c70000;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
}

/* TÍTULO */
.cf-conteudo h2 {
  font-size: 52px;            /* 🔥 GRANDE E RESPIRADO */
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: #111;
  margin-bottom: 26px;
}

/* SUBTÍTULO */
.cf-sub {
  font-size: 20px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 60px;
}

/* ================= ETAPAS ================= */

.cf-etapas {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.cf-item {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

/* NÚMERO */
.cf-num {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #c70000, #ff4d4d);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 18px 35px rgba(199,0,0,0.45),
    inset 0 -3px 6px rgba(0,0,0,0.15);
}

/* TEXTO DAS ETAPAS */
.cf-item h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #111;
}

.cf-item p {
  font-size: 17px;
  line-height: 1.8;
  color: #555;
  max-width: 520px; /* 🔥 impede linhas gigantes */
}

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

@media (max-width: 1024px) {
  .cf-container {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .cf-conteudo h2 {
    font-size: 44px;
  }
}

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

@media (max-width: 768px) {
  .como-funciona {
    padding: 90px 20px;
  }

  .cf-container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .cf-imagem img {
    max-width: 300px;
  }

  .cf-conteudo {
    max-width: 100%;
  }

  .cf-tag {
    margin-left: auto;
    margin-right: auto;
  }

  .cf-conteudo h2 {
    font-size: 32px;
  }

  .cf-sub {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .cf-item {
    text-align: left;
  }

  .cf-item p {
    max-width: 100%;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .cf-imagem img {
    max-width: 260px;
  }

  .cf-conteudo h2 {
    font-size: 28px;
  }
}