/* Capas do índice do blog (/blog): uma ilustração por post, com animação
   própria. Qual capa cada post ganha: src/lib/blog-capa.ts. Markup:
   src/components/BlogCapa.astro. Carrega depois do blog-layout.css.

   Regras de animação:
   - o estado de base de cada elemento é o QUADRO FINAL; a animação só diz de
     onde ele vem (`from`). Sem JS ou com movimento reduzido, a capa aparece
     pronta e parada;
   - tudo mora sob `.capas-animadas` (classe que o script do índice põe no
     <html>) e fica pausado até a capa entrar na tela (`.is-in`);
   - passar o mouse no card repete a animação (`.is-reset` zera e devolve). */

/* ---------- fundo por pilar ---------- */
/* Mesma receita do --mv-teal-gradient do blog-layout.css, trocando a cor da
   área. É fundo, não texto nem logo ([[marca/gradiente]]). */
body .blog-cover[data-pilar] {
  --capa-cor:#5BC0BE;
  background:linear-gradient(175deg,
    color-mix(in srgb,var(--capa-cor) 30%,#000) 0%,
    color-mix(in srgb,var(--capa-cor) 55%,#000) 42%,
    color-mix(in srgb,var(--capa-cor) 65%,#fff) 100%);
}
body .blog-cover[data-pilar="vendas"] {--capa-cor:#3972FD}
body .blog-cover[data-pilar="ia"] {--capa-cor:#A364FF}
body .blog-cover[data-pilar="pessoas"] {--capa-cor:#FA9800}
body .blog-cover[data-pilar="gestao"] {--capa-cor:#3A506B}

/* ---------- moldura comum (medidas das capas originais) ---------- */
.capa {
  width:100%;max-width:450px;background:#fff;border:1px solid #ffffff90;border-radius:16px;padding:20px;
  box-shadow:inset 0 1px 0 #fff9,0 24px 60px -35px #08282099;color:#172136;text-align:left;font-size:12px;line-height:1.4;
}
.capa .visual-top {margin-bottom:16px}
.capa ul,.capa ol {list-style:none;margin:0;padding:0}
.capa strong {font-weight:600}
.capa-chip {
  font-style:normal;font-size:12px;line-height:1.3;color:#167D7B;background:#EDF5F4;padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.capa-chip--alerta {background:#F5F0E6;color:#80652D}
.capa-chip--neutro {background:#EEF1F4;color:#536077}
.capa-pe {
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid #EEF1F2;font-size:12px;color:#697788;
}
.capa-avatar {
  width:36px;height:36px;border-radius:50%;background:#167D7B;color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:600;flex-shrink:0;
}
.capa-linhas li {display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #EEF1F2;font-size:12px}
.capa-linhas li:last-child {border-bottom:0;padding-bottom:0}
.capa-linhas strong {flex:1;font-weight:500;min-width:0}
.capa-linhas small {color:#748291;font-size:12px}

/* ---------- skill ---------- */
.capa-titulo {display:inline-flex;align-items:center;gap:8px}
.capa-titulo img {width:22px;height:22px;object-fit:contain}
.capa-receita {display:grid;gap:8px}
.capa-receita li {display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid #E1E6E9;border-radius:10px;font-size:13px}
.capa-receita span {
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#167D7B;color:#fff;
  font-size:12px;font-weight:600;flex-shrink:0;
}

/* ---------- contas a pagar e a receber ---------- */
.capa-saldos {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.capa-saldos div {border:1px solid #E1E6E9;border-radius:10px;padding:10px 12px;display:grid;gap:3px}
.capa-saldos small {font-size:12px;color:#697788}
.capa-saldos strong {font-size:16px;letter-spacing:-.02em}
.capa-saldos i {display:block;height:4px;border-radius:4px;background:#EEF1F2;position:relative;overflow:hidden;margin-top:5px}
.capa-saldos i::after {content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);background:#167D7B;border-radius:inherit;transform-origin:left}
.capa-saldos div + div i::after {background:#C9A461}
.capa-seta {font-size:18px;color:#167D7B;width:18px;text-align:center}

/* ---------- composição do preço ---------- */
.capa-pilha {display:flex;gap:2px;height:28px;border-radius:8px;overflow:hidden;margin-bottom:14px}
.capa-pilha i {flex:var(--p) 1 0;transform-origin:left}
.capa-custo {background:#3A506B}
.capa-imposto {background:#8A97A8}
.capa-comissao {background:#E2B66B}
.capa-lucro {background:#167D7B}
.capa-legenda {display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.capa-legenda li {display:flex;align-items:center;gap:8px;font-size:12px;color:#536077}
.capa-legenda li span {width:10px;height:10px;border-radius:3px;flex-shrink:0}
.capa-legenda b {margin-left:auto;font-weight:600;color:#172136}
.capa-preco {color:#172136;font-size:13px}
.capa-preco strong {font-size:20px;letter-spacing:-.03em}

/* ---------- painel de indicadores ---------- */
.capa-vivo {display:inline-flex;align-items:center;gap:6px;color:#167D7B !important}
.capa-vivo::before {content:"";width:7px;height:7px;border-radius:50%;background:#2BA673}
.capa-kpis {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.capa-kpis div {border:1px solid #E1E6E9;border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.capa-kpis small {font-size:12px;color:#697788}
.capa-kpis strong {font-size:16px;letter-spacing:-.02em}
.capa-kpis em {font-style:normal;font-size:12px;color:#167D7B}
.capa-colunas {display:flex;align-items:stretch;gap:10px;height:84px;margin:14px 0 26px;padding:0 4px;border-bottom:1px solid #E1E6E9}
.capa-colunas span {flex:1;position:relative}
.capa-colunas span::before {
  content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 100%);background:#CFE6E4;
  border-radius:6px 6px 0 0;transform-origin:bottom;
}
.capa-colunas .capa-atual::before {background:#167D7B}
.capa-colunas b {position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;font-size:11px;font-weight:400;color:#748291}
.capa-pergunta {
  display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #E1E6E9;
  border-radius:10px;color:#697788;font-size:12px;
}
.capa-pergunta span {color:#167D7B}

/* ---------- metas do trimestre ---------- */
.capa-progresso {display:grid;gap:16px}
.capa-progresso div {display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.capa-progresso strong {font-weight:500}
.capa-progresso span {color:#167D7B;font-weight:600}
.capa-progresso i {display:block;height:8px;border-radius:8px;background:#EEF1F2;position:relative}
.capa-progresso b {position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);background:#167D7B;border-radius:inherit;transform-origin:left}
.capa-progresso i::after {
  content:"";position:absolute;top:-4px;bottom:-4px;left:calc(var(--esperado) * 100%);width:2px;
  background:#172136;opacity:.5;border-radius:2px;
}
.capa-atras span {color:#80652D}
.capa-atras b {background:#D9A441}
.capa-legenda-marca::before {content:"";display:inline-block;width:2px;height:10px;background:#172136;opacity:.5;margin-right:6px;vertical-align:-1px}

/* ---------- gargalo da operação ---------- */
.capa-etapas {display:flex;align-items:center}
.capa-etapa {flex:1 1 0;min-width:0;border:1px solid #E1E6E9;border-radius:10px;padding:10px 6px;text-align:center;display:grid;gap:2px}
.capa-etapa strong {font-size:13px}
.capa-etapa small {font-size:11px;color:#697788}
.capa-etapa--trava {border-color:#E7C98F;background:#FBF6EC}
.capa-etapa--trava small {color:#80652D}
.capa-trilho {flex:0 0 28px;height:2px;background:#CFE6E4;position:relative}
.capa-trilho i {position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#167D7B;transform:translateX(10px)}
.capa-trilho i + i {display:none}
.capa-trilho--parado {height:0;background:none;border-top:2px dashed #D5DCE0}
.capa-fila {display:flex;justify-content:center;gap:5px;margin:10px 0 14px}
.capa-fila i {width:8px;height:8px;border-radius:50%;background:#E7C98F}
.capa-decisao {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.capa-decisao > div {border:1px solid #E1E6E9;border-radius:10px;padding:10px 12px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.capa-decisao > div:first-child {background:#EDF5F4;border-color:#DAE7E6}
.capa-decisao small {flex-basis:100%;font-size:11px;color:#697788}
.capa-decisao strong {font-size:13px;color:#167D7B}
.capa-decisao span {font-size:12px;color:#536077;background:#EEF1F4;padding:3px 8px;border-radius:6px}

/* ---------- cadastro duplicado ---------- */
.capa-duplos {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.capa-ficha {border:1px dashed #C9D2D8;border-radius:10px;padding:10px 12px;display:grid;gap:2px;opacity:.6;min-width:0;overflow-wrap:anywhere}
.capa-ficha small {font-size:11px;color:#80652D}
.capa-ficha strong {font-size:13px}
.capa-ficha span {font-size:12px;color:#697788}
.capa-une {display:flex;justify-content:center;margin:10px 0}
.capa-une span {font-size:12px;color:#167D7B;background:#EDF5F4;border-radius:999px;padding:4px 10px}
.capa-une span::before {content:"↓ "}
.capa-unico {display:flex;align-items:center;gap:12px;border:1px solid #CFE6E4;background:#F6FBFA;border-radius:12px;padding:12px 14px}
.capa-unico > div {flex:1;display:grid;gap:6px;min-width:0}
.capa-unico strong {font-size:14px}
.capa-trilha {display:flex;gap:4px;flex-wrap:wrap}
.capa-trilha i {font-style:normal;font-size:11px;color:#536077;background:#fff;border:1px solid #E1E6E9;border-radius:6px;padding:2px 7px}

/* ---------- cadência de follow-up ---------- */
.capa-passos {display:grid;gap:14px}
.capa-passos li {position:relative;display:flex;align-items:center;gap:12px}
.capa-passos li:not(:last-child)::before,
.capa-passos li.capa-feito::after {
  content:"";position:absolute;left:11px;top:calc(50% + 12px);height:calc(100% - 10px);width:2px;background:#E1E6E9;
}
.capa-passos li.capa-feito::after {background:#167D7B;transform-origin:top}
.capa-no {
  width:24px;height:24px;border-radius:50%;border:2px solid #D5DCE0;background:#fff;display:grid;place-items:center;
  font-size:12px;color:#fff;flex-shrink:0;box-sizing:border-box;position:relative;z-index:1;
}
.capa-feito .capa-no {background:#167D7B;border-color:#167D7B}
.capa-agora .capa-no {border-color:#167D7B}
.capa-agora .capa-no::after {content:"";width:8px;height:8px;border-radius:50%;background:#167D7B}
.capa-passos div {display:grid;gap:2px}
.capa-passos strong {font-size:14px;font-weight:500}
.capa-passos small {font-size:12px;color:#697788}
.capa-agora strong {color:#167D7B}

/* ---------- tempo de resposta ---------- */
.capa-medidor {display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid #EEF1F2}
.capa-medidor svg {width:64px;height:64px;transform:rotate(-90deg);flex-shrink:0}
.capa-aro,.capa-arco {fill:none;stroke-width:7}
.capa-aro {stroke:#EEF1F2}
.capa-arco {stroke:#167D7B;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:28}
.capa-medidor strong {display:block;font-size:22px;letter-spacing:-.03em}
.capa-medidor small {font-size:12px;color:#697788}

/* ---------- onboarding ---------- */
.capa-pessoa {display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #E1E6E9;border-radius:12px;margin-bottom:8px}
.capa-pessoa > div {flex:1;display:grid;gap:2px;min-width:0}
.capa-pessoa strong {font-size:14px}
.capa-pessoa small {font-size:12px;color:#697788}
.capa-check li {display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #EEF1F2;font-size:13px}
.capa-check li:last-child {border-bottom:0;padding-bottom:0}
.capa-check li span {
  width:20px;height:20px;border-radius:6px;border:1.5px solid #C9D2D8;display:grid;place-items:center;
  font-size:12px;color:#fff;flex-shrink:0;box-sizing:border-box;
}
.capa-check .capa-feito {color:#536077}
.capa-check .capa-feito span {background:#167D7B;border-color:#167D7B}

/* ---------- faixas salariais ---------- */
.capa-faixa {display:grid;gap:14px}
.capa-faixa div {display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.capa-faixa strong {font-size:13px;font-weight:500}
.capa-faixa small {font-size:12px;color:#697788}
.capa-faixa i {display:block;height:10px;border-radius:6px;background:#EEF1F2;position:relative}
.capa-faixa b {
  position:absolute;top:0;bottom:0;left:calc(var(--de) * 100%);width:calc((var(--ate) - var(--de)) * 100%);
  background:#167D7B;border-radius:inherit;
}

/* Etiqueta do rascunho, que só aparece no índice do `npm run dev`. */
.col-rascunho {color:#80652D;background:#F5F0E6;padding:2px 8px;border-radius:6px}

@media(max-width:600px) {
  .capa {padding:16px}
  .capa-trilho {flex-basis:16px}
  .capa-legenda {grid-template-columns:1fr}
  .capa-decisao {grid-template-columns:1fr}
}

/* ================= animação ================= */
:root {--capa-ease:cubic-bezier(.22,1,.36,1)}
.capas-animadas .blog-cover:not(.is-in) *,
.capas-animadas .blog-cover:not(.is-in) *::before,
.capas-animadas .blog-cover:not(.is-in) *::after {animation-play-state:paused !important}
.blog-cover.is-reset *,.blog-cover.is-reset *::before,.blog-cover.is-reset *::after {animation:none !important}
/* O site.css pausa tudo de uma <section> sem `.in-view`, e o site.js só marca
   a seção quando 10% DELA aparece: a lista do blog é alta demais para isso.
   Quem manda na capa é o `.is-in` dela. */
.capas-animadas .blog-cover.is-in * {animation-play-state:running !important}

/* Ordem dentro de cada lista: a posição vira o atraso. */
:is(.capa-linhas,.capa-receita,.capa-progresso,.capa-passos,.capa-check,.capa-faixa,.capa-legenda,.capa-fila,
  .capa-colunas,.capa-etapas,.capa-saldos,.capa-kpis,.capa-trilha,.capa-pilha,.capa-decisao,
  .blog-visual-flow,.blog-visual-finance) > * {--i:0}
:is(.capa-linhas,.capa-receita,.capa-progresso,.capa-passos,.capa-check,.capa-faixa,.capa-legenda,.capa-fila,
  .capa-colunas,.capa-etapas,.capa-saldos,.capa-kpis,.capa-trilha,.capa-pilha,.capa-decisao,
  .blog-visual-flow,.blog-visual-finance) > :nth-child(2) {--i:1}
:is(.capa-linhas,.capa-receita,.capa-progresso,.capa-passos,.capa-check,.capa-faixa,.capa-legenda,.capa-fila,
  .capa-colunas,.capa-etapas,.capa-saldos,.capa-kpis,.capa-trilha,.capa-pilha,.capa-decisao,
  .blog-visual-flow,.blog-visual-finance) > :nth-child(3) {--i:2}
:is(.capa-linhas,.capa-receita,.capa-progresso,.capa-passos,.capa-check,.capa-faixa,.capa-legenda,.capa-fila,
  .capa-colunas,.capa-etapas,.capa-pilha,.blog-visual-flow,.blog-visual-finance) > :nth-child(4) {--i:3}
:is(.capa-fila,.capa-colunas,.capa-etapas,.blog-visual-flow,.blog-visual-finance) > :nth-child(5) {--i:4}
:is(.capa-fila,.capa-colunas,.blog-visual-flow,.blog-visual-finance) > :nth-child(6) {--i:5}

@keyframes capa-sobe {from {opacity:0;transform:translateY(10px)}}
@keyframes capa-entra-esq {from {opacity:0;transform:translateX(-14px)}}
@keyframes capa-entra-dir {from {opacity:0;transform:translateX(14px)}}
@keyframes capa-pop {from {opacity:0;transform:scale(.6)} 70% {opacity:1;transform:scale(1.08)}}
@keyframes capa-enche-x {from {transform:scaleX(0)}}
@keyframes capa-enche-y {from {transform:scaleY(0)}}
@keyframes capa-aparece {from {opacity:0}}
@keyframes capa-acende {from {background:#EEF1F2;color:#9AA6B2}}
@keyframes capa-arco {from {stroke-dashoffset:100}}
@keyframes capa-pisca {50% {opacity:.25}}
@keyframes capa-chama {50% {box-shadow:0 0 0 4px #F5F0E6}}
@keyframes capa-onda {50% {box-shadow:0 0 0 6px #167D7B26}}
@keyframes capa-anda {
  from {transform:translateX(-4px);opacity:0}
  25%,75% {opacity:1}
  to {transform:translateX(24px);opacity:0}
}
@keyframes capa-funde-esq {
  from {opacity:0;transform:translateX(-18px)}
  35% {opacity:1;transform:none}
  70% {opacity:1;transform:translateX(6px)}
}
@keyframes capa-funde-dir {
  from {opacity:0;transform:translateX(18px)}
  35% {opacity:1;transform:none}
  70% {opacity:1;transform:translateX(-6px)}
}

/* conversa com o Marvin */
.capas-animadas .blog-chat-user {animation:capa-entra-dir .55s var(--capa-ease) .2s both}
.capas-animadas .blog-chat-answer {animation:capa-sobe .55s var(--capa-ease) .8s both}
.capas-animadas .blog-chat-task {animation:capa-pop .5s var(--capa-ease) 1.25s both}
.capas-animadas .blog-chat-confirm {animation:capa-pop .45s var(--capa-ease) 1.7s both}

/* da conversa à execução */
.capas-animadas .blog-visual-flow > :not(.visual-top) {animation:capa-sobe .5s var(--capa-ease) calc(var(--i) * .3s - .2s) both}
.capas-animadas .flow-process {animation:capa-pop .5s var(--capa-ease) .7s both,capa-onda 2.4s ease-in-out 2s infinite}
.capas-animadas .flow-result > span {animation:capa-pop .45s var(--capa-ease) 1.5s both}

/* rotina financeira */
.capas-animadas .blog-visual-finance .finance-line {animation:capa-entra-esq .5s var(--capa-ease) calc(var(--i) * .15s - .1s) both}
.capas-animadas .blog-visual-finance .finance-status {animation:capa-pop .45s var(--capa-ease) calc(var(--i) * .15s + .4s) both}
.capas-animadas .blog-visual-finance .finance-status.pending {animation:capa-pop .45s var(--capa-ease) .85s both,capa-chama 2.4s ease-in-out 2s infinite}
.capas-animadas .finance-foot > span:last-child {display:inline-block;animation:capa-pop .45s var(--capa-ease) 1.3s both}

/* skill */
.capas-animadas .capa-receita li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .18s + .1s) both}
.capas-animadas .capa-receita span {animation:capa-acende .3s ease calc(var(--i) * .18s + .45s) both}
.capas-animadas .capa-skill .capa-chip {display:inline-block;animation:capa-pop .45s var(--capa-ease) 1.25s both}

/* contas */
.capas-animadas .capa-saldos > div {animation:capa-sobe .5s var(--capa-ease) calc(var(--i) * .12s + .1s) both}
.capas-animadas .capa-saldos i::after {animation:capa-enche-x .9s var(--capa-ease) .45s both}
.capas-animadas .capa-contas .capa-linhas li {animation:capa-entra-esq .5s var(--capa-ease) calc(var(--i) * .15s + .5s) both}
.capas-animadas .capa-contas .capa-chip {display:inline-block;animation:capa-pop .45s var(--capa-ease) calc(var(--i, 0) * .15s + .9s) both}
.capas-animadas .capa-contas li:nth-child(2) .capa-chip {animation:capa-pop .45s var(--capa-ease) 1.05s both,capa-chama 2.4s ease-in-out 2.2s infinite}

/* preço */
.capas-animadas .capa-pilha i {animation:capa-enche-x .45s var(--capa-ease) calc(var(--i) * .3s + .15s) both}
.capas-animadas .capa-legenda li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .3s + .3s) both}
.capas-animadas .capa-preco strong {display:inline-block;animation:capa-pop .5s var(--capa-ease) 1.5s both}

/* painel */
.capas-animadas .capa-vivo::before {animation:capa-pisca 1.6s ease-in-out infinite}
.capas-animadas .capa-kpis > div {animation:capa-sobe .5s var(--capa-ease) calc(var(--i) * .12s + .1s) both}
.capas-animadas .capa-colunas span::before {animation:capa-enche-y .6s var(--capa-ease) calc(var(--i) * .09s + .4s) both}
.capas-animadas .capa-pergunta {animation:capa-sobe .5s var(--capa-ease) 1.15s both}

/* metas */
.capas-animadas .capa-progresso li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .15s + .1s) both}
.capas-animadas .capa-progresso b {animation:capa-enche-x 1s var(--capa-ease) calc(var(--i) * .15s + .4s) both}
.capas-animadas .capa-progresso i::after {animation:capa-aparece .4s ease 1.4s both}

/* gargalo */
.capas-animadas .capa-etapa {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .1s + .1s) both}
.capas-animadas .capa-trilho i {display:block;animation:capa-anda 1.6s linear infinite}
.capas-animadas .capa-trilho i + i {animation-delay:.8s}
.capas-animadas .capa-fila i {animation:capa-pop .35s var(--capa-ease) calc(var(--i) * .1s + .6s) both}
.capas-animadas .capa-decisao > div {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .15s + 1.25s) both}

/* cadastro */
.capas-animadas .capa-ficha:first-child {animation:capa-funde-esq 1.1s var(--capa-ease) .1s both}
.capas-animadas .capa-ficha:last-child {animation:capa-funde-dir 1.1s var(--capa-ease) .1s both}
.capas-animadas .capa-une span {display:inline-block;animation:capa-pop .45s var(--capa-ease) 1s both}
.capas-animadas .capa-unico {animation:capa-sobe .5s var(--capa-ease) 1.25s both}
.capas-animadas .capa-trilha i {animation:capa-pop .35s var(--capa-ease) calc(var(--i) * .12s + 1.55s) both}

/* cadência */
.capas-animadas .capa-passos li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .3s + .1s) both}
.capas-animadas .capa-passos li.capa-feito::after {animation:capa-enche-y .3s ease-out calc(var(--i) * .3s + .45s) both}
.capas-animadas .capa-agora .capa-no {animation:capa-onda 2s ease-in-out 1.4s infinite}

/* tempo de resposta */
.capas-animadas .capa-arco {animation:capa-arco 1.2s var(--capa-ease) .2s both}
.capas-animadas .capa-medidor > div {animation:capa-sobe .5s var(--capa-ease) .3s both}
.capas-animadas .capa-atendimento .capa-linhas li {animation:capa-entra-esq .5s var(--capa-ease) calc(var(--i) * .15s + .6s) both}
.capas-animadas .capa-atendimento .capa-chip--alerta {display:inline-block;animation:capa-chama 2.4s ease-in-out 1.8s infinite}

/* onboarding */
.capas-animadas .capa-pessoa {animation:capa-sobe .5s var(--capa-ease) .1s both}
.capas-animadas .capa-check li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .12s + .3s) both}
.capas-animadas .capa-check .capa-feito span {animation:capa-pop .4s var(--capa-ease) calc(var(--i) * .25s + .9s) both}
.capas-animadas .capa-pessoa .capa-chip {display:inline-block;animation:capa-pop .45s var(--capa-ease) 1.45s both}

/* faixas */
.capas-animadas .capa-faixa li {animation:capa-sobe .45s var(--capa-ease) calc(var(--i) * .15s + .1s) both}
.capas-animadas .capa-faixa b {animation:capa-enche-x .8s var(--capa-ease) calc(var(--i) * .15s + .4s) both}
.capas-animadas .capa-faixas .capa-chip {display:inline-block;animation:capa-pop .45s var(--capa-ease) 1.3s both}