/* ============================================================
   ASTRON — SEÇÃO 5: RESULTADOS

   A primeira dobra do mundo claro: tinta escura sobre o céu
   bone, flutuando entre o mar de nuvens e o teto de grid.
   Headline no alto e os três números em linha — mesmo peso,
   mesmo nível, mesma importância. A cascata da contagem (no
   reveal.js) preserva a ordem do discurso: escritórios →
   tráfego → honorários.

   As cores são locais: o mundo claro tem a própria paleta, e o
   verde da marca escurece um tom para ler sobre fundo claro.
   ============================================================ */

.res{
  --res-ink:#16171b;
  --res-mute:#7d7e84;
  --res-verde:#5FA800;
  text-align:center;
  color:var(--res-ink);
}

.res__headline{
  font-size:64px;
  font-weight:600;
  line-height:1.0;
  letter-spacing:-0.035em;
}
.res__headline em{ font-style:normal; color:var(--res-verde) }

.res__fila{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(48px, 7vw, 110px);
  margin-top:72px;
}

/* --- A anatomia de cada número --- */
.res__num{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
/* A subida casa com a largada da contagem no reveal.js
   (420ms + 190ms de cascata). */
.is-in .res__num{ opacity:1; transform:none }
.is-in .res__num:nth-child(1){ transition-delay:.42s }
.is-in .res__num:nth-child(2){ transition-delay:.61s }
.is-in .res__num:nth-child(3){ transition-delay:.80s }
.is-out .res__num{ opacity:0; transform:translateY(-12px); transition-delay:0s }

.res__linha{
  display:flex;
  justify-content:center;
  align-items:baseline;
  font-size:84px;
  line-height:.95;
  letter-spacing:-0.04em;
}
.res__mais{ color:var(--res-verde); font-weight:600; margin-right:.06em }
.res__moeda{
  font-size:.34em; font-weight:500; color:var(--res-mute);
  align-self:flex-start; margin:.22em .14em 0 0; letter-spacing:0;
}
.res__valor{ font-weight:600; font-variant-numeric:tabular-nums }
.res__sufixo{ font-size:.52em; font-weight:500; margin-left:.10em }

.res__label{
  display:block;
  margin-top:14px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--res-mute);
  text-transform:uppercase;
  line-height:1.7;
}

@media (max-height: 800px){
  .res__headline{ font-size:50px }
  .res__linha{ font-size:66px }
  .res__fila{ margin-top:48px }
}

@media (max-width: 768px){
  .res__headline{ font-size:38px }
  .res__fila{ flex-direction:column; align-items:center; gap:32px; margin-top:40px }
  .res__linha{ font-size:58px }
}