/* Faixa "As oportunidades estão aqui." com números reais (services/lp_numeros.py).
   Faixa escura de ponta a ponta: o fundo sai do .wrap por box-shadow + clip-path,
   sem mudar o HTML (o render da LP interativa ancora no .source-strip). */
.source-strip.ss-numeros {
  --ss-bg:#0f3a2c;
  --ss-num:#b9f08c;
  background:var(--ss-bg);
  box-shadow:0 0 0 100vmax var(--ss-bg);
  clip-path:inset(0 -100vmax);
  border-top:0;
  padding-block:64px 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  color:#d6e5dc
}
.source-strip.ss-numeros>span {
  max-width:none;
  text-align:center;
  font-size:clamp(26px,3vw,40px);
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.15;
  color:#fff;
  margin-bottom:44px
}
.source-strip.ss-numeros>div:not(.ss-tags) {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:calc(var(--ss-n) * 300px);
  gap:0;
  padding-left:0
}
.ss-numeros .ss-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  flex:1 1 0;
  min-width:0;
  padding-inline:16px
}
.ss-numeros .ss-item+.ss-item { border-left:1px solid rgba(255,255,255,.12) }
.ss-numeros .ss-item>b,
.ss-numeros .ss-tag>b {
  font-size:14px;
  font-weight:500;
  color:#b5cabd
}
.ss-numeros .google-word span { color:#b5cabd }
.ss-numeros .ss-num {
  font:650 clamp(36px,3.5vw,54px)/1 var(--body);
  letter-spacing:-2.5px;
  color:var(--ss-num);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  margin-top:4px
}
.ss-numeros .ss-item em {
  font-style:normal;
  font-size:15px;
  color:#d6e5dc;
  max-width:220px
}
.source-strip.ss-numeros>.ss-tags {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:40px;
  padding:0
}
.ss-numeros .ss-tag {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-size:14px;
  color:#d6e5dc
}
.ss-numeros .ss-tag>b { gap:6px }
.ss-numeros .ss-tag>span::before { content:"·"; margin-right:10px; color:#6f8c7c }
.source-strip.ss-numeros>small {
  text-align:center;
  font-size:12px;
  color:#8fa89a;
  margin-top:28px
}

/* Entrada: só esconde quando o JS está vivo pra mostrar de volta. */
.ss-numeros.ss-js .ss-item,
.ss-numeros.ss-js .ss-tag { opacity:0; transform:translateY(16px); transition:opacity .7s ease,transform .7s ease }
.ss-numeros.ss-visivel .ss-item,
.ss-numeros.ss-visivel .ss-tag { opacity:1; transform:none }
.ss-numeros.ss-visivel .ss-item:nth-child(2) { transition-delay:.12s }
.ss-numeros.ss-visivel .ss-item:nth-child(3) { transition-delay:.24s }
.ss-numeros.ss-visivel .ss-item:nth-child(4) { transition-delay:.36s }
.ss-numeros.ss-visivel .ss-item:nth-child(5) { transition-delay:.48s }
.ss-numeros.ss-visivel .ss-tag { transition-delay:.9s }

@media (max-width:1100px) {
  .source-strip.ss-numeros>div:not(.ss-tags) { max-width:900px; row-gap:36px }
  .ss-numeros .ss-item { flex:0 0 33.33% }
  .ss-numeros .ss-item+.ss-item { border-left:0 }
}
@media (max-width:760px) {
  .source-strip.ss-numeros { padding-block:44px 32px }
  .source-strip.ss-numeros>span { margin-bottom:28px; font-size:26px; display:block }
  .source-strip.ss-numeros>div:not(.ss-tags) { row-gap:28px }
  .ss-numeros .ss-item { flex:0 0 50%; padding-inline:4px }
  .ss-numeros .ss-num { font-size:36px; letter-spacing:-1.5px }
  .ss-numeros .ss-item em { font-size:13px }
  .ss-numeros .ss-tag { font-size:13px }
}
@media (prefers-reduced-motion:reduce) {
  .ss-numeros.ss-js .ss-item,
  .ss-numeros.ss-js .ss-tag { opacity:1; transform:none; transition:none }
}