/* SMS + RCS: estrutura das seções refinadas. Complementa voice-message.css (compartilhado com One). */
.cena-slot:empty { display: none; }
.cena-slot { margin-top: 34px; }
.page-sms .page-hero h1 { max-width: 19ch; }
.page-sms .editorial-row > :last-child > .page-lede:first-child { margin-top: 0; }
.page-sms .sms-detail { margin: 28px 0 0; padding-left: 18px; border-left: 2px solid #82c89a; color: var(--page-ink); line-height: 1.6; }
.page-sms .sms-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 26px; margin-top: 36px; }
.page-sms .sms-points > article { min-width: 0; padding: 18px 0 20px; border-top: 1px solid var(--page-line); }
.page-sms .sms-points h3 { margin: 0 0 7px; font: 600 1.08rem/1.3 var(--fonte-texto); }
.page-sms .sms-points p { margin: 0; color: var(--page-muted); line-height: 1.6; }
.page-sms .sms-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-sms .editorial-row > :last-child > .rcs-formats { margin-top: 34px; }
.page-sms .feature-lines.sms-feature-lines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-sms .editorial-row > :last-child > .text-link { margin-top: 18px; }
.page-sms #respostas .sms-points { margin-top: 32px; }
@media (max-width: 1100px) {
  .page-sms .feature-lines.sms-feature-lines--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-sms .page-hero h1 { max-width: 17ch; }
}
@media (max-width: 680px) {
  .page-sms .sms-points--2 { grid-template-columns: minmax(0, 1fr); }
  .page-sms .feature-lines.sms-feature-lines--4 { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ===== Motion (refinamento 03/10/2026). Cenas em js/cenas-sms.js, base em css/motion.css. ===== */
.page-sms {
  --altura-topo: 69px; /* so o subnav fica fixo no topo (o cabecalho rola) */
  --vig-bg: #fff;
  --c-cinza: #5f7074; --c-azul: #0b78bd; --c-ambar: #a85f00; --c-verde: #1a8a35; --c-vermelho: #c93636;
  --rc-chat: #e8efeb; --rc-card: #fff; --rc-tinta: #16333c;
}
@media (prefers-color-scheme: dark) {
  .page-sms {
    --vig-bg: #15292c;
    --c-cinza: #aab9b5; --c-azul: #63b8ee; --c-ambar: #f0b254; --c-verde: #79d891; --c-vermelho: #ef8686;
    --rc-chat: #0f1c1f; --rc-card: #223a3e; --rc-tinta: #edf5f0;
  }
}
.sms-vig {
  padding: 22px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
  background: var(--vig-bg);
  box-shadow: 0 1px 2px rgba(14, 38, 46, .06), 0 14px 34px -14px rgba(14, 38, 46, .24);
}
.vig-leg { margin: 12px 0 0; color: var(--page-muted); font-size: .8125rem; line-height: 1.5; }
.sms-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
  border: 1px solid currentColor; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.sms-chip svg { width: 12px; height: 12px; flex: none; }
.sms-chip .pt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sms-chip--cinza { color: var(--c-cinza); } .sms-chip--azul { color: var(--c-azul); }
.sms-chip--ambar { color: var(--c-ambar); } .sms-chip--verde { color: var(--c-verde); }

/* A10 hero: plataforma, operadora, aparelho. Fundo sempre petroleo. */
.page-sms .sms-rota { --c-cinza: #aab9b5; --c-azul: #63b8ee; --c-ambar: #f0b254; --c-verde: #79d891; }
.page-sms .sms-rota .sms-chip { background: rgba(255, 255, 255, .04); font-size: .9rem; padding: 5px 13px 5px 11px; }
.page-sms .sms-rota .rota-svg path, .page-sms .sms-rota .rota-svg rect { stroke-linecap: butt; }
.page-sms .sms-rota .rota-soft { stroke: #82c89a; stroke-width: 1.5; opacity: .5; }
.page-sms .sms-rota .rota-trace { stroke: #32be49; stroke-width: 3; }
.page-sms .sms-rota .rota-pkt { stroke: #d9f7df; stroke-width: 5; stroke-dasharray: .07 2; opacity: 0; }
.page-sms .sms-rota .rota-no { fill: #0e262e; stroke: rgba(130, 200, 154, .55); stroke-width: 1.5; }
.page-sms .sms-rota .rota-ic { stroke: #d9f7df; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.page-sms .sms-rota .rota-ring { fill: none; stroke: #32be49; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.page-sms .sms-rota .rota-okr { fill: none; stroke: #32be49; stroke-width: 2; }
.page-sms .sms-rota .rota-rot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; color: #c0d0c7; font-size: .8rem; text-align: center; }
.page-sms .sms-rota .rota-chips { width: max-content; max-width: 100%; margin: 16px auto 0; justify-items: center; }
.page-sms .sms-rota .rota-chips > .sms-chip { justify-self: center; }
.page-sms .sms-rota figcaption { margin-top: 18px; }
/* o JS poe data-ta, data-tb, data-op e data-ok enquanto anima; sem eles o estado final aparece */
.page-sms .sms-rota[data-ta] .tA, .page-sms .sms-rota[data-tb] .tB { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.page-sms .sms-rota[data-ok] .rota-ok { opacity: 0; }
.page-sms .sms-rota[data-ok="1"] .rota-ok { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .page-sms .sms-rota[data-ta="1"] .tA, .page-sms .sms-rota[data-tb="1"] .tB { animation: rota-desenha 1400ms var(--mo-troca) both; }
  .page-sms .sms-rota[data-ta="1"] .pA, .page-sms .sms-rota[data-tb="1"] .pB { animation: rota-viaja 1400ms var(--mo-troca) both; }
  .page-sms .sms-rota[data-op="1"] .rota-ring { animation: rota-pulso 1000ms var(--mo-saida) both; }
  .page-sms .sms-rota .rota-ok { transition: opacity var(--mo-medio) var(--mo-troca); }
  @keyframes rota-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes rota-viaja { 0% { opacity: 1; stroke-dashoffset: 0; } 92% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1.07; } }
  @keyframes rota-pulso { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.4); } }
}
.sem-trans, .sem-trans * { transition: none !important; animation: none !important; }

/* A11 antiflood: tres faixas (janela, retidas, enviadas). Fases 1 a 5 e os transforms vem do JS. */
.page-sms .editorial-row > :last-child > .cena-slot[data-cena="antiflood"] { margin-top: 28px; }
/* a cena usa a altura util: centraliza no viewport quando sobra espaco */
@media (min-width: 1024px) { .aw-rolagem.cena-sticky > .cena-palco { top: max(calc(var(--altura-topo) + 24px), calc(50vh - 310px)); } }
.aw-painel { display: grid; gap: 18px; padding: 22px 24px; }
.aw-topo { display: flex; align-items: center; }
.aw-num { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--page-ink); font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.aw-ic { width: 18px; height: 18px; flex: none; color: var(--page-muted); }
.aw-rot { margin: 0 0 8px; color: var(--page-muted); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.aw-regua { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.aw-v { position: relative; display: block; height: 52px; overflow: hidden; border: 1px solid var(--page-line); border-radius: 8px; }
.aw-v b { position: absolute; inset: 0; background: #32be49; transform-origin: 50% 100%; }
.aw-v .aw-nv { background: var(--c-azul); transform: scaleY(1); }
.aw-v .aw-ok { opacity: 1; }
.aw-painel .aw-v0 .aw-f { transform: scaleY(0); }
.aw-tempo { margin-top: 16px; }
.aw-trilha { position: relative; height: 6px; border-radius: 3px; background: var(--page-line); container-type: inline-size; }
.aw-prog { position: absolute; inset: 0; border-radius: inherit; background: var(--c-ambar); transform-origin: 0 50%; }
.aw-agora { position: absolute; left: 0; top: -4px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--vig-bg); border-radius: 50%; background: var(--c-ambar); transform: translateX(calc(100cqw - 14px)); }
.aw-ticks { display: flex; justify-content: space-between; margin-top: 10px; color: var(--page-ink); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.aw-ticks span { opacity: .4; }
.aw-ticks span.on { opacity: 1; }
.aw-slot { position: relative; min-height: 98px; }
.aw-slot::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--page-line); border-radius: 12px; }
.aw-card { position: relative; box-sizing: border-box; min-height: 98px; padding: 14px 16px; border: 1px solid var(--page-line); border-radius: 12px; background: var(--vig-bg); box-shadow: 0 6px 18px -10px rgba(14, 38, 46, .35); }
.aw-txt { margin: 0 0 10px; color: var(--page-ink); font-size: .9375rem; line-height: 1.4; }
.aw-card-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aw-prev { display: inline-flex; align-items: center; gap: 7px; color: var(--page-muted); font-size: .8125rem; }
.aw-prev time { color: var(--page-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.aw-lista { position: relative; height: 130px; }
.aw-fi { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--page-line); border-radius: 10px; background: var(--vig-bg); }
.aw-ft { min-width: 0; overflow: hidden; color: var(--page-ink); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.aw-fc { flex: none; justify-items: end; }
.aw-fc > .sms-chip { justify-self: end; }
.aw-painel .aw-fi:nth-child(2) { transform: translateY(46px); }
.aw-painel .aw-fi:nth-child(3) { transform: translateY(92px); }
.aw-painel .aw-fi:nth-child(4) { transform: translateY(138px); opacity: 0; }
.aw-painel .aw-card { opacity: 0; }
.aw-painel:not([data-fase="5"]) .aw-v0 .aw-ok { opacity: 0; }
.aw-painel[data-fase="5"] .aw-fi:first-child { border-color: var(--c-verde); background: color-mix(in srgb, var(--c-verde) 8%, var(--vig-bg)); }
.aw-painel[data-fase="2"] .aw-card .sms-chip { opacity: .35; }
.aw-painel[data-fase="2"] .aw-prev { opacity: 0; }
/* quadros estaticos (movimento reduzido) */
.aw-quadros { display: none; }
.aw-q { display: grid; gap: 16px; }
.aw-q .aw-tempo { margin-top: 0; }
.aw-q .aw-ticks span { opacity: 1; }
.aw-q .aw-lista { height: 38px; }
.aw-q .aw-slot .aw-card { opacity: 1; }
.aw-q .aw-fi { transform: none; }
.aw-q[data-q="2"] .aw-v0 .aw-f, .aw-q[data-q="2"] .aw-v0 .aw-ok { transform: scaleY(0); opacity: 0; }
.aw-q[data-q="1"] .aw-v0 .aw-nv, .aw-q[data-q="1"] .aw-v0 .aw-ok, .aw-q[data-q="2"] .aw-v0 .aw-nv { opacity: 0; }
.aw-q[data-q="1"] .aw-v0 .aw-f { transform: none; }
.aw-q[data-q="3"] .aw-v0 .aw-f, .aw-q[data-q="3"] .aw-v0 .aw-nv { opacity: 0; }
.aw-q[data-q="3"] .aw-fi { border-color: var(--c-verde); background: color-mix(in srgb, var(--c-verde) 8%, var(--vig-bg)); }
.aw-q[data-q="1"] .aw-card .sms-chip, .aw-q[data-q="2"] .aw-card .sms-chip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .aw-rolagem { display: none; }
  .aw-quadros { display: grid; gap: 14px; }
  .aw-quadros .vig-leg { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .aw-ticks span { transition: opacity var(--mo-medio) var(--mo-troca); }
  .aw-card .sms-chip, .aw-prev { transition: opacity var(--mo-medio) var(--mo-troca); }
  .aw-fi { transition: border-color var(--mo-medio) var(--mo-troca), background-color var(--mo-medio) var(--mo-troca); }
  .aw-v .aw-ok { transition: opacity var(--mo-medio) var(--mo-troca); }
}
@media (max-width: 520px) {
  .aw-painel { padding: 18px 16px; gap: 16px; }
  .aw-v { height: 44px; }
  .aw-regua { gap: 3px; }
}

/* A12 campanha */
.camp-grid { display: grid; gap: 28px; align-items: center; margin-top: 4px; }
.camp-grid > * { min-width: 0; }
@media (min-width: 1024px) { .camp-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; } }
.camp-vig-fig { margin: 0; }
.camp-barra { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(50, 190, 73, .2); }
.camp-barra b { display: block; height: 100%; border-radius: inherit; background: #32be49; transform-origin: 0 50%; transform: scaleX(.71); }
.camp-conts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.camp-c { display: grid; gap: 2px; min-width: 0; }
.camp-n { display: grid; font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--page-ink); }
.camp-n > span { grid-area: 1 / 1; opacity: 0; }
.camp-n > span:nth-child(4) { opacity: 1; }
.camp-c--env .camp-n { color: var(--c-azul); } .camp-c--ent .camp-n { color: var(--c-verde); } .camp-c--fal .camp-n { color: var(--c-vermelho); }
.camp-l { color: var(--page-muted); font-size: .8rem; }
.camp-vig[data-lote="0"] .camp-n > span:nth-child(1), .camp-vig[data-lote="1"] .camp-n > span:nth-child(2), .camp-vig[data-lote="2"] .camp-n > span:nth-child(3) { opacity: 1; }
.camp-vig[data-lote] .camp-n > span:nth-child(4) { opacity: 0; }
.camp-vig[data-lote="3"] .camp-n > span:nth-child(4) { opacity: 1; }
.camp-vig[data-lote="0"] .camp-barra b { transform: scaleX(0); }
.camp-vig[data-lote="1"] .camp-barra b { transform: scaleX(.24); }
.camp-vig[data-lote="2"] .camp-barra b { transform: scaleX(.48); }
.camp-fila { position: relative; container-type: inline-size; overflow: clip; margin-top: 20px; padding-top: 12px; }
.camp-gate { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: #32be49; opacity: .7; }
.camp-prio { position: relative; display: flex; justify-content: flex-end; padding-left: 8px; }
.camp-prio::before { content: ""; position: absolute; left: 8px; right: 0; top: 50%; border-top: 1.5px dashed rgba(50, 190, 73, .4); }
.camp-card {
  position: relative; box-sizing: border-box; display: grid; gap: 1px; width: min(52%, 200px); padding: 8px 12px;
  border: 1.5px solid #32be49; border-radius: 10px; background: var(--vig-bg);
  transform: translateX(calc(100% - 100cqw + 8px));
}
.camp-card strong { font-size: .8125rem; line-height: 1.3; color: var(--page-ink); }
.camp-card span { color: var(--page-muted); font-size: .72rem; }
.camp-ok { position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; }
.camp-lbl { margin: 12px 0 6px 8px; color: var(--page-muted); font-size: .75rem; }
.camp-blocos { display: flex; gap: 8px; padding-left: 8px; }
.camp-b { flex: 1 1 0; min-width: 0; height: 24px; border-radius: 6px; background: rgba(50, 190, 73, .3); transform: translateX(calc(-100% - 8px)); }
.camp-vig[data-prio="0"] .camp-card { opacity: 0; transform: translate(0, -10px); }
.camp-vig[data-prio="1"] .camp-card { transform: none; }
.camp-vig:is([data-prio="0"], [data-prio="1"], [data-prio="2"]) .camp-ok { opacity: 0; }
.camp-vig:is([data-prio="0"], [data-prio="1"], [data-prio="2"]) .camp-b { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .camp-barra b { transition: transform 800ms var(--mo-troca); }
  .camp-n > span { transition: opacity var(--mo-medio) var(--mo-troca); }
  .camp-card { transition: transform 900ms var(--mo-troca), opacity var(--mo-medio) var(--mo-saida); }
  .camp-ok { transition: opacity var(--mo-medio) var(--mo-saida) 300ms; }
  .camp-b { transition: transform 700ms var(--mo-troca); }
  .camp-b:nth-child(2) { transition-delay: 70ms; } .camp-b:nth-child(3) { transition-delay: 140ms; }
  .camp-b:nth-child(4) { transition-delay: 210ms; } .camp-b:nth-child(5) { transition-delay: 280ms; }
}
@media (max-width: 520px) {
  .camp-conts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .camp-card { width: 62%; }
}

/* A13 RCS: celular de demonstracao. Estados 1 a 5 (data-e no #rcs); sem atributo = rich card estatico com Lida. */
.rc-fone { width: 280px; margin: 0 auto; padding: 10px; border-radius: 36px; background: #0e262e; box-shadow: 0 18px 40px -18px rgba(14, 38, 46, .5); }
.rc-tela { position: relative; height: 410px; overflow: hidden; border-radius: 27px; background: var(--rc-chat); }
.rc-topo { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: var(--rc-card); color: var(--rc-tinta); font-size: .8125rem; font-weight: 600; }
.rc-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #32be49, #0e262e); flex: none; }
.rc-ver { width: 14px; height: 14px; flex: none; }
.rc-chat { position: absolute; inset: 46px 0 40px; overflow: hidden; }
.rc-trilho { position: absolute; left: 16px; top: 14px; width: 224px; height: 262px; transform: translateX(-232px); }
.rc-card { position: absolute; top: 0; width: 224px; height: 262px; color: var(--rc-tinta); }
.rc-c0 { left: 0; } .rc-c1 { left: 232px; } .rc-c2 { left: 464px; }
.rc-bg { position: absolute; inset: 0; background: var(--rc-card); clip-path: inset(0 round 16px); }
.rc-img { position: absolute; left: 0; right: 0; top: 0; height: 149px; overflow: hidden; border-radius: 16px 16px 0 0; clip-path: inset(0); }
.rc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-txt { position: absolute; left: 0; right: 0; top: 149px; height: 72px; display: grid; align-content: start; gap: 2px; padding: 8px 14px 0; }
.rc-tit { font-size: .875rem; line-height: 1.3; }
.rc-desc { display: block; font-size: .78rem; line-height: 1.4; color: color-mix(in srgb, var(--rc-tinta) 72%, transparent); }
.rc-btn { position: absolute; left: 0; right: 0; bottom: 0; height: 41px; display: grid; place-items: center; border-top: 1px solid color-mix(in srgb, var(--rc-tinta) 12%, transparent); color: #1f9a39; font-size: .8125rem; font-weight: 600; }
.rc-lida { position: absolute; right: 18px; top: 282px; display: flex; align-items: center; gap: 5px; margin: 0; color: var(--c-azul); font-size: .72rem; font-weight: 600; }
.rc-lida svg { width: 16px; height: 9px; }
.rc-comp { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--rc-tinta) 9%, transparent); }
.rc-c0, .rc-c2 { opacity: 0; }
/* estados */
#rcs[data-e="1"] .rc-c1 .rc-bg { clip-path: inset(185px 0 16px 0 round 14px); }
#rcs[data-e="1"] .rc-c1 .rc-img { clip-path: inset(100% 0 0 0); }
#rcs[data-e="1"] .rc-c1 :is(.rc-tit, .rc-btn) { opacity: 0; }
#rcs[data-e="1"] .rc-c1 .rc-desc { transform: translateY(20px); }
#rcs:is([data-e="3"], [data-e="4"], [data-e="5"]) :is(.rc-c0, .rc-c2) { opacity: 1; }
#rcs:is([data-e="4"], [data-e="5"]) .rc-trilho { transform: translateX(-464px); }
#rcs:is([data-e="1"], [data-e="2"], [data-e="3"], [data-e="4"]) .rc-lida { opacity: 0; transform: translateY(5px); }
@media (prefers-reduced-motion: no-preference) {
  .rc-bg { transition: clip-path 700ms var(--mo-troca); }
  .rc-img { transition: clip-path 700ms var(--mo-troca) 100ms; }
  .rc-tit, .rc-btn { transition: opacity var(--mo-medio) var(--mo-saida) 350ms; }
  .rc-desc { transition: transform 700ms var(--mo-troca); }
  .rc-card { transition: opacity var(--mo-medio) var(--mo-saida); }
  .rc-trilho { transition: transform 800ms var(--mo-troca); }
  .rc-lida { transition: opacity var(--mo-medio) var(--mo-saida), transform var(--mo-medio) var(--mo-saida); }
}
/* legenda de formatos acende junto com a cena (so quando o JS anima) */
.page-sms .rcs-formats article { position: relative; }
.page-sms .rcs-formats article::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--page-green); transform: scaleX(0); transform-origin: 0 50%; }
#rcs[data-e="1"] .rcs-formats article:nth-child(1)::before,
#rcs[data-e="2"] .rcs-formats article:nth-child(2)::before,
#rcs:is([data-e="3"], [data-e="4"], [data-e="5"]) .rcs-formats article:nth-child(3)::before { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .page-sms .rcs-formats article::before { transition: transform var(--mo-medio) var(--mo-troca); } }

/* print real: realce do no "Aguardando janela" entra depois do foco */
.page-sms .print .print-realce { opacity: 0; }
.page-sms .print.mo-in .print-realce { opacity: 1; transition-delay: 900ms; }
.page-sms .cena-slot[data-cena="rastreio"] .print { margin: 0; }

/* API: tres blocos entram por estado, em sequencia */
.sms-api { display: grid; gap: 12px; }
.api-bloco { padding: 14px 18px 16px; border: 1px solid rgba(130, 200, 154, .22); border-radius: 14px; background: #0e262e; color: #d9f7df; }
.api-rot { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #82c89a; font-size: .75rem; font-weight: 600; }
.api-rot svg { width: 14px; height: 14px; flex: none; }
.api-bloco pre { margin: 0; font: .78rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-k { color: #82c89a; }
.api-ok { display: inline-block; padding: 0 8px; border-radius: 999px; background: #32be49; color: #0b171b; font-weight: 600; }
.sms-api .vig-leg { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .sms-api:not(.mo-in) .api-bloco { opacity: 0; }
  .sms-api.mo-in .api-bloco { animation: api-entra 520ms var(--mo-saida) both; }
  .sms-api.mo-in .api-resp { animation-delay: 900ms; }
  .sms-api.mo-in .api-hook { animation-name: api-chega; animation-delay: 2000ms; }
  .sms-api.mo-in .api-ok { animation: api-pulso 800ms var(--mo-troca) 2800ms both; }
  @keyframes api-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes api-chega { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes api-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
}
/* celular: o print da campanha ganha zoom no canto dos contadores (a imagem inteira ficaria com texto de 7px) */
@media (max-width: 639.98px) {
  .camp-grid .print-quadro { aspect-ratio: 4 / 1; }
  .camp-grid .print-quadro > .print-camada { transform: scale(1.6); transform-origin: 0 0; }
}

/* D: icones dos formatos RCS em SVG inline (mesmo traco e tamanho nos quatro); a cor vem do .format-mark */
.page-sms .rcs-formats .format-mark { width: 42px; height: 42px; border-radius: 9px; }
.page-sms .rcs-formats .format-mark svg { display: block; width: 24px; height: 24px; }