/* ==========================================================================
   Report Deck · base compartilhada
   Toda a estrutura visual do deck (ritmo claro/escuro, chrome, tipografia,
   superfícies e os layouts de cada slide) vive aqui uma vez só. O que muda de
   um template para outro é apenas a paleta: cada template-N.css importa este
   arquivo e declara as custom properties --tpl-*.

   Por isso as regras usam o seletor [data-template^="template-"] — elas valem
   para template-1, template-2 e qualquer variante futura. Nenhuma cor literal
   de marca deve entrar aqui; se precisar de um tom novo, crie a variável.
   ========================================================================== */

[data-template^="template-"] body { background: var(--bg); color: var(--white); }
[data-template^="template-"] ::selection { background: rgba(var(--tpl-glow-rgb), .35); }
[data-template^="template-"] #neural-bg { opacity: .42; }

/* ==========================================================================
   Ritmo claro/escuro
   Slides de impacto (abertura, transições, frases, fechamento) ficam pretos;
   slides de conteúdo viram papel. As variáveis são reescopadas no próprio
   .slide, então tudo que está dentro dele herda a paleta certa.
   ========================================================================== */
[data-template^="template-"] #s-poll1,
[data-template^="template-"] #s-situacao,
[data-template^="template-"] #s-esteira,
[data-template^="template-"] #s-problema,
[data-template^="template-"] #s-caminhos,
[data-template^="template-"] #s-impactos,
[data-template^="template-"] #s-calc,
[data-template^="template-"] #s-aifirst,
[data-template^="template-"] #s-aplopes,
[data-template^="template-"] #s-antesdepois,
[data-template^="template-"] #s-poll-segmento,
[data-template^="template-"] .case-slide,
[data-template^="template-"] #s-qa {
  --paper: #FFFFFF;
  --navy: #FFFFFF;
  --navy-2: var(--tpl-paper-2);
  --line: rgba(var(--tpl-text-rgb), .12);
  --line-strong: rgba(var(--tpl-text-rgb), .24);
  --white: var(--tpl-text);
  --gray: var(--tpl-text-2);
  --gray-dark: var(--tpl-text-3);
  --green: #15A34A;
  --green-deep: #12833C;
  --gold: var(--tpl-600);
  --gold-deep: var(--tpl-650);
  --danger: #DC2626;
  --warn: #B45309;
  --shadow: 0 20px 50px rgba(var(--tpl-text-rgb), .12);

  background: var(--tpl-paper);
  color: var(--white);
}

/* textura discreta de papel: o slide claro tampa o canvas neural,
   então a profundidade vem de um brilho quente muito baixo */
[data-template^="template-"] #s-poll1::before,
[data-template^="template-"] #s-situacao::before,
[data-template^="template-"] #s-esteira::before,
[data-template^="template-"] #s-problema::before,
[data-template^="template-"] #s-caminhos::before,
[data-template^="template-"] #s-impactos::before,
[data-template^="template-"] #s-calc::before,
[data-template^="template-"] #s-aifirst::before,
[data-template^="template-"] #s-aplopes::before,
[data-template^="template-"] #s-antesdepois::before,
[data-template^="template-"] #s-poll-segmento::before,
[data-template^="template-"] .case-slide::before,
[data-template^="template-"] #s-qa::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(var(--tpl-glow-rgb), .07), transparent 70%),
    radial-gradient(700px 480px at 4% 96%, rgba(var(--tpl-text-rgb), .05), transparent 72%);
}

/* slides pretos ganham a mesma respiração, em laranja mais quente */
[data-template^="template-"] #s-hero::before,
[data-template^="template-"] #s-quote-contratar::before,
[data-template^="template-"] #s-perguntas-publico::before,
[data-template^="template-"] #s-fechamento::before,
[data-template^="template-"] #s-qr-final::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(1000px 620px at 82% 12%, rgba(var(--tpl-glow-rgb), .16), transparent 68%);
}

/* ==========================================================================
   Chrome flutuante — nav, barra do apresentador, rodapé
   Fica por cima de slides claros E escuros, então tem paleta própria:
   pills pretas sólidas, como as do deck original.
   ========================================================================== */
[data-template^="template-"] #progress-bar { background: rgba(255, 255, 255, .10); }
[data-template^="template-"] #progress-fill {
  background: var(--flame);
  box-shadow: 0 0 14px rgba(var(--tpl-glow-rgb), .55);
}
[data-template^="template-"] #top-nav {
  background: none;
  padding-top: 14px;
}
[data-template^="template-"] .nav-brand {
  background: var(--tpl-text); color: #FAFAFA;
  padding: 9px 18px 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  letter-spacing: -.2px;
}
[data-template^="template-"] .brand-thin { color: rgba(250, 250, 250, .55); }
[data-template^="template-"] .brand-dot {
  background: var(--flame);
  box-shadow: 0 0 12px rgba(var(--tpl-glow-rgb), .7);
}
[data-template^="template-"] .nav-links {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 4px 6px;
  gap: 1px;
  box-shadow: 0 8px 24px rgba(var(--tpl-text-rgb), .06);
  opacity: .22;
  transition: opacity .35s ease;
}
[data-template^="template-"] .nav-links:hover {
  opacity: 1;
}
[data-template^="template-"] .nav-links button {
  color: rgba(var(--tpl-text-rgb), .55);
  text-transform: none; letter-spacing: -.1px; font-size: 13.5px; font-weight: 600;
  padding: 7px 14px;
  transition: color .25s, background .25s;
}
[data-template^="template-"] .nav-links button:hover { color: var(--tpl-text); }
[data-template^="template-"] .nav-links button.active {
  color: #FFFFFF; background: var(--flame);
}
[data-template^="template-"] #timer {
  background: var(--tpl-text); color: rgba(250, 250, 250, .7);
  border-color: rgba(255, 255, 255, .12);
  letter-spacing: -.2px;
}
[data-template^="template-"] #timer.running { color: #4ADE80; border-color: rgba(74, 222, 128, .5); }
[data-template^="template-"] #timer.warning { color: #FBBF24; border-color: rgba(251, 191, 36, .55); }
[data-template^="template-"] #timer.danger { color: #F87171; border-color: rgba(248, 113, 113, .6); }

[data-template^="template-"] #presenter-bar {
  background: rgba(var(--tpl-text-rgb), .94); backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
[data-template^="template-"] #presenter-bar button { color: rgba(250, 250, 250, .6); }
[data-template^="template-"] #presenter-bar button:hover { background: rgba(255, 255, 255, .12); color: #FAFAFA; }
[data-template^="template-"] #slide-indicator { color: rgba(250, 250, 250, .6); }
[data-template^="template-"] .pb-sep { background: rgba(255, 255, 255, .18); }

/* numeração de slide como no deck: discreta, em pill preta */
[data-template^="template-"] #section-label {
  background: rgba(var(--tpl-text-rgb), .9);
  color: rgba(250, 250, 250, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 6px 14px; border-radius: 999px;
  text-transform: none; letter-spacing: .2px; font-weight: 600;
}

/* ---------- mídia de fundo: véu preto, imagem dessaturada ---------- */
[data-template^="template-"] .media-veil {
  background: linear-gradient(100deg, rgba(11, 11, 12, .95) 24%, rgba(11, 11, 12, .62) 62%, rgba(11, 11, 12, .88));
}
[data-template^="template-"] .media-veil.heavy { background: rgba(11, 11, 12, .90); }
[data-template^="template-"] .media-bg video,
[data-template^="template-"] .media-bg .media-fallback { filter: saturate(.35) contrast(1.05); }
[data-template^="template-"] .media-bg.dim video,
[data-template^="template-"] .media-bg.dim .media-fallback { opacity: .32; }

/* ==========================================================================
   Tipografia — grotesca pesada, tracking negativo, títulos enormes
   ========================================================================== */
/* peso 500 e tracking -5%: é assim no design system do deck (Headline 64/110%).
   O impacto vem do tamanho e do respiro, não do peso — 800 deixa pesado demais. */
[data-template^="template-"] h1,
[data-template^="template-"] h2 {
  font-weight: 500; letter-spacing: -.05em; line-height: 1.1;
}
/* títulos: contidos nos slides de conteúdo (que já são densos) e enormes
   nos slides de impacto, onde o texto é o único elemento da tela */
[data-template^="template-"] h2 { font-size: clamp(29px, 3.9vw, 50px); }
[data-template^="template-"] .content.center h2,
[data-template^="template-"] .hero-content h2 { font-size: clamp(34px, 4.8vw, 62px); }
[data-template^="template-"] .hero-title { font-size: clamp(40px, 5.8vw, 82px); }
[data-template^="template-"] .t-slide .t-title { font-size: clamp(34px, 5vw, 66px); }

[data-template^="template-"] .kicker {
  color: var(--gray); display: flex; align-items: center; gap: 12px;
  letter-spacing: .18em; font-size: 11.5px; font-weight: 700;
}
[data-template^="template-"] .kicker::before {
  content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px;
  background: var(--flame);
}
[data-template^="template-"] .content.center .kicker { justify-content: center; }

/* o acento tipográfico é o gradiente laranja — usado só nos <em> dos títulos */
[data-template^="template-"] h2 em,
[data-template^="template-"] h1 em,
[data-template^="template-"] .gold-text,
[data-template^="template-"] .grow-text em {
  background: var(--flame);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-template^="template-"] .hero-sub,
[data-template^="template-"] .lead { letter-spacing: -.01em; }

/* ---------- botões ---------- */
[data-template^="template-"] .btn-primary {
  background: var(--flame); color: #FFFFFF;
  box-shadow: 0 14px 34px rgba(var(--tpl-glow-rgb), .34);
}
[data-template^="template-"] .btn-primary:hover { box-shadow: 0 18px 46px rgba(var(--tpl-glow-rgb), .46); }
[data-template^="template-"] .btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid var(--line-strong);
}

/* ---------- hero ---------- */
[data-template^="template-"] .hero-orbit span {
  background: rgba(255, 255, 255, .05); border-color: var(--line); color: var(--gray);
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   Superfícies — cartões de borda fina, o padrão do deck inteiro
   ========================================================================== */
[data-template^="template-"] .poll-board,
[data-template^="template-"] .qr-big,
[data-template^="template-"] .question-list li,
[data-template^="template-"] .belt-item,
[data-template^="template-"] .calc-card,
[data-template^="template-"] .agent-card,
[data-template^="template-"] .final-col,
[data-template^="template-"] .qa-card {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}
[data-template^="template-"] .poll-board,
[data-template^="template-"] .qr-big { box-shadow: var(--shadow); }

/* ---------- QR ---------- */
[data-template^="template-"] .qr-img { border: 1px solid var(--line-strong); }
[data-template^="template-"] .qr-caption span { color: var(--gold); }
[data-template^="template-"] .qr-big { border-color: var(--line-strong); }
[data-template^="template-"] .qr-big span { color: var(--gold); }

/* ---------- enquete ---------- */
[data-template^="template-"] .poll-bar .pb-track { background: rgba(128, 128, 132, .18); }
[data-template^="template-"] .poll-bar .pb-fill { background: linear-gradient(90deg, rgba(var(--tpl-glow-rgb), .5), rgba(255, 164, 92, .75)); }
[data-template^="template-"] .poll-bar.top .pb-fill { background: var(--flame); box-shadow: 0 0 16px rgba(var(--tpl-glow-rgb), .4); }
[data-template^="template-"] .poll-bar .pb-value { color: var(--gold); }

/* ---------- citações ---------- */
[data-template^="template-"] .callout {
  border-left-color: var(--blue);
  background: var(--flame-soft);
  color: var(--gray);
}
[data-template^="template-"] .callout.gold { border-color: var(--blue); }
[data-template^="template-"] .big-quote em { color: var(--cyan); }

/* ---------- situação / esteira ---------- */
[data-template^="template-"] .q-num { color: var(--gold); }
[data-template^="template-"] #s-situacao .situacao__stat {
  border-right-color: rgba(var(--tpl-text-rgb), .12);
}
[data-template^="template-"] #s-situacao .situacao__stat-num {
  color: var(--tpl-500);
}
[data-template^="template-"] #s-situacao .situacao__item {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(var(--tpl-text-rgb), .10);
  box-shadow: 0 10px 28px rgba(var(--tpl-text-rgb), .04);
}
[data-template^="template-"] #s-situacao .situacao__num { color: var(--tpl-600); }
[data-template^="template-"] #s-situacao .situacao__tag { color: var(--tpl-text); }
[data-template^="template-"] #s-situacao .situacao__item p { color: var(--tpl-text-2); }
[data-template^="template-"] #s-situacao .situacao__item strong { color: var(--tpl-text); }
[data-template^="template-"] #s-situacao .situacao__item-aside {
  border-left-color: rgba(var(--tpl-text-rgb), .10);
  background: rgba(var(--tpl-core-rgb), .06);
}
[data-template^="template-"] #s-situacao .situacao__aside-label { color: var(--tpl-600); }
[data-template^="template-"] #s-situacao .situacao__pillars strong { color: var(--tpl-text); }
[data-template^="template-"] #s-situacao .situacao__pillars span { color: var(--tpl-text-2); }
[data-template^="template-"] #s-situacao .situacao__punch {
  border-top-color: rgba(var(--tpl-text-rgb), .12);
  color: var(--tpl-text);
}
[data-template^="template-"] #s-situacao .situacao__punch em { color: var(--tpl-600); }
[data-template^="template-"] .belt-ico,
[data-template^="template-"] .agent-ico { border-color: var(--line); box-shadow: none; }
[data-template^="template-"] .belt-item.warn { border-color: rgba(180, 83, 9, .45); }
[data-template^="template-"] .belt-item.bad { border-color: rgba(220, 38, 38, .45); }
[data-template^="template-"] .belt-item.warn::after,
[data-template^="template-"] .belt-item.bad::after { box-shadow: none; }
[data-template^="template-"] .owner-node {
  background: var(--flame); color: #FFFFFF;
  border-color: transparent; box-shadow: 0 16px 40px rgba(var(--tpl-glow-rgb), .35);
}

/* ---------- dores (#s-problema) ----------
   O componente vem em papel escuro por padrão; aqui ele passa para o papel
   claro do deck: neutros de tinta e o Vermilion escurecido para segurar
   contraste sobre fundo claro. */
[data-template^="template-"] #s-problema {
  --dor-accent: var(--tpl-500);
  --dor-accent-deep: var(--tpl-600);
}
[data-template^="template-"] #s-problema .dores__list::after,
[data-template^="template-"] #s-problema .dores__item {
  border-color: rgba(var(--tpl-text-rgb), .12);
}
[data-template^="template-"] #s-problema .dores__list::after {
  background: rgba(var(--tpl-text-rgb), .12);
}
[data-template^="template-"] #s-problema .dores__item::before,
[data-template^="template-"] #s-problema .dores__legend i { background: var(--tpl-600); }
[data-template^="template-"] #s-problema .dores__index-num,
[data-template^="template-"] #s-problema .dores__item strong,
[data-template^="template-"] #s-problema .dores__punch p { color: var(--tpl-text); }
[data-template^="template-"] #s-problema .dores__n,
[data-template^="template-"] #s-problema .dores__area { color: var(--tpl-text-3); }
[data-template^="template-"] #s-problema .dores__note,
[data-template^="template-"] #s-problema .dores__index-label,
[data-template^="template-"] #s-problema .dores__legend { color: var(--tpl-text-2); }
[data-template^="template-"] #s-problema .dores__punch { border-top-color: rgba(var(--tpl-text-rgb), .12); }

/* ---------- citação de impacto (#s-quote-contratar) ----------
   O slide de quote do deck é preto puro com faixas de luz no topo: o canvas
   neural e o glow radial padrão dos slides escuros são desligados aqui para
   a luz vir só das faixas. */
[data-template^="template-"] #s-quote-contratar {
  background: var(--tpl-ink-deep);
  --quote-flare: var(--tpl-core);
  --quote-flare-hot: var(--tpl-100);
}
[data-template^="template-"] #s-quote-contratar::before {
  z-index: 1;
  /* vinheta: fecha os cantos e joga o olho para o centro da frase */
  background: radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0, 0, 0, .72) 100%);
}
[data-template^="template-"] #s-quote-contratar .quote__text { color: #F6F6F6; }
[data-template^="template-"] #s-quote-contratar .quote__text em { color: var(--tpl-200); }
[data-template^="template-"] #s-quote-contratar .quote__source { color: #888888; }
[data-template^="template-"] #s-quote-contratar .quote__fact svg { stroke: #F6F6F6; }
[data-template^="template-"] #s-quote-contratar .quote__fact h3 { color: #F6F6F6; }
[data-template^="template-"] #s-quote-contratar .quote__fact p { color: #888888; }

/* ---------- dois caminhos (#s-caminhos) ----------
   Painel esquerdo em papel, painel direito preto: é a mesma alternância
   clara/escura que o deck usa nos cartões dos casos. */
[data-template^="template-"] #s-caminhos {
  --cm-accent: var(--tpl-600);
  --cm-accent-soft: rgba(var(--tpl-500-rgb), .14);
}
[data-template^="template-"] #s-caminhos .caminho--old {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(var(--tpl-text-rgb), .1);
  box-shadow: 0 10px 28px rgba(var(--tpl-text-rgb), .04);
}
[data-template^="template-"] #s-caminhos .caminho--old .cm-area { fill: rgba(var(--tpl-text-rgb), .09); }
[data-template^="template-"] #s-caminhos .caminho--old .cm-line--rev { stroke: var(--tpl-text); }
[data-template^="template-"] #s-caminhos .caminho--old .cm-line--cost { stroke: var(--tpl-text); }
[data-template^="template-"] #s-caminhos .caminho--new .cm-line--cost { stroke: var(--tpl-400); }
[data-template^="template-"] #s-caminhos .caminho--new .caminho__margin { color: var(--tpl-400); }
[data-template^="template-"] #s-caminhos .caminho--new .caminho__flow li:last-child,
[data-template^="template-"] #s-caminhos .caminho--new .caminho__note strong { color: var(--tpl-400); }
[data-template^="template-"] #s-caminhos .caminho__note { border-top-color: rgba(var(--tpl-text-rgb), .12); }
[data-template^="template-"] #s-caminhos .caminho--new .caminho__note { border-top-color: rgba(255, 255, 255, .14); }
[data-template^="template-"] #s-caminhos .caminhos__punch { border-top-color: rgba(var(--tpl-text-rgb), .12); }

/* ---------- perguntas ao público (#s-perguntas-publico) ----------
   Slide preto: o acento vai para o Vermilion claro, que é o que sobrevive
   ao contraste no fundo escuro. */
[data-template^="template-"] #s-perguntas-publico { --pg-accent: var(--tpl-200); }
[data-template^="template-"] #s-perguntas-publico .pergunta__field i {
  border-bottom-color: rgba(var(--tpl-200-rgb), .62);
}

/* ---------- transição final (#s-t5) ---------- */
[data-template^="template-"] #s-t5 { background: var(--tpl-ink-deep); }
[data-template^="template-"] #s-t5::before { background: none; }

/* ---------- transições ---------- */
[data-template^="template-"] .falling-tasks span {
  background: rgba(255, 255, 255, .05); border-color: var(--line-strong); backdrop-filter: blur(4px);
}
[data-template^="template-"] .leak-coin {
  color: #FFFFFF; background: var(--flame);
  box-shadow: 0 8px 22px rgba(var(--tpl-glow-rgb), .45);
}
[data-template^="template-"] .seal-ring {
  border-color: rgba(var(--tpl-glow-rgb), .8);
  box-shadow: 0 0 44px rgba(var(--tpl-glow-rgb), .35), inset 0 0 26px rgba(var(--tpl-glow-rgb), .18);
}
[data-template^="template-"] .seal-core {
  background: var(--tpl-surface); border-color: rgba(var(--tpl-glow-rgb), .6); color: var(--cyan);
}
[data-template^="template-"] .net-node {
  background: rgba(255, 255, 255, .05); border-color: rgba(var(--tpl-glow-rgb), .45);
  box-shadow: none; backdrop-filter: blur(4px);
}
@keyframes node-glow-flame {
  50% { border-color: rgba(255, 164, 92, .95); box-shadow: 0 0 30px rgba(var(--tpl-glow-rgb), .45); }
}
[data-template^="template-"] .slide.active .net-node { animation-name: node-glow-flame; }

/* ---------- impactos (#s-impactos) ----------
   Slide de papel: a cascata usa tinta para o que chega e para o que sobra,
   e o Vermilion só para as perdas. */
[data-template^="template-"] #s-impactos { --im-accent: var(--tpl-600); }
[data-template^="template-"] #s-impactos .cascata__track { background: rgba(var(--tpl-text-rgb), .06); }
[data-template^="template-"] #s-impactos .cascata__row.is-loss .cascata__track { background: none; }
[data-template^="template-"] #s-impactos .cascata__track i { background: var(--tpl-text); }
[data-template^="template-"] #s-impactos .cascata__row.is-loss .cascata__track i { background: var(--tpl-500); }
[data-template^="template-"] #s-impactos .cascata__row.is-loss .cascata__val { color: var(--tpl-600); }
[data-template^="template-"] #s-impactos .impactos__item.is-primary h3 { color: var(--tpl-600); }

/* ---------- calculadora: os big numbers do deck ---------- */
[data-template^="template-"] .calc-form input {
  background: var(--navy-2); border-color: var(--line-strong); color: var(--white);
}
[data-template^="template-"] .calc-form input:focus { border-color: var(--blue); }
[data-template^="template-"] .calc-value {
  font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; letter-spacing: -.07em;
}
[data-template^="template-"] .calc-card.loss { border-color: rgba(220, 38, 38, .4); }
[data-template^="template-"] .calc-card.gain {
  background: var(--flame-soft); border-color: rgba(var(--tpl-glow-rgb), .45);
}
[data-template^="template-"] .calc-live { color: var(--gold); border-top-color: var(--line); }

/* ---------- AI First: ChatGPT × ecossistema (#s-aifirst) ----------
   Slide de papel: o lado da ferramenta fica em tinta neutra e o lado AI First
   é o único que recebe o Vermilion — o contraste é o argumento. */
[data-template^="template-"] #s-aifirst { --ai-accent: var(--tpl-600); }
[data-template^="template-"] #s-aifirst .aifirst__grid::after { background: rgba(var(--tpl-text-rgb), .14); }
[data-template^="template-"] #s-aifirst .via__waffle i { background: rgba(var(--tpl-text-rgb), .09); }
[data-template^="template-"] #s-aifirst .via--old .via__waffle i.on { background: rgba(var(--tpl-text-rgb), .55); }
[data-template^="template-"] #s-aifirst .via--new .via__waffle i.on { background: var(--tpl-500); }
[data-template^="template-"] #s-aifirst .via__pill { border-color: rgba(var(--tpl-text-rgb), .2); }
[data-template^="template-"] #s-aifirst .via--new .via__pill {
  border-color: rgba(var(--tpl-500-rgb), .5); color: var(--tpl-600);
}
[data-template^="template-"] #s-aifirst .aifirst__legend i { background: var(--tpl-500); }
[data-template^="template-"] #s-aifirst .aifirst__punch { border-top-color: rgba(var(--tpl-text-rgb), .12); }

/* ---------- ecossistema de agentes (#s-ecossistema) ----------
   Slide escuro com vídeo ao fundo: o diagrama usa o Vermilion claro, que é o
   que aguenta o contraste sobre a imagem. */
[data-template^="template-"] #s-ecossistema {
  --eco-accent: var(--tpl-200);
  --eco-line: rgba(255, 255, 255, .26);
}
[data-template^="template-"] #s-ecossistema .eco__owner {
  border-color: rgba(var(--tpl-200-rgb), .55);
  background: rgba(var(--tpl-core-rgb), .16);
}
[data-template^="template-"] #s-ecossistema .eco__agent img {
  border-color: rgba(255, 255, 255, .2);
}

/* ---------- agentes / pilares ---------- */
[data-template^="template-"] .chip-cloud span {
  background: var(--navy-2); border-color: var(--line-strong); color: var(--white);
}
[data-template^="template-"] .chip-cloud.small span { border-color: var(--line); color: var(--gray); }
[data-template^="template-"] .agent-card { border-color: var(--line); }
[data-template^="template-"] .agent-card:hover {
  border-color: rgba(var(--tpl-glow-rgb), .55); box-shadow: 0 16px 34px rgba(var(--tpl-glow-rgb), .16);
}

/* ---------- antes e depois (#s-antesdepois) ---------- */
[data-template^="template-"] #s-antesdepois { --ad-accent: var(--tpl-600); }
[data-template^="template-"] #s-antesdepois .ad__row,
[data-template^="template-"] #s-antesdepois .ad__punch { border-top-color: rgba(var(--tpl-text-rgb), .12); }
[data-template^="template-"] #s-antesdepois .ad__arrow { background: rgba(var(--tpl-500-rgb), .45); }
[data-template^="template-"] #s-antesdepois .ad__arrow::after { border-color: var(--tpl-600); }

/* ---------- casos ---------- */

/* ---------- fechamento ---------- */
[data-template^="template-"] .final-col { background: rgba(255, 255, 255, .04); border-color: var(--line); }
[data-template^="template-"] .final-col.after { border-color: rgba(var(--tpl-glow-rgb), .4); background: var(--flame-soft); }
[data-template^="template-"] .final-col.after strong { color: var(--gold); }
[data-template^="template-"] .check-list li::before { color: var(--gold); }
[data-template^="template-"] .lead-count {
  font-size: 68px; font-weight: 400; letter-spacing: -.04em;
  background: var(--flame);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* evita corte do último dígito com background-clip + tracking negativo */
  display: inline-block;
  line-height: 1;
  padding: .06em .18em;
  overflow: visible;
}

/* ---------- Q&A (#s-qa) ----------
   Slide de papel: cartões brancos sobre o fundo bege, acento Vermilion nos
   temas e no filtro ativo. */
[data-template^="template-"] #s-qa { --qa-accent: var(--tpl-600); }
[data-template^="template-"] #s-qa .qa-card,
[data-template^="template-"] #s-qa .qa__action {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(var(--tpl-text-rgb), .1);
  box-shadow: 0 10px 28px rgba(var(--tpl-text-rgb), .04);
}
[data-template^="template-"] #s-qa .qa-filter { border-color: rgba(var(--tpl-text-rgb), .16); }
[data-template^="template-"] #s-qa .qa-filter.active { background: var(--tpl-500); border-color: transparent; }
[data-template^="template-"] #s-qa .qa-actions button { background: rgba(var(--tpl-text-rgb), .07); }
[data-template^="template-"] #s-qa .qa-actions button:hover { background: var(--tpl-500); color: #FFFFFF; }
[data-template^="template-"] #s-qa .qa__count,
[data-template^="template-"] #s-qa .qa-answer { border-top-color: rgba(var(--tpl-text-rgb), .12); }
[data-template^="template-"] #s-qa .qa-board::-webkit-scrollbar-thumb { background: rgba(var(--tpl-text-rgb), .18); }

/* ---------- Q&A (chrome herdado) ---------- */
[data-template^="template-"] .qa-filter { background: var(--paper); border-color: var(--line); color: var(--gray); }
[data-template^="template-"] .qa-filter.active { color: #FFFFFF; border-color: transparent; background: var(--flame); }
[data-template^="template-"] .qa-board::-webkit-scrollbar-thumb { background: var(--line-strong); }
[data-template^="template-"] .qa-card:hover { border-color: rgba(var(--tpl-glow-rgb), .55); }
[data-template^="template-"] .qa-theme { color: var(--gold); }
[data-template^="template-"] .qa-actions button { background: rgba(128, 128, 132, .14); color: var(--gray); }
[data-template^="template-"] .qa-actions button:hover { background: rgba(128, 128, 132, .26); color: var(--white); }
[data-template^="template-"] .qa-answer { border-top-color: var(--line); }
[data-template^="template-"] .qa-highlight {
  background: var(--tpl-text); border-color: rgba(var(--tpl-glow-rgb), .4); box-shadow: var(--shadow);
  --white: #FAFAFA; --gray: #A1A1A6;
}
[data-template^="template-"] .qa-highlight-text { letter-spacing: -.05em; font-weight: 500; }
[data-template^="template-"] .qa-highlight-theme { color: var(--cyan); }
[data-template^="template-"] .qa-highlight-close { background: rgba(255, 255, 255, .12); color: #FAFAFA; }

/* ---------- overlays ---------- */
[data-template^="template-"] .overlay {
  background: rgba(var(--tpl-ink-rgb), .72);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
[data-template^="template-"] .qr-overlay-card {
  background: rgba(var(--tpl-text-rgb), .72);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .5);
  color: #FAFAFA;
}
[data-template^="template-"] .qr-overlay-url { color: var(--gold); }
[data-template^="template-"] .qr-overlay-card .btn-ghost {
  background: rgba(255, 255, 255, .1); color: #FAFAFA;
}
[data-template^="template-"] #notes-panel {
  background: var(--tpl-surface); border-color: rgba(var(--tpl-glow-rgb), .4); box-shadow: var(--shadow);
  --white: #FAFAFA; --gray: #A1A1A6;
}
[data-template^="template-"] .notes-head { color: var(--cyan); }
[data-template^="template-"] #toast {
  background: var(--flame); color: #FFFFFF;
  border-color: transparent; box-shadow: 0 16px 40px rgba(var(--tpl-glow-rgb), .4);
}

/* ---------- dialogs (telão) ---------- */
[data-template^="template-"] .app-dialog {
  background: var(--tpl-surface); color: #FAFAFA; border-color: rgba(255, 255, 255, .16);
}
[data-template^="template-"] .app-dialog::backdrop {
  background: rgba(var(--tpl-ink-rgb), .82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
[data-template^="template-"] .app-dialog p { color: #A1A1A6; }
[data-template^="template-"] .app-dialog code { color: var(--cyan); }
[data-template^="template-"] .app-dialog input {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #FAFAFA;
}
[data-template^="template-"] .app-dialog input:focus { border-color: var(--blue); }

/* ==========================================================================
   Páginas do celular (mobile.css) e painel do apresentador
   Não são slides — herdam a paleta escura do :root.
   ========================================================================== */
[data-template^="template-"] .brand i { background: var(--flame); box-shadow: 0 0 12px rgba(var(--tpl-glow-rgb), .6); }
[data-template^="template-"] h1 em { color: var(--cyan); }
[data-template^="template-"] .opt {
  background: var(--paper); border-color: var(--line-strong); color: var(--white);
}
[data-template^="template-"] .opt.selected { border-color: var(--blue); background: var(--flame-soft); }
[data-template^="template-"] input,
[data-template^="template-"] select,
[data-template^="template-"] textarea {
  background: var(--paper); border-color: var(--line-strong); color: var(--white);
}
[data-template^="template-"] input:focus,
[data-template^="template-"] select:focus,
[data-template^="template-"] textarea:focus { border-color: var(--blue); }
[data-template^="template-"] .btn {
  background: var(--flame); color: #FFFFFF; box-shadow: 0 12px 30px rgba(var(--tpl-glow-rgb), .32);
}
[data-template^="template-"] .rcard { background: var(--paper); border-color: var(--line); }
[data-template^="template-"] .rcard.loss { border-color: rgba(248, 113, 113, .45); }
[data-template^="template-"] .rcard.gain { border-color: rgba(var(--tpl-glow-rgb), .5); background: var(--flame-soft); }
[data-template^="template-"] .rcard.gain b { color: var(--cyan); }
[data-template^="template-"] .done .check {
  background: var(--flame); color: #FFFFFF; box-shadow: 0 14px 36px rgba(var(--tpl-glow-rgb), .35);
}

/* painel do apresentador */
[data-template^="template-"] .key-row {
  background: var(--paper); border-color: var(--line); color: var(--gray);
}
[data-template^="template-"] .key-row button { color: var(--cyan); }
[data-template^="template-"] .panel { background: var(--paper); border-color: var(--line); box-shadow: none; }
[data-template^="template-"] .panel.active-panel { border-color: rgba(var(--tpl-glow-rgb), .5); }
[data-template^="template-"] .badge.live { color: var(--cyan); border-color: rgba(var(--tpl-glow-rgb), .5); }
[data-template^="template-"] .badge.past { color: var(--gray); border-color: var(--line-strong); }
[data-template^="template-"] .stat { background: var(--navy-2); }
[data-template^="template-"] .opt-row .count { color: var(--cyan); }
[data-template^="template-"] .opt-row .track { background: rgba(255, 255, 255, .10); }
[data-template^="template-"] .opt-row .fill { background: var(--flame); }
[data-template^="template-"] .btn-sm {
  background: rgba(255, 255, 255, .06); border-color: var(--line-strong); color: var(--white);
}
[data-template^="template-"] .btn-sm.primary { background: var(--flame); color: #FFFFFF; border: 0; }
[data-template^="template-"] .btn-sm.danger { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .4); color: var(--danger); }
[data-template^="template-"] .template-field select { background: rgba(255, 255, 255, .06); border-color: var(--line-strong); color: var(--white); }
[data-template^="template-"] .template-field select:focus { border-color: var(--blue); }
[data-template^="template-"] dialog {
  background: var(--tpl-surface); color: var(--white); border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--shadow);
}
[data-template^="template-"] dialog::backdrop {
  background: rgba(var(--tpl-ink-rgb), .82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
[data-template^="template-"] dialog code { color: var(--cyan); }
[data-template^="template-"] .back-link:hover { color: var(--cyan); }

/* ==========================================================================
   LAYOUTS DO DECK (Figma · Competitive Analysis Report)
   Quatro estruturas de slide portadas do arquivo original. Cada uma é aplicada
   ao slide da apresentação cuja semântica corresponde à do slide de origem.

   Grade do original (canvas 1920×1080), traduzida para unidades relativas:
     margem lateral  120px  → 6.25%
     header          y=66   → 6.1vh
     título          y=154  → 14.3vh   · 64px / peso 500 / tracking -5%
     apoio           y=324  → 30vh     · 16px / #4F4F4F
     faixa/conteúdo  y=524  → 48.5vh
   ========================================================================== */

/* --------------------------------------------------------------------------
   A · "Key Findings at a Glance" → CALCULADORA DE PERDA
   Faixa de bandas sangrando até as bordas, cada uma com um número enorme no
   alto e rótulo na base. Os 4 resultados da calculadora ocupam as 4 bandas.
   -------------------------------------------------------------------------- */
[data-template^="template-"] #s-calc { padding: 0; display: block; }
/* o .split do CSS base impõe duas colunas — aqui o slide é uma coluna só,
   empilhando cabeçalho+formulário sobre a faixa que sangra nas bordas */
[data-template^="template-"] #s-calc .content.split {
  width: 100%; max-width: none; height: 100%;
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto;
  gap: 0; align-items: stretch;
}
[data-template^="template-"] #s-calc .split-left {
  padding: 8vh 6.25% 2vh;
  display: grid; grid-template-columns: 1.02fr .98fr;
  column-gap: 4vw; row-gap: 1.4vh;
  align-content: start;
}
[data-template^="template-"] #s-calc .kicker { grid-column: 1; grid-row: 1; margin-bottom: 0; }
[data-template^="template-"] #s-calc h2 {
  grid-column: 1; grid-row: 2; margin-bottom: 0;
  font-size: clamp(28px, 3.2vw, 60px);
}
[data-template^="template-"] #s-calc .qr-inline { grid-column: 1; grid-row: 3; margin: 1.2vh 0 0; }
[data-template^="template-"] #s-calc .qr-inline { gap: clamp(16px, 1.6vw, 28px); margin: 1.6vh 0 0; }
[data-template^="template-"] #s-calc .qr-inline .qr-img {
  width: clamp(120px, 12vw, 205px); height: clamp(120px, 12vw, 205px);
}
[data-template^="template-"] #s-calc .qr-caption strong { font-size: clamp(15px, 1.2vw, 22px); }
[data-template^="template-"] #s-calc .qr-caption span { font-size: clamp(12px, .95vw, 17px); }
[data-template^="template-"] #s-calc .calc-form {
  grid-column: 2; grid-row: 1 / span 3;
  align-content: start; gap: 1.3vh 1.6vw;
}
/* campos de telão: rótulo legível e caixa alta o suficiente para o número
   ser lido do fundo da sala enquanto o apresentador digita */
[data-template^="template-"] #s-calc .calc-form label {
  font-size: clamp(12px, .9vw, 17px); gap: 7px; color: var(--gray);
}
[data-template^="template-"] #s-calc .calc-form input {
  font-size: clamp(17px, 1.35vw, 26px); font-weight: 600;
  padding: clamp(10px, 1.5vh, 18px) clamp(12px, 1vw, 18px);
  border-radius: 12px;
}

/* a faixa: 4 bandas coladas, sem borda, sangrando lateral e inferiormente */
[data-template^="template-"] #s-calc .split-right { align-self: end; }
[data-template^="template-"] #s-calc .calc-results {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; height: 42vh;
}
[data-template^="template-"] #s-calc .calc-card {
  border: 0; border-radius: 0; background: none;
  /* o rodapé generoso mantém o rótulo acima da barra do apresentador */
  padding: 4vh 2.4vw 10vh;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: stretch; gap: 0;
}
[data-template^="template-"] #s-calc .calc-value {
  order: 1; align-self: flex-end; text-align: right;
  font-size: clamp(30px, 3.3vw, 64px); font-weight: 400; letter-spacing: -.07em;
  line-height: 1.2; color: inherit;
}
[data-template^="template-"] #s-calc .calc-label {
  order: 2; max-width: 17ch; color: inherit; opacity: .88;
  font-size: clamp(15px, 1.25vw, 25px); font-weight: 500; line-height: 1.3;
  letter-spacing: -.01em;
}
/* ritmo cromático do original: cinza · preto · cinza · gradiente */
[data-template^="template-"] #s-calc .calc-card:nth-child(1) { background: var(--n100); color: #000; }
[data-template^="template-"] #s-calc .calc-card:nth-child(2) { background: #000; color: #F6F6F6; }
[data-template^="template-"] #s-calc .calc-card:nth-child(3) { background: var(--n100); color: #000; }
[data-template^="template-"] #s-calc .calc-card:nth-child(4) { background: var(--flame-radial); color: #F6F6F6; }
[data-template^="template-"] #s-calc .calc-card:nth-child(4) .calc-value { color: #FFFFFF; background: none; -webkit-text-fill-color: #FFFFFF; }
/* nota e leitura ao vivo saem da faixa e viram rodapé da metade de cima */
/* a nota de premissas fica embaixo do formulário e a leitura ao vivo embaixo
   do QR: as duas em fluxo, para nunca esbarrarem nos campos */
[data-template^="template-"] #s-calc .calc-note {
  grid-column: 2; grid-row: 4; justify-self: end;
  max-width: 48ch; margin: 1.2vh 0 0; text-align: right;
  font-size: clamp(12.5px, 1vw, 17px); line-height: 1.45;
}
[data-template^="template-"] #s-calc .calc-live {
  grid-column: 1; grid-row: 4; align-self: center;
  margin: 1.2vh 0 0; border: 0; padding: 0;
  font-size: clamp(14px, 1.15vw, 20px); font-weight: 600;
}

/* --------------------------------------------------------------------------
   B · Esteira (#s-esteira) — timeline editorial
   -------------------------------------------------------------------------- */
[data-template^="template-"] #s-esteira .esteira__row::before {
  background: rgba(var(--tpl-text-rgb), .18);
}

[data-template^="template-"] #s-esteira .esteira__dot {
  background: var(--tpl-paper-3);
  border-color: rgba(var(--tpl-text-rgb), .28);
}

[data-template^="template-"] #s-esteira .esteira__n { color: var(--tpl-text-3); }
[data-template^="template-"] #s-esteira .esteira__node strong { color: var(--tpl-text); }

[data-template^="template-"] #s-esteira .esteira__node.is-ok .esteira__dot {
  background: var(--tpl-paper-3);
  border-color: rgba(var(--tpl-text-rgb), .4);
}

[data-template^="template-"] #s-esteira .esteira__node.is-fail .esteira__dot,
[data-template^="template-"] #s-esteira .esteira__node.is-loss .esteira__dot {
  background: var(--tpl-500);
  border-color: var(--tpl-500);
}

[data-template^="template-"] #s-esteira .esteira__node.is-fail .esteira__n,
[data-template^="template-"] #s-esteira .esteira__node.is-warn .esteira__n,
[data-template^="template-"] #s-esteira .esteira__node.is-loss .esteira__n,
[data-template^="template-"] #s-esteira .esteira__node.is-loss strong {
  color: var(--tpl-600);
}

[data-template^="template-"] #s-esteira .esteira__node.is-warn .esteira__dot {
  background: var(--tpl-paper-3);
  border-color: var(--tpl-500);
  box-shadow: inset 0 0 0 3px var(--tpl-500);
}

[data-template^="template-"] #s-esteira .esteira__end {
  border-top-color: rgba(var(--tpl-text-rgb), .12);
}

[data-template^="template-"] #s-esteira .esteira__punch { color: var(--tpl-text); }
[data-template^="template-"] #s-esteira .esteira__punch em { color: var(--tpl-600); }
[data-template^="template-"] #s-esteira .esteira__owner-label { color: var(--tpl-600); }
[data-template^="template-"] #s-esteira .esteira__owner p { color: var(--tpl-text-2); }
[data-template^="template-"] #s-esteira .esteira__owner strong { color: var(--tpl-text); }

/* --------------------------------------------------------------------------
   C · Plano de implantação (#s-aplopes) — a trilha de círculos do deck deu
   lugar a três fases; aqui ficam só os ajustes de papel claro.
   -------------------------------------------------------------------------- */
[data-template^="template-"] #s-aplopes { --pl-accent: var(--tpl-600); }
[data-template^="template-"] #s-aplopes .plano__fases::before,
[data-template^="template-"] #s-aplopes .fase__etapas li,
[data-template^="template-"] #s-aplopes .plano__foot { border-color: rgba(var(--tpl-text-rgb), .12); }
[data-template^="template-"] #s-aplopes .plano__fases::before { background: rgba(var(--tpl-text-rgb), .14); }
[data-template^="template-"] #s-aplopes .fase::before {
  border-color: rgba(var(--tpl-text-rgb), .28);
  background: var(--tpl-paper);
}
[data-template^="template-"] #s-aplopes .fase.is-start::before {
  border-color: transparent;
  background: var(--tpl-500);
  box-shadow: 0 0 0 5px rgba(var(--tpl-500-rgb), .2);
}
[data-template^="template-"] #s-aplopes .fase.is-start .fase__tag b,
[data-template^="template-"] #s-aplopes .fase.is-start .fase__etapas b { color: var(--tpl-600); }

/* --------------------------------------------------------------------------
   D · Casos-modelo (.case-slide) — os quatro cartões em escada deram lugar
   aos três tempos (dor → agentes → resultado); aqui ficam os ajustes de papel.
   -------------------------------------------------------------------------- */
[data-template^="template-"] .case-slide { --cs-accent: var(--tpl-600); }
[data-template^="template-"] .case-slide .caso__col + .caso__col,
[data-template^="template-"] .case-slide .caso__dor li,
[data-template^="template-"] .case-slide .caso__agentes li,
[data-template^="template-"] .case-slide .caso__resultado li,
[data-template^="template-"] .case-slide .caso__punch { border-color: rgba(var(--tpl-text-rgb), .12); }
[data-template^="template-"] .case-slide .caso__col h3 b { color: rgba(var(--tpl-text-rgb), .3); }
[data-template^="template-"] .case-slide .caso__resultado li::before { background: var(--tpl-500); }

/* --------------------------------------------------------------------------
   E · Diagnóstico ao vivo (#s-poll1)
   -------------------------------------------------------------------------- */
[data-template^="template-"] #s-poll1 {
  background: var(--tpl-paper-3);
}

[data-template^="template-"] #s-poll1 .poll-diag__board,
[data-template^="template-"] #s-poll1 .poll-board.poll-diag__board {
  background: transparent;
  border: 0;
  box-shadow: none;
}

[data-template^="template-"] #s-poll1 .poll-diag__meta {
  border-bottom-color: rgba(var(--tpl-text-rgb), .12);
}

[data-template^="template-"] #s-poll1 .poll-diag__kicker {
  color: var(--tpl-text-3);
}

[data-template^="template-"] #s-poll1 .poll-bar .pb-track {
  background: rgba(var(--tpl-text-rgb), .12);
}

[data-template^="template-"] #s-poll1 .poll-bar .pb-fill {
  background: rgba(var(--tpl-text-rgb), .38);
}

[data-template^="template-"] #s-poll1 .poll-bar.top .pb-fill {
  background: linear-gradient(90deg, var(--tpl-500) 0%, var(--tpl-400) 50%, var(--tpl-100) 100%);
}

[data-template^="template-"] #s-poll1 .poll-bar .pb-label {
  color: var(--tpl-text-2);
}

[data-template^="template-"] #s-poll1 .poll-bar.top .pb-label {
  color: var(--tpl-text);
}

[data-template^="template-"] #s-poll1 .poll-bar.top .pb-pct {
  color: var(--tpl-600);
}

[data-template^="template-"] #s-poll1 .poll-diag__live {
  background: var(--tpl-400);
}

[data-template^="template-"] #s-poll1 .poll-diag__qr .qr-caption span {
  color: var(--gold);
}

/* ---------- escolha do segmento (#s-poll-segmento) ---------- */
[data-template^="template-"] #s-poll-segmento { --sg-accent: var(--tpl-600); }
[data-template^="template-"] #s-poll-segmento .poll-bar .pb-track { background: rgba(var(--tpl-text-rgb), .1); }
[data-template^="template-"] #s-poll-segmento .poll-bar .pb-fill { background: rgba(var(--tpl-text-rgb), .32); }
[data-template^="template-"] #s-poll-segmento .poll-bar.top .pb-fill {
  background: linear-gradient(90deg, var(--tpl-500) 0%, var(--tpl-400) 55%, var(--tpl-100) 100%);
}
[data-template^="template-"] #s-poll-segmento .seg__action {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(var(--tpl-text-rgb), .1);
  box-shadow: 0 14px 38px rgba(var(--tpl-text-rgb), .05);
}
[data-template^="template-"] #s-poll-segmento .poll-total { border-top-color: rgba(var(--tpl-text-rgb), .12); }

/* ==========================================================================
   Acentos declarados dentro dos componentes
   Alguns componentes trazem cor própria no seu CSS (para funcionarem também no
   tema default). Aqui essas variáveis passam a apontar para a paleta do
   template ativo — é o que faz uma variante de cor valer para o deck inteiro.
   ========================================================================== */
[data-template^="template-"] #s-t5 {
  --tf-hot: var(--tpl-100);
  --tf-core: var(--tpl-core);
  --tf-deep: var(--tpl-900);
}

/* o ponto pulsante de "ao vivo" e o seu pulso seguem a paleta */
[data-template^="template-"] .poll-diag__live { background: var(--tpl-400); }
[data-template^="template-"] .poll-diag__live:not(.is-waiting) {
  animation-name: tpl-live-pulse;
}

@keyframes tpl-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--tpl-400-rgb), .4); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--tpl-400-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--tpl-400-rgb), 0); }
}