/* ============================================================
   Página: UPay White Label (artboard 11)
   Faixas: hero 0–637 · o que é 637–1244 (branco) ·
   valor 1244–1937 (escuro) · produto 1937–2845 (branco) ·
   quem pode 2845–3587 (escuro) · monetização 3587–4345 (branco) ·
   implantação 4345–5087 (escuro) · diferenciais 5087–5885 (branco) ·
   próximos 5885–6381 (escuro) · footer
   ============================================================ */

/* ---------- hero ---------- */
.wl-hero { --hero-shift: clamp(2.2rem, 4.1vw, 4.9rem); }
.wl-hero .eyebrow { margin-bottom: 1.4em; }
.wl-hero .hero__title { max-width: 16em; }

/* ---------- o que é (apresentação) ---------- */
.about { padding-block: clamp(3rem, 5.2vw, 6.3rem); }
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.about .section-text { max-width: 33.5em; }

/* diagrama Sua empresa → UPay → Seus clientes */
.brand-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(.6rem, 1vw, 1.2rem);
}
.brand-flow__node { text-align: center; }
.brand-flow__circle {
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 7.3vw, 8.75rem);
  height: clamp(5.5rem, 7.3vw, 8.75rem);
  border-radius: 50%;
  background: #e9e9e9;
  margin-inline: auto;
}
.brand-flow__circle img { width: 46%; }
.brand-flow__upay {
  width: clamp(5.5rem, 7.3vw, 8.75rem);
  margin-inline: auto;
}
.brand-flow__node p {
  margin-top: 1.5rem;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.35;
}
.brand-flow__arrow {
  flex: none;
  align-self: flex-start;
  margin-top: clamp(2.6rem, 3.5vw, 4.2rem);
  width: clamp(2.4rem, 3.2vw, 3.9rem);
  height: .55rem;
  position: relative;
  background-image: radial-gradient(circle, #b9b9b9 1.6px, transparent 1.8px);
  background-size: 9px 100%;
  background-repeat: repeat-x;
  background-position: center;
  margin-inline: .55rem;
}
.brand-flow__arrow::before,
.brand-flow__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-left: 2px solid #b9b9b9;
  border-bottom: 2px solid #b9b9b9;
}
.brand-flow__arrow::before {
  left: -.55rem;
  transform: translateY(-50%) rotate(45deg);
}
.brand-flow__arrow::after {
  right: -.55rem;
  transform: translateY(-50%) rotate(225deg);
}

/* ---------- proposta de valor ---------- */
.valor { padding-block: clamp(3rem, 3.85vw, 4.6rem) clamp(3rem, 4.5vw, 5.4rem); }
.valor__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 1.45vw, 1.75rem);
  margin-top: clamp(2.2rem, 3.7vw, 4.4rem);
}
.valor .value-card {
  padding: clamp(1.4rem, 2.2vw, 2.6rem) clamp(1.25rem, 1.9vw, 2.3rem);
  min-height: clamp(13rem, 18.6vw, 22.3rem);
}
.valor .value-card h3 { font-size: var(--fs-body); }
.valor .value-card p { font-size: clamp(.84rem, .9vw, 1.08rem); }

/* ---------- produto completo ---------- */
.produto { padding-block: clamp(3.2rem, 5.4vw, 6.5rem) clamp(3rem, 5.6vw, 6.7rem); }
.produto .section-title { margin-top: -.4em; }
.produto__grid { margin-top: clamp(2.4rem, 4vw, 4.8rem); }
.produto__grid--last {
  grid-template-columns: repeat(3, 1fr);
  width: 75%;
  margin-left: 16.4%;
  margin-top: clamp(1.5rem, 3vw, 3.5rem);
}

/* ---------- quem pode ter ---------- */
.quem-pode { padding-block: clamp(3rem, 6vw, 7.2rem) clamp(3rem, 5.2vw, 6.3rem); }
.quem-pode__grid {
  display: grid;
  grid-template-columns: 1fr 1.85fr;
  gap: clamp(2rem, 2.5vw, 3rem);
}
.quem-pode__intro {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.5;
  max-width: 44em;
}
.quem-pode__cols {
  display: grid;
  grid-template-columns: 1fr 1.13fr;
  gap: clamp(1.5rem, 2.1vw, 2.5rem);
  margin-top: clamp(2rem, 2.7vw, 3.2rem);
}
.quem-pode .check-list { gap: clamp(1.5rem, 1.8vw, 2.15rem); align-content: start; }

/* ---------- monetização ---------- */
.monetiza { padding-block: clamp(3.2rem, 5.4vw, 6.5rem) clamp(3rem, 5vw, 6rem); }
.monetiza .section-title { margin-top: -.4em; }
.monetiza__intro {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.5;
  margin-top: .9em;
}
.monetiza__grid {
  width: min(100%, 83rem);
  margin: clamp(1.8rem, 2.4vw, 2.9rem) auto 0;
  text-align: center;
}
.monetiza__grid > * { padding: clamp(1.1rem, 1.3vw, 1.55rem) clamp(1.25rem, 2.1vw, 2.5rem); }
.monetiza__grid h3 {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.25;
}
.monetiza__grid p {
  font-size: clamp(.84rem, .9vw, 1.08rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: .75em;
  max-width: 24em;
  margin-inline: auto;
}

/* ---------- implantação ---------- */
.implanta { padding-block: clamp(3rem, 6.2vw, 7.4rem) clamp(3rem, 5.2vw, 6.2rem); }
.implanta .section-title { margin-top: -.4em; }
.implanta__intro {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.5;
  margin-top: 1.2em;
}
.implanta__steps { margin-top: clamp(3rem, 5.2vw, 6.2rem); }
.implanta .steps-h::before { left: 12%; right: 12%; }
/* o design pula o número 4: etapas numeradas 1, 2, 3 e 5 */
.implanta .steps-h__item:last-child .steps-h__num { counter-increment: step 2; }
.implanta .steps-h__desc { max-width: 16.5em; margin-inline: auto; }

/* ---------- diferenciais ---------- */
.difer { padding-block: clamp(3.2rem, 5.4vw, 6.5rem) clamp(3rem, 5.3vw, 6.4rem); }
.difer .section-title { margin-top: -.4em; }
.difer__list {
  gap: clamp(1.4rem, 2.1vw, 2.5rem);
  margin-top: clamp(2rem, 2.9vw, 3.5rem);
}
.difer__list li { font-weight: 300; }
.difer__list strong { font-weight: 500; }

/* ---------- próximos passos ---------- */
.proximos { padding-block: clamp(3.4rem, 6.3vw, 7.6rem) clamp(3rem, 5.2vw, 6.2rem); }
.proximos .section-title { margin-top: -.4em; }
.proximos__text {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.5;
  margin-top: 1.7em;
}
.proximos__btn { margin-top: clamp(1.8rem, 2.5vw, 3rem); }

/* footer: sem marcadores nas listas (réplica do design) */
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }

/* ---------- responsivo ---------- */
@media (max-width: 920px) {
  .about__grid,
  .quem-pode__grid { grid-template-columns: 1fr; }
  .produto__grid--last { width: 100%; margin-left: 0; }
  .brand-flow { max-width: 34rem; }
  /* proposta de valor: cards empilhados em altura natural */
  .valor__cards { grid-template-columns: 1fr; gap: 1.2rem; }
  .valor .value-card { min-height: 0; }
  /* quebra fixa do artboard gera linha órfã centralizada no mobile */
  .proximos__text br { display: none; }
}

@media (max-width: 600px) {
  .brand-flow { flex-direction: column; align-items: center; gap: 1.4rem; }
  .brand-flow__arrow { transform: rotate(90deg); margin-block: 1rem; align-self: center; }
  .quem-pode__cols { grid-template-columns: 1fr; }
  .quem-pode .check-list li br { display: none; }
}