/* Aparelhos frontais, nas proporções originais, com corte reto na base. */
#clientesSection .cli-grade { max-width: 1120px; column-gap: 80px; }
#clientesSection .cli-card { min-width: 0; }
#clientesSection .cli-vao {
    --phone-width: min(calc(100cqw - 16px), 420px);
    position: relative;
    flex: none;
    container-type: inline-size;
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding-top: min(calc((100% - 16px) * 1.55), 651px);
    margin: 0 0 28px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: none;
    mask-image: none;
}
#clientesSection .cli-papel,
#clientesSection .sf-palco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    container-type: normal;
}
#clientesSection .cli-phone {
    --u: calc(var(--phone-width) / 300);
    --esc: calc(var(--phone-width) / 604);
    position: absolute;
    left: calc((100% - var(--phone-width)) / 2);
    top: 0;
    width: var(--phone-width);
    height: calc(var(--phone-width) * 1218 / 604);
    opacity: 1;
    transform: none;
    transition: none;
}
#clientesSection .sf-tela {
    left: calc(var(--esc) * 31);
    top: calc(var(--esc) * 24);
    width: calc(var(--esc) * 545);
    height: calc(var(--esc) * 1170);
    border-radius: calc(var(--esc) * 52);
    background: #ece5dd;
}
/* Mesmos ícones, alinhamento e escala da barra do celular em #experimente. */
#clientesSection .cli-phone-status {
    --pt: calc(var(--esc) * 1.387);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    height: calc(var(--pt) * 66);
    padding: 0 calc(var(--pt) * 30) 0 calc(var(--pt) * 40);
    color: #111b21;
    background: #f8f9fb;
    font: 600 calc(var(--pt) * 17)/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -.02em;
    -webkit-font-smoothing: antialiased;
}
#clientesSection .cli-phone-icons {
    display: flex;
    align-items: center;
    gap: calc(var(--pt) * 6);
}
#clientesSection .cli-phone-status svg {
    display: block;
    width: auto;
    height: calc(var(--pt) * 12);
}
#clientesSection .cli-phone-status .cli-phone-battery { height: calc(var(--pt) * 13); }
#clientesSection .sf-topo {
    padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 12);
    background: #f8f9fb;
}
#clientesSection .sf-fluxo { padding: calc(var(--u) * 17) calc(var(--u) * 11) 0; }
#clientesSection .sf-bolha { max-width: 92%; padding: calc(var(--u) * 9) calc(var(--u) * 10); }
#clientesSection .sf-bolha p { font-size: calc(var(--u) * 11.3); line-height: 1.45; }
#clientesSection .sf-cena { gap: calc(var(--u) * 13); }
#clientesSection .sf-fala--in { transform: none; }
#clientesSection .cli-text { width: 100%; max-width: 480px; margin: 0 auto; }
/* Mesma hierarquia tipográfica do card de informações da Luna. */
#clientesSection .cli-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.025em;
    margin-bottom: 10px;
    text-wrap: pretty;
}
#clientesSection .cli-desc {
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.01em;
    text-wrap: pretty;
}

/* A agenda usa a largura da tela, com medidas próprias de uma interface móvel. */
#clientesSection .cli-agenda-screen { background: #f8f9fb; }
#clientesSection .mk-peca {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: calc(var(--phone-width) * 16 / 390);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#clientesSection .cli-booking-header { display: flex; flex-direction: column; align-items: center; gap: 0; padding: .2em 1.2em .35em; }
#clientesSection .mk-cartao { display: grid; align-items: start; border: 0; border-radius: 0; background: #f8f9fb; overflow: visible; }
#clientesSection .mk-esq { flex: none; padding: .15em 1.2em .45em; gap: .1em; border: 0; border-bottom: 1px solid #e7e9ed; border-radius: 0; background: #f8f9fb; }
#clientesSection .mk-avatar { display: none; }
#clientesSection .mk-rotulo { font-size: .76em; margin: 0; color: #687381; }
#clientesSection .mk-nome { font-size: 1.12em; margin: .12em 0 .15em; }
#clientesSection .mk-mes { display: flex; max-width: none; margin-top: .35em; }
#clientesSection .mk-mes b { font-size: .85em; }
#clientesSection .mk-seta { font-size: 1.3em; color: #64748b; padding: 0 .25em; }
#clientesSection .mk-semana,
#clientesSection .mk-dias { display: grid; max-width: none; gap: 0; }
#clientesSection .mk-semana { margin-top: .6em; margin-bottom: .3em; }
#clientesSection .mk-semana span { font-size: .65em; color: #77818e; }
#clientesSection .mk-dia,
#clientesSection .mk-vago { width: 1.85em; height: 1.85em; aspect-ratio: 1; justify-self: center; font-size: .82em; }
#clientesSection .mk-dia--ido { color: #a2aab6; }
#clientesSection .mk-dir { display: flex; flex-direction: column; gap: .35em; padding: .6em 1.2em .7em; align-items: stretch; background: #fff; }
#clientesSection .mk-ato { gap: .5em; }
#clientesSection .mk-ato--passo1 { gap: 0; opacity: 1; }
#clientesSection .mk-ato--passo2 { padding: .9em 1.2em 1.2em; gap: .7em; }
#clientesSection .mk-ato--passo2 > .mk-topo .mk-titulo { font-size: 1.02em; }
#clientesSection .mk-etapa { font-size: .67em; }
#clientesSection .mk-duracoes { margin: 0 0 .2em; gap: .4em; }
#clientesSection .mk-dur { padding: .45em .7em; font-size: .72em; }
#clientesSection .mk-resumo { flex-direction: column; align-items: flex-start; gap: .35em; padding: .7em .8em; border-color: #e4e7ec; }
#clientesSection .mk-resumo-l { font-size: .8em; }
#clientesSection .mk-grupo { gap: .25em; }
#clientesSection .mk-rot { font-size: .75em; }
#clientesSection .mk-campo { padding: .5em .7em; }
#clientesSection .mk-campo > .mk-ico { width: 1.05em; height: 1.05em; }
#clientesSection .mk-campo-val { font-size: .86em; }
#clientesSection .mk-tec { max-width: max-content; }
#clientesSection .mk-ato--fim { min-height: 24em; padding: 2em 1.2em; gap: 1em; }
#clientesSection .mk-selo { width: 3em; height: 3em; }
#clientesSection .mk-fim-t { font-size: 1.2em; }
#clientesSection .mk-fim-p { max-width: 22em; font-size: .82em; }
#clientesSection .mk-titulo { font-size: .86em; }
#clientesSection .mk-apoio { font-size: .72em; line-height: 1.4; }
#clientesSection .mk-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em; }
#clientesSection .mk-hora { padding: .5em; font-size: .82em; }
#clientesSection .mk-agendar { margin-top: .2em; padding: .7em; box-shadow: none; background: #25252a; }
#clientesSection .mk-agendar b { font-size: .8em; }

/* Roteiro de 19,2s: calendário, dados digitados e confirmação.
   Os ajustes de ritmo abaixo mantêm as três etapas sincronizadas. */
#clientesSection .mk-disco { opacity: 1; transform: none; }
#clientesSection .mk-dia-n { color: #fff; }
#clientesSection .mk-hora { opacity: 1; transform: none; }
#clientesSection .mk-hora--alvo { background: #2563eb; color: #fff; border-color: #2563eb; }
#clientesSection .mk-dur--alvo { background: #2563eb; color: #fff; border-color: #2563eb; }
#clientesSection .mk-apoio--dia { opacity: 1; transform: none; }
#clientesSection .cli-card.is-vivo.is-parado .mk-peca * { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
    #clientesSection .cli-card.is-vivo .mk-agendar { animation-name: cliBookingSubmit; }
}
@keyframes cliBookingSubmit {
    0%, 45.8333%, 47.9167%, 100% { transform: none; }
    46.4583%, 46.875% { transform: scale(.98); }
}

/* A largura cresce sem alongar o recorte nem ampliar o conteúdo da tela. */
@media (min-width: 961px) {
    #clientesSection {
        --cli-desktop-content: clamp(330px, 25vw, 360px);
        --cli-desktop-phone: clamp(350px, 28vw, 400px);
        --cli-desktop-gap: clamp(128px, 14vw, 224px);
    }
    #clientesSection .cli-grade {
        max-width: calc(var(--cli-desktop-phone) * 2 + var(--cli-desktop-gap));
        column-gap: var(--cli-desktop-gap);
    }
    #clientesSection .cli-vao {
        --phone-width: var(--cli-desktop-phone);
        padding-top: calc(var(--cli-desktop-content) * 1.332);
        margin-bottom: 28px;
    }
    #clientesSection .cli-phone {
        --u: calc(var(--cli-desktop-content) / 300);
        transform: scale(.9);
        transform-origin: 50% 0;
    }
    #clientesSection .mk-peca { font-size: calc(var(--cli-desktop-content) * 16 / 390); }
    #clientesSection .cli-phone-status {
        --pt: calc(var(--cli-desktop-content) * 1.387 / 604);
        height: calc(var(--esc) * 1.387 * 66);
    }
    #clientesSection .cli-text { max-width: var(--cli-desktop-phone); text-align: left; }
    #clientesSection .sf-bolha p { font-size: max(calc(var(--u) * 11.3), 12.5px); }
    #clientesSection .mk-campo-val { font-size: max(.86em, 12px); }
    #clientesSection .mk-dia,
    #clientesSection .mk-vago { font-size: max(.82em, 10.5px); }
    #clientesSection .mk-rotulo,
    #clientesSection .mk-dur,
    #clientesSection .mk-apoio { font-size: max(.72em, 10px); }
}

@media (max-width: 960px) {
    #clientesSection .cli-grade { max-width: 560px; }
    #clientesSection .cli-linha { gap: 64px; }
    #clientesSection .cli-text { width: min(calc(100% - 16px), 420px); text-align: left; }
    #clientesSection .cli-title { font-size: 1rem; }
    #clientesSection .cli-desc { font-size: .875rem; }
}
@media (max-width: 600px) {
    #clientesSection .cli-text { width: min(calc(100% - 8px), 360px); }
    #clientesSection .cli-vao {
        --phone-width: min(calc(100cqw - 8px), 360px);
        padding-top: min(calc((100% - 8px) * 1.55), 558px);
        margin-bottom: 24px;
    }
    #clientesSection .mk-semana span { font-size: max(.65em, 10px); }
    #clientesSection .mk-dia,
    #clientesSection .mk-vago { font-size: max(.82em, 12px); width: 1.85em; height: 1.85em; }
    #clientesSection .mk-rotulo { font-size: max(.76em, 11px); }
    #clientesSection .mk-apoio { font-size: max(.72em, 11px); }
    #clientesSection .mk-titulo { font-size: max(.86em, 12px); }
    #clientesSection .mk-dur { font-size: max(.72em, 11px); }
    #clientesSection .mk-etapa { font-size: max(.67em, 10px); }
    #clientesSection .mk-rot { font-size: max(.75em, 11px); }
    #clientesSection .mk-resumo-l { font-size: max(.8em, 11px); }
    #clientesSection .mk-campo-val { font-size: max(.86em, 13px); }
    #clientesSection .mk-agendar b { font-size: max(.8em, 12px); }
    #clientesSection .mk-fim-p { font-size: max(.82em, 12px); }
    #clientesSection .sf-bolha p { font-size: max(calc(var(--u) * 11.3), 13px); }
    #clientesSection .cli-title { font-size: 18px; margin-bottom: 12px; }
    #clientesSection .cli-desc { font-size: 15px; }
}

/* Luz cinza difusa dá profundidade ao palco, com as telas em primeiro plano. */
#clientesSection {
    --cli-tinta: #f5f5f7;
    --cli-tinta-2: #a1a1a6;
    z-index: 4;
    --cli-fundo:
        radial-gradient(ellipse 38% 48% at 29% 44%, rgba(164, 164, 172, .15) 0%, rgba(112, 112, 120, .06) 48%, transparent 78%),
        radial-gradient(ellipse 38% 48% at 71% 44%, rgba(164, 164, 172, .15) 0%, rgba(112, 112, 120, .06) 48%, transparent 78%),
        linear-gradient(180deg, #09090a 0%, #141416 46%, #0d0d0f 76%, #080809 100%);
    background: none;
    padding: 88px 0 96px;
}
/* O fundo ganha 100px de altura, sem alterar o encaixe do conteúdo. */
#clientesSection::before {
    content: "";
    position: absolute;
    inset: -50px 0;
    z-index: -1;
    background: var(--cli-fundo);
    pointer-events: none;
}
#clientesSection .cli-topo {
    width: min(88%, 900px);
    max-width: 900px;
    margin-bottom: 64px;
}
/* Títulos e descrições herdam a tipografia padrão da seção. */
@media (max-width: 960px) {
    #clientesSection {
        padding: 64px 0 72px;
        --cli-fundo:
            radial-gradient(ellipse 85% 30% at 50% 34%, rgba(164, 164, 172, .14) 0%, transparent 78%),
            radial-gradient(ellipse 85% 30% at 50% 75%, rgba(164, 164, 172, .14) 0%, transparent 78%),
            linear-gradient(180deg, #09090a 0%, #141416 46%, #0d0d0f 76%, #080809 100%);
    }
    #clientesSection .cli-topo { margin-bottom: 44px; }
}

/* A legenda cobre a base do aparelho, sem cortar o conteúdo da tela. */
#clientesSection .cli-card { isolation: isolate; }
#clientesSection .cli-vao {
    z-index: 0;
    margin-bottom: 0;
    padding-top: calc(min(calc((100% - 16px) * 1.55), 651px) + 24px);
}
#clientesSection .cli-text {
    position: relative;
    z-index: 3;
    align-self: center;
    box-sizing: border-box;
    width: min(100%, 484px);
    max-width: none;
    margin: -24px 0 0;
    padding: 28px 32px 30px;
    background: #141416;
    border: 1px solid #29292d;
    border-radius: 20px;
}
@media (min-width: 961px) {
    #clientesSection .cli-vao {
        /* Mesmo corte do aparelho, agora em 90% da escala original. */
        padding-top: calc(var(--cli-desktop-content) * 1.332 + 24px);
    }
    #clientesSection .cli-text {
        width: calc(100% + 104px);
        max-width: calc(var(--cli-desktop-phone) + 104px);
        flex: 1 0 auto;
    }
}
@media (max-width: 600px) {
    #clientesSection .cli-vao {
        --phone-width: min(calc(100cqw - 24px), 360px);
        padding-top: calc(max(min(calc((100% - 24px) * 1.55), 558px), 500px) + 24px);
    }
    #clientesSection .cli-text {
        width: min(100%, 400px);
        padding: 24px 20px;
        border-radius: 16px;
    }
}

/* Mesma paleta noturna da conversa na seção de cobrança. */
#clientesSection {
    --cli-chat-bg: #000;
    --cli-chat-chrome: #111;
    --cli-chat-incoming: #232625;
    --cli-chat-outgoing: #154d38;
    --cli-chat-text: #e9edef;
    --cli-chat-muted: #a5a7a8;
}
#clientesSection .sf-tela {
    color-scheme: dark;
    background: var(--cli-chat-bg);
    color: var(--cli-chat-text);
}
#clientesSection .cli-phone-status,
#clientesSection .sf-topo {
    background: var(--cli-chat-chrome);
    color: var(--cli-chat-text);
}
#clientesSection .sf-topo { box-shadow: 0 1px 0 #2b2b2b; }
#clientesSection .sf-voltar { stroke: var(--cli-chat-text); }
#clientesSection .sf-id b,
#clientesSection .sf-quem { color: #f5f5f7; }
#clientesSection .sf-id em { color: var(--cli-chat-muted); }
#clientesSection .sf-dia {
    background: var(--cli-chat-incoming);
    color: var(--cli-chat-muted);
    box-shadow: none;
}
#clientesSection .sf-bolha,
#clientesSection .sf-bolha p { color: var(--cli-chat-text); }
#clientesSection .sf-bolha--in,
#clientesSection .sf-dig--in { background: var(--cli-chat-incoming); }
#clientesSection .sf-bolha--out,
#clientesSection .sf-dig--out { background: var(--cli-chat-outgoing); }
#clientesSection .sf-meta { color: #9b9d9e; }
#clientesSection .sf-bolha--out .sf-meta { color: #a1b6af; }
#clientesSection .sf-dig i { background: #9b9d9e; }

/* Agenda noturna, com a mesma hierarquia visual e o roteiro original. */
#clientesSection .cli-agenda-screen,
#clientesSection .cli-booking-header { background: #111; color: #e9edef; }
#clientesSection .mk-peca {
    --mk-ink-1: #e9edef;
    --mk-ink-2: #c7cbce;
    --mk-ink-3: #a5a7a8;
    --mk-ink-4: #969b9f;
    --mk-ink-5: #71777a;
    --mk-az: #8db4ff;
    --mk-az-ch: #3267d3;
    --mk-no-az: #fff;
    --mk-anel: rgba(109, 156, 255, .23);
    --mk-anel-0: rgba(109, 156, 255, 0);
    --mk-cursor: #8db4ff;
    --mk-cursor-0: rgba(141, 180, 255, 0);
    --mk-sup-1: #232326;
    --mk-sup-2: #1c1c1e;
    --mk-sup-3: #1c1c1e;
    --mk-afunda: #303036;
    --mk-recuo: #111;
    --mk-fio-1: #3a3a42;
    --mk-fio-2: #35353d;
    --mk-fio-3: #303038;
    --mk-divisor: #2d2d33;
    color: var(--mk-ink-1);
}

/* Sobrescreve também as cores fixas da adaptação para celular. */
#clientesSection .mk-cartao,
#clientesSection .mk-esq,
#clientesSection .mk-dir { background: var(--mk-recuo); }
#clientesSection .mk-esq { border-color: var(--mk-divisor); }
#clientesSection .mk-rotulo { color: var(--mk-ink-3); }
#clientesSection .mk-seta,
#clientesSection .mk-semana span { color: var(--mk-ink-4); }
#clientesSection .mk-dia--ido { color: var(--mk-ink-5); }
#clientesSection .mk-dia-n { color: var(--mk-no-az); }
#clientesSection .mk-dur,
#clientesSection .mk-hora {
    color: var(--mk-ink-1);
    background: var(--mk-sup-1);
    border-color: var(--mk-fio-1);
}
#clientesSection .mk-dur--alvo,
#clientesSection .mk-hora--alvo {
    color: var(--mk-no-az);
    background: var(--mk-az-ch);
    border-color: var(--mk-az-ch);
}
#clientesSection .mk-resumo {
    background: var(--mk-sup-3);
    border-color: var(--mk-fio-3);
}
#clientesSection .mk-campo { background: var(--mk-sup-2); border-color: var(--mk-fio-2); }
#clientesSection .mk-tec { color: var(--mk-ink-1); background: var(--mk-sup-2); }
#clientesSection .mk-ph { color: var(--mk-ink-4); }
#clientesSection .mk-agendar {
    background: #2b2b30;
    box-shadow: inset 0 0 0 1px #45454d;
}
#clientesSection .mk-agendar b { color: var(--mk-no-az); }
#clientesSection .mk-selo { background: var(--mk-az-ch); color: var(--mk-no-az); }

/* Os keyframes originais usam as variáveis acima em todas as etapas. */

/* Os três campos são preenchidos em 1,8s; foco, cursor e confirmação
   acompanham a digitação. A etapa do calendário mantém o ritmo original. */
@media (prefers-reduced-motion: no-preference) {
    #clientesSection .cli-card.is-vivo .mk-tec--nome { animation-name: cliTypeName; }
    #clientesSection .cli-card.is-vivo .mk-campo--nome { animation-name: cliFocusName; }
    #clientesSection .cli-card.is-vivo .mk-ph--nome { animation-name: cliPlaceholderName; }
    #clientesSection .cli-card.is-vivo .mk-tec--mail { animation-name: cliTypeEmail; }
    #clientesSection .cli-card.is-vivo .mk-campo--mail { animation-name: cliFocusEmail; }
    #clientesSection .cli-card.is-vivo .mk-ph--mail { animation-name: cliPlaceholderEmail; }
    #clientesSection .cli-card.is-vivo .mk-tec--zap { animation-name: cliTypePhone; }
    #clientesSection .cli-card.is-vivo .mk-campo--zap { animation-name: cliFocusPhone; }
    #clientesSection .cli-card.is-vivo .mk-ph--zap { animation-name: cliPlaceholderPhone; }
    #clientesSection .cli-card.is-vivo .mk-ato--passo2 { animation-name: cliFormStage; }
    #clientesSection .cli-card.is-vivo .mk-ato--fim { animation-name: cliSuccessStage; }
    #clientesSection .cli-card.is-vivo .mk-selo { animation-name: cliSuccessSeal; }
    #clientesSection .cli-card.is-vivo .mk-fim-l { animation-name: cliSuccessLine; }
}
@keyframes cliTypeName {
    0%, 34.375% { width: 0; border-right-color: var(--mk-cursor-0); }
    34.6354% { width: 0; border-right-color: var(--mk-cursor); animation-timing-function: steps(12, end); }
    36.9792% { width: var(--w); border-right-color: var(--mk-cursor); }
    37.2396%, 100% { width: var(--w); border-right-color: var(--mk-cursor-0); }
}
@keyframes cliFocusName {
    0%, 34.375%, 37.2396%, 100% { border-color: var(--mk-fio-1); box-shadow: 0 0 0 0 var(--mk-anel-0); }
    34.6354%, 36.9792% { border-color: var(--mk-az-ch); box-shadow: 0 0 0 .2em var(--mk-anel); }
}
@keyframes cliPlaceholderName {
    0%, 34.6354% { opacity: 1; }
    34.6406%, 100% { opacity: 0; }
}
@keyframes cliTypeEmail {
    0%, 37.5% { width: 0; border-right-color: var(--mk-cursor-0); }
    37.7604% { width: 0; border-right-color: var(--mk-cursor); animation-timing-function: steps(22, end); }
    41.276% { width: var(--w); border-right-color: var(--mk-cursor); }
    41.5365%, 100% { width: var(--w); border-right-color: var(--mk-cursor-0); }
}
@keyframes cliFocusEmail {
    0%, 37.5%, 41.5365%, 100% { border-color: var(--mk-fio-1); box-shadow: 0 0 0 0 var(--mk-anel-0); }
    37.7604%, 41.276% { border-color: var(--mk-az-ch); box-shadow: 0 0 0 .2em var(--mk-anel); }
}
@keyframes cliPlaceholderEmail {
    0%, 37.7604% { opacity: 1; }
    37.7656%, 100% { opacity: 0; }
}
@keyframes cliTypePhone {
    0%, 41.7969% { width: 0; border-right-color: var(--mk-cursor-0); }
    42.0573% { width: 0; border-right-color: var(--mk-cursor); animation-timing-function: steps(15, end); }
    44.0104% { width: var(--w); border-right-color: var(--mk-cursor); }
    44.5313%, 100% { width: var(--w); border-right-color: var(--mk-cursor-0); }
}
@keyframes cliFocusPhone {
    0%, 41.7969%, 44.5313%, 100% { border-color: var(--mk-fio-1); box-shadow: 0 0 0 0 var(--mk-anel-0); }
    42.0573%, 44.0104% { border-color: var(--mk-az-ch); box-shadow: 0 0 0 .2em var(--mk-anel); }
}
@keyframes cliPlaceholderPhone {
    0%, 42.0573% { opacity: 1; }
    42.0625%, 100% { opacity: 0; }
}
@keyframes cliFormStage {
    0%, 30.9375% { opacity: 0; }
    32.8125%, 48.1771% { opacity: 1; }
    49.2188%, 100% { opacity: 0; }
}
@keyframes cliSuccessStage {
    0%, 7.2917%, 51.3021%, 100% { opacity: 1; }
    8.3333%, 49.4271% { opacity: 0; }
}
@keyframes cliSuccessSeal {
    0%, 7.2917%, 51.3021%, 100% { opacity: 1; transform: none; }
    8.3333%, 49.2188% { opacity: 0; transform: scale(.7); }
}
@keyframes cliSuccessLine {
    0%, 7.2917%, 51.5104%, 100% { opacity: 1; transform: none; }
    8.3333%, 49.4271% { opacity: 0; transform: translateY(.4em); }
}

/* Mesmo padrão de remetente e balões do WhatsApp em #experimente. */
#clientesSection .sf-fluxo { padding: calc(var(--u) * 12) calc(var(--u) * 14) 0; }
#clientesSection .sf-cena { gap: calc(var(--u) * 10); }
#clientesSection .sf-bolha {
    max-width: 94%;
    padding: calc(var(--u) * 8) calc(var(--u) * 9) calc(var(--u) * 6);
    border-radius: 14px;
    box-shadow: none;
}
#clientesSection .sf-bolha--in { border-bottom-left-radius: 4px; }
#clientesSection .sf-bolha--out { border-bottom-right-radius: 4px; }
#clientesSection .sf-bolha::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scaleY(-1);
}
#clientesSection .sf-bolha--in::before {
    left: -7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='%23232625' d='M1.533 2.568L8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z'/%3E%3C/svg%3E");
}
#clientesSection .sf-bolha--out::before {
    right: -7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath fill='%23154d38' d='M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z'/%3E%3C/svg%3E");
}
#clientesSection .sf-remetente {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    white-space: nowrap;
}
#clientesSection .sf-retrato {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
#clientesSection .sf-remetente .sf-quem { margin: 0; font-size: 12px; line-height: 1.2; }
#clientesSection .sf-verificada { width: 11px; height: 11px; flex: none; }
#clientesSection .sf-cargo { font-size: 10px; color: var(--cli-chat-muted); }
#clientesSection .sf-bolha strong { font-weight: 600; }
#clientesSection .sf-bolha p::after { display: none; }
#clientesSection .sf-meta {
    position: static;
    justify-content: flex-end;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.1;
}

/* A cliente confirma; depois, Sofi combina a remarcação e atualiza a agenda.
   Respostas rápidas, com tempo de leitura ao final de cada troca. */
@media (prefers-reduced-motion: no-preference) {
    #clientesSection .cli-card.is-vivo .sf-dig--1 { animation-delay: 500ms; }
    #clientesSection .cli-card.is-vivo .sf-ent--1 { animation-delay: 1200ms; }
    #clientesSection .cli-card.is-vivo .sf-dig--2 { animation-delay: 2400ms; }
    #clientesSection .cli-card.is-vivo .sf-ent--2 { animation-delay: 3100ms; }
    #clientesSection .cli-card.is-vivo .sf-dig--confirmada { animation: sfDig 860ms linear 4300ms backwards; }
    #clientesSection .cli-card.is-vivo .sf-ent--confirmada { animation: sfNasce 320ms ease-out 5000ms backwards; }
    #clientesSection .cli-card.is-vivo .sf-cena--1 { animation-delay: 9000ms; }
    #clientesSection .cli-card.is-vivo .sf-cena--2 { animation-delay: 9400ms; }
    #clientesSection .cli-card.is-vivo .sf-dig--3 { animation-delay: 9600ms; }
    #clientesSection .cli-card.is-vivo .sf-ent--3 { animation-delay: 10300ms; }
    #clientesSection .cli-card.is-vivo .sf-dig--4 { animation-delay: 12500ms; }
    #clientesSection .cli-card.is-vivo .sf-ent--4 { animation-delay: 13200ms; }
    #clientesSection .cli-card.is-vivo .sf-dig--5 { animation-delay: 14500ms; }
    #clientesSection .cli-card.is-vivo .sf-ent--5 { animation-delay: 15200ms; }
    #clientesSection .cli-card.is-vivo .sf-bolha { animation-duration: 320ms; animation-timing-function: ease-out; }
    #clientesSection .cli-card.is-vivo.is-parado .sf-bolha,
    #clientesSection .cli-card.is-vivo.is-parado .sf-dig { animation-play-state: paused; }
}