/* ══ Um dia na operação (páginas de cenário) ══════════════════════════════════
   Só as três páginas de cenário do molde novo carregam este arquivo:
   /solucoes/atendimento, /solucoes/vendas, /solucoes/consultorias.

   DONO DO FATO: a linha do tempo. O desenho de dentro de cada momento, janela
   de conversa e painel, continua sendo de assets/css/canal.css, que já vem
   carregado junto. Aqui não se redesenha nem janela nem painel.

   POR QUE ESTA FORMA E NÃO A LISTA DAS PÁGINAS DE CANAL: a página de canal
   responde "o que dá pra fazer aqui dentro", e uma lista de itens soltos serve.
   A página de cenário responde "como fica a minha operação", e isso tem hora.
   A régua da esquerda, o fio contínuo e o horário são o que dizem que um
   momento veio depois do outro. Tirar a régua devolve a página de canal.

   O FIO ACOMPANHA A ROLAGEM, e é aí que mora a graça: a parte cinza é o dia
   inteiro, a parte colorida é o quanto dele já passou, e ela escorre junto com
   a leitura. O ponto do momento que a pessoa está lendo fica cheio e com um
   anel; os que já passaram ficam cheios; os que ainda não chegaram ficam ocos.
   Quem calcula isso é assets/js/cenario.js, escrevendo `--cd-p` em cada
   momento. Sem JavaScript o dia aparece inteiro e resolvido, ver `.cd-vivo`.

   O que este arquivo reusa de canal.css, de propósito, pra não existirem dois
   desenhos da mesma coisa: `.cn-pos-head` no cabeçalho da seção e
   `.cn-item-selo` no selo de cada momento. */

.cd-dia {
  padding: 92px 0;
  background: var(--evo-off-white, #eff2f7);
}

/* A faixa do dia, embaixo do subtítulo do cabeçalho: 08:12 → 17:30. Sai das
   horas do primeiro e do último momento, não é enfeite escrito à mão. */
.cd-faixa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 22, 38, 0.09);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cn-accent, #1bbf5d);
}
.cd-faixa i {
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.cd-lista {
  max-width: 1060px;
  margin: 0 auto;
}

/* ── Um momento ──────────────────────────────────────────────────────────── */
/* Três colunas: a hora, a régua e o corpo. A régua é uma coluna de verdade, e
   não uma borda do corpo, porque o ponto precisa ficar centrado nela em
   qualquer largura. */
.cd-mom {
  display: grid;
  grid-template-columns: 76px 20px minmax(0, 1fr);
  grid-template-areas: 'hora rail corpo';
  column-gap: 24px;
  padding-bottom: 52px;
}
.cd-mom:last-child { padding-bottom: 0; }

.cd-hora {
  grid-area: hora;
  text-align: right;
  padding-top: 1px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Números de larguras iguais: sem isso as horas não alinham entre si e a
     coluna fica tremida. */
  font-variant-numeric: tabular-nums;
  color: var(--cn-accent, #1bbf5d);
  transition: color .35s ease;
}

/* ── A régua ─────────────────────────────────────────────────────────────── */
.cd-rail {
  grid-area: rail;
  position: relative;
}
/* Dois fios no mesmo lugar: o `::before` é o trilho cinza do dia inteiro e o
   `::after` é o quanto já passou. O `bottom` negativo faz os dois atravessarem
   o respiro de baixo e encostarem no ponto seguinte. */
.cd-rail::before,
.cd-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: -52px;
  width: 2px;
  margin-left: -1px;
}
.cd-rail::before { background: #ccd5df; }
.cd-rail::after {
  background: var(--cn-accent, #1bbf5d);
  transform: scaleY(var(--cd-p, 1));
  transform-origin: top;
}
.cd-mom:last-child .cd-rail::before,
.cd-mom:last-child .cd-rail::after { content: none; }

.cd-ponto {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--cn-accent, #1bbf5d);
  border: 2px solid var(--cn-accent, #1bbf5d);
  transition: background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
/* O anel do momento que está sendo lido. Nasce fechado e abre junto com o
   ponto, então não fica pulsando sozinho na tela. */
.cd-ponto::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--cn-accent, #1bbf5d);
  opacity: 0;
  transform: scale(.55);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

/* ── O corpo do momento ──────────────────────────────────────────────────── */
/* O texto sempre à esquerda e o desenho sempre à direita, sem alternar. Nas
   páginas de canal os blocos alternam de lado, e é justamente isso que aqui
   não pode acontecer: alternando, o olho perde a linha do tempo. */
.cd-corpo {
  grid-area: corpo;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  column-gap: 44px;
  align-items: start;
}

.cd-txt h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--evo-text, #1e2026);
  text-wrap: balance;
}
.cd-txt p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--evo-text-soft, #5a6270);
  margin: 0 0 18px;
}

/* ── A chegada ───────────────────────────────────────────────────────────── */
/* `cd-vivo` só entra quando o assets/js/cenario.js assume, mesma disciplina do
   `is-vivo` das janelas: sem JavaScript nada aqui embaixo vale, e o dia nasce
   inteiro, com o fio cheio, os pontos acesos e tudo no lugar.

   O momento espera o fio alcançar ele. Enquanto não alcança, ponto oco, hora
   apagada, texto e desenho fora da tela. Quando alcança, entram em ordem:
   título, texto, selo, e o quadro por último, vindo de fora. */
.cd-lista.cd-vivo .cd-ponto {
  background: #fff;
  border-color: #c2ccd8;
}
.cd-lista.cd-vivo .cd-hora { color: #9aa5b1; }
.cd-lista.cd-vivo .cd-txt > *,
.cd-lista.cd-vivo .cd-mock { opacity: 0; }

@keyframes cd-sobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* O quadro entra por outro caminho de propósito: ele é um objeto, não uma
   linha de texto, e vindo do mesmo lado que o texto os dois viravam um bloco
   só subindo junto. */
@keyframes cd-quadro {
  from { opacity: 0; transform: translate(26px, 12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.cd-lista.cd-vivo .cd-mom.is-chegou .cd-ponto {
  background: var(--cn-accent, #1bbf5d);
  border-color: var(--cn-accent, #1bbf5d);
}
.cd-lista.cd-vivo .cd-mom.is-chegou .cd-hora { color: var(--cn-accent, #1bbf5d); }

.cd-lista.cd-vivo .cd-mom.is-chegou .cd-txt > * {
  animation: cd-sobe .62s cubic-bezier(.16, 1, .3, 1) both;
}
.cd-lista.cd-vivo .cd-mom.is-chegou .cd-txt > *:nth-child(2) { animation-delay: .10s; }
.cd-lista.cd-vivo .cd-mom.is-chegou .cd-txt > *:nth-child(3) { animation-delay: .20s; }
.cd-lista.cd-vivo .cd-mom.is-chegou .cd-mock {
  animation: cd-quadro .74s cubic-bezier(.16, 1, .3, 1) .16s both;
}

/* O anel marca só onde a régua está agora, e por isso ele sai quando o próximo
   momento chega. Os anteriores seguem cheios, sem anel. */
.cd-lista.cd-vivo .cd-mom.is-agora .cd-ponto { transform: scale(1.3); }
.cd-lista.cd-vivo .cd-mom.is-agora .cd-ponto::after { opacity: .3; transform: scale(1); }

/* ── Telas menores ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cd-corpo { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  /* Aqui o quadro fica embaixo do texto, e entrar pela direita fica sem
     sentido: ele passa a subir como o resto. */
  .cd-lista.cd-vivo .cd-mom.is-chegou .cd-mock {
    animation-name: cd-sobe;
  }
  .cd-mom { padding-bottom: 46px; }
  .cd-rail::before,
  .cd-rail::after { bottom: -46px; }
}

@media (max-width: 620px) {
  .cd-dia { padding: 64px 0; }
  /* A régua fica, a hora sobe pra cima do título. Largura de tela pequena não
     comporta uma coluna só pra hora, e sem a régua o momento vira card solto. */
  .cd-mom {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-areas: 'rail hora' 'rail corpo';
    column-gap: 14px;
  }
  .cd-hora { text-align: left; margin-bottom: 8px; }
}

/* Quem pediu menos movimento vê o dia inteiro resolvido, sem fio escorrendo,
   sem anel e sem recuo. O JavaScript nem liga o `cd-vivo` nesse caso. */
@media (prefers-reduced-motion: reduce) {
  .cd-hora,
  .cd-ponto,
  .cd-ponto::after { transition: none; }
  /* O cenario.js marca todo mundo como chegado e nem liga o `cd-vivo` nesse
     caso, mas a regra fica aqui pra quem trocar a preferência com a página
     aberta não ficar com meio dia invisível. */
  .cd-lista.cd-vivo .cd-txt > *,
  .cd-lista.cd-vivo .cd-mock { opacity: 1; animation: none; }
}