/* ===== exemplos: faixa de propostas reais em movimento ===== */
.exemplos{overflow:hidden}
.faixa{margin-top:38px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trilho{display:flex;gap:22px;width:max-content;animation:desliza 70s linear infinite;padding:10px 0 30px}
.faixa:hover .trilho{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(calc(-50% - 11px))}}
.ex{width:420px;margin:0;flex:none}
.ex-tela{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -32px rgba(11,31,23,.45),0 0 0 1px rgba(11,31,23,.07);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ex-tela::before{content:"";display:block;height:24px;background:radial-gradient(circle at 14px 12px,#d9dce1 3.5px,transparent 4px),radial-gradient(circle at 28px 12px,#d9dce1 3.5px,transparent 4px),radial-gradient(circle at 42px 12px,#d9dce1 3.5px,transparent 4px),#f1f2f4;box-shadow:inset 0 -1px 0 #e6e8ec}
.ex:hover .ex-tela{transform:translateY(-6px) scale(1.015)}
.ex img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.ex figcaption{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding:0 4px}
.ex figcaption b{font-size:14.5px}.ex figcaption span{font-size:13px;color:#6b7385}
@media (max-width:640px){.ex{width:300px}.trilho{animation-duration:55s}}
@media (prefers-reduced-motion:reduce){.trilho{animation:none}.faixa{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* ===== demo "sua marca e o seu tom" ===== */
.marca-sec .agent{align-items:center}
.dm{--c1:#cfd6de;--c2:#e8ecf0;--ink:#3b4351;position:relative;max-width:560px;width:100%;margin-left:auto}
.dm-legenda{min-height:58px;margin-bottom:12px}
.dm-legenda b{display:block;font:800 20px/1.2 Lexend,'Plus Jakarta Sans',system-ui;color:#0b2a1f}
.dm-legenda span{display:block;margin-top:4px;font-size:14.5px;color:#5b6276}
.dm-legenda.troca b,.dm-legenda.troca span{animation:dm-sobe .5s cubic-bezier(.22,1,.36,1) both}.dm-legenda.troca span{animation-delay:.08s}
.dm-tela{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:16px;border-radius:22px;background:#fff;box-shadow:0 40px 90px -40px rgba(11,31,23,.45),0 0 0 1px rgba(11,31,23,.06);min-height:360px}
.dm-ia{display:flex;flex-direction:column;gap:10px}
.dm-ia .av{display:flex;align-items:center;gap:8px;font:700 12.5px 'Plus Jakarta Sans';color:#0b2a1f}.dm-ia .av img{width:26px;height:26px;border-radius:8px}
.dm-input{display:flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #e3e7ec;font-size:13px;color:#1c2433}
.dm-input .url{white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0)}
.dm[data-f="1"] .dm-input .url{animation:dm-digita 1.5s .4s steps(22,end) forwards}
.dm:not([data-f="1"]) .dm-input .url{clip-path:none}
.dm-input i{margin-left:auto;width:26px;height:26px;border-radius:8px;background:#0E8A5F;display:grid;place-items:center}
.dm[data-f="1"] .dm-input i{animation:dm-aperta .3s 2.1s}
.dm-ext{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#f6f8f7}
.dm-ext small{font:700 10.5px 'Plus Jakarta Sans';letter-spacing:.08em;text-transform:uppercase;color:#7b8291}
.dm-ext img{height:30px;align-self:flex-start}
.dm-cores{display:flex;gap:7px}.dm-cores i{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.dm-fonte{font:600 15px 'Fraunces',serif;color:#3b1023}
.dm-ext > *{opacity:0;transform:scale(.85)}
.dm:not([data-f="1"]) .dm-ext > *{animation:dm-estala .45s cubic-bezier(.22,1.4,.36,1) forwards}
.dm[data-f="2"] .dm-ext > :nth-child(1){animation-delay:.1s}.dm[data-f="2"] .dm-ext > :nth-child(2){animation-delay:.4s}.dm[data-f="2"] .dm-ext > :nth-child(3){animation-delay:.9s}.dm[data-f="2"] .dm-ext > :nth-child(4){animation-delay:1.3s}.dm[data-f="2"] .dm-ext > :nth-child(5){animation-delay:1.6s}
.dm:not([data-f="1"]):not([data-f="2"]) .dm-ext > *{animation-duration:.01s}
.dm-tons{display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .4s}
.dm[data-f="4"] .dm-tons{opacity:1}
.dm-tons button{all:unset;padding:7px 10px;border-radius:10px;font:700 12.5px 'Plus Jakarta Sans';color:#5b6276;box-shadow:inset 0 0 0 1.5px #e3e7ec;transition:all .3s}
.dm-tons button.on{color:#fff;background:#0E8A5F;box-shadow:0 8px 16px -10px rgba(14,138,95,.9)}
/* a proposta: começa cinza e ganha a marca */
.dm-prop{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #e8ecea;display:flex;flex-direction:column}
.dm-capa{padding:20px 18px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;transition:background 1s;position:relative;min-height:170px}
.dm-capa .lg{height:26px;opacity:0;transition:opacity .6s;filter:brightness(0) invert(1)}
.dm-capa small{display:block;margin-top:14px;font:700 10px 'Plus Jakarta Sans';letter-spacing:.14em;opacity:.8}
.dm-capa h4{font:600 20px/1.2 'Fraunces',Georgia,serif;margin:6px 0 0;min-height:48px;transition:opacity .3s}
.dm-capa h4.sai{opacity:0}
.dm-corpo{padding:14px 18px;display:grid;gap:9px;flex:1}
.dm-corpo i{display:block;height:9px;border-radius:5px;background:#eceff3}.dm-corpo i:nth-child(2){width:80%}.dm-corpo i:nth-child(3){width:60%}
.dm-corpo b{margin-top:6px;align-self:end;justify-self:start;padding:9px 16px;border-radius:10px;background:var(--c1);color:#fff;font:800 12.5px 'Plus Jakarta Sans';transition:background 1s}
.dm[data-f="3"],.dm[data-f="4"]{--c1:#b4235a;--c2:#3b1023}
.dm[data-f="3"] .dm-capa .lg,.dm[data-f="4"] .dm-capa .lg{opacity:1}
.dm-cursor{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(14,138,95,.25);box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(14,138,95,.7);pointer-events:none;opacity:0;transition:left .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1),opacity .3s;z-index:3}
.dm[data-f="4"] .dm-cursor{opacity:1}
@keyframes dm-digita{to{clip-path:inset(0 0 0 0)}}
@keyframes dm-aperta{50%{transform:scale(.85)}}
@keyframes dm-estala{to{opacity:1;transform:none}}
@keyframes dm-sobe{from{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){.dm-tela{grid-template-columns:1fr}.dm-tons{flex-direction:row;flex-wrap:wrap}.dm-capa{min-height:150px}}
@media (prefers-reduced-motion:reduce){.dm *{animation:none!important;transition:none!important}.dm-ext > *{opacity:1;transform:none}.dm-input .url{clip-path:none}}

/* ===== revelar ao rolar (revela.js) ===== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv.vis{opacity:1;transform:none}
.shot-agent.rv{transform:translateX(40px) rotate(1.5deg)}
.shot-agent.rv.vis{transform:none;animation:flutua 7s 1s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-8px)}}
.feat .fi{transition:transform .35s cubic-bezier(.22,1.6,.36,1)}
.feat:hover .fi{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
/* antes × depois */
.vs-col li{position:relative;transition:color .4s,opacity .4s}
.antes li .tx{background:linear-gradient(#e11d48,#e11d48) left 55%/0% 2px no-repeat;transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.vs-anima .antes li{color:#9aa1ad}
.vs-anima .antes li .tx{background-size:100% 2px}
.vs-anima .antes li:nth-child(1),.vs-anima .antes li:nth-child(1) .tx{transition-delay:.1s}.vs-anima .antes li:nth-child(2),.vs-anima .antes li:nth-child(2) .tx{transition-delay:.35s}
.vs-anima .antes li:nth-child(3),.vs-anima .antes li:nth-child(3) .tx{transition-delay:.6s}.vs-anima .antes li:nth-child(4),.vs-anima .antes li:nth-child(4) .tx{transition-delay:.85s}
.vs-anima .antes li:nth-child(5),.vs-anima .antes li:nth-child(5) .tx{transition-delay:1.1s}
.depois li{opacity:.35;transform:translateX(-6px);transition:opacity .45s,transform .45s cubic-bezier(.22,1.4,.36,1)}
.vs-anima .depois li{opacity:1;transform:none}
.vs-anima .depois li:nth-child(1){transition-delay:1.5s}.vs-anima .depois li:nth-child(2){transition-delay:1.7s}.vs-anima .depois li:nth-child(3){transition-delay:1.9s}.vs-anima .depois li:nth-child(4){transition-delay:2.1s}.vs-anima .depois li:nth-child(5){transition-delay:2.3s}
.vs-col.depois{transition:box-shadow .6s 2.4s,transform .6s 2.4s}
.vs-anima .vs-col.depois{box-shadow:0 30px 60px -30px rgba(14,138,95,.55),0 0 0 2px rgba(14,138,95,.35);transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}.depois li{opacity:1;transform:none}}