/* Revind Blz · site do salão (teste local, abre direto do disco).
   Cores: creme #F3ECE1, papel #FBF7F0, areia #E8DCCB, linha #DDD0BD, taupe #6B5A4E, argila #B4532F (clara #E0A07F, escura #9A4423), café #2B1E18.
   Fontes: Instrument Serif 400 (títulos, itálico argila na palavra-herói) e Instrument Sans (texto, rótulos e botões). */

@font-face{font-family:"Instrument Serif";src:url("fontes/InstrumentSerif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fontes/InstrumentSerif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fontes/InstrumentSans-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --fundo:#F3ECE1;
  --creme:#F3ECE1;
  --tinta:#2B1E18;
  --tx2:#4A3B32;
  --cz:#6B5A4E;
  --ap:#CFC0AA;
  --argila:#B4532F;
  --arg-cl:#E0A07F;
  --arg-es:#9A4423;
  --areia:#E8DCCB;
  --linha:#DDD0BD;
  --papel:#FBF7F0;
  --card:#FBF7F0;
  --lado:clamp(20px,5.56vw,80px);
  --topo-h:72px;
  --sec:clamp(88px,9.7vw,140px);
  --sec-in:clamp(80px,9vw,132px);
  --f:"Instrument Sans","Segoe UI",Roboto,Arial,sans-serif;
  --ft:"Instrument Serif",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo-h) + 12px)}
html.anim{scroll-behavior:smooth}
body{background:var(--fundo);color:var(--tinta);font-family:var(--f);font-weight:400;font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- peças comuns ---------- */
.gigante{font-family:var(--ft);font-weight:400;text-transform:none;line-height:1.02;letter-spacing:-.012em}
.t2{font-family:var(--ft);font-weight:400;text-transform:none;font-size:clamp(34px,3.9vw,56px);line-height:1.06;letter-spacing:-.01em}
.gigante em,.t2 em,.it,h1 em,h2 em,h3 em{font-style:italic;font-weight:400;color:var(--argila)}
.rotulo{display:flex;align-items:center;font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--cz)}
.rotulo::before{content:"";flex:none;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--argila)}
.nota{font-size:13px;line-height:1.4;color:var(--cz)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--argila);color:var(--creme);font-family:var(--f);font-weight:600;font-size:16px;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s ease,transform .15s ease}
.btn:hover{background:var(--arg-es)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.btn-rep:focus-visible,.lk:focus-visible{outline:2px solid var(--arg-cl);outline-offset:3px}
.btn.com-seta{padding:0 9px 0 26px}
.bt-c{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--creme);color:var(--argila)}
.bt-c svg{width:16px;height:16px}
.btn.peq{height:46px;padding:0 20px;font-size:15px}
.btn.peq.com-seta{padding:0 7px 0 20px}
.btn.peq .bt-c{width:32px;height:32px}

/* ---------- 1. topo fixo, fundo claro translúcido ---------- */
.topo{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--topo-h);background:transparent;transition:background .35s ease,box-shadow .3s ease}
.topo.rolou{background:rgba(43,30,24,.84);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 rgba(243,236,225,.1)}
.topo-in{height:100%;padding:0 var(--lado);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.marca{display:block;justify-self:start;line-height:0}
.menu-marca{display:block;height:1.5rem;width:auto;aspect-ratio:818/145;color:var(--creme)}
.topo nav{display:flex;gap:clamp(20px,2.5vw,36px)}
.lk{font-size:15px;color:var(--creme);white-space:nowrap;transition:color .2s ease}
.lk:hover{color:var(--arg-cl)}
.topo .btn{justify-self:end}

/* ---------- celular (mockup) ---------- */
.cel{--cw:300px;position:relative;width:var(--cw);aspect-ratio:9/19.5;padding:calc(var(--cw)*.034);border-radius:calc(var(--cw)*.15);background:#2B1E18;box-shadow:0 44px 70px -26px rgba(43,30,24,.4),0 10px 22px -10px rgba(43,30,24,.22)}
.cel::after{content:"";position:absolute;z-index:5;top:calc(var(--cw)*.062);left:50%;width:calc(var(--cw)*.27);height:calc(var(--cw)*.072);transform:translateX(-50%);border-radius:99px;background:#2B1E18}
.cel-tela{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--cw)*.118);background:#F3ECE1}
.cel.esc{box-shadow:0 0 0 1.5px #5A463A,0 34px 60px -24px rgba(0,0,0,.7)}
.cel.esc .cel-tela{background:#3A2B23}

/* ---------- 2. abertura ---------- */
.abertura{--tf:min(104px,calc((100vw - 2*var(--lado))/14.9));--ov:.85;--cw:clamp(250px,21vw,320px);position:relative;padding:calc(var(--topo-h) + 56px) var(--lado) 70px;min-height:calc(168px + var(--tf)*var(--ov) + var(--cw)*19.5/9 + 30px)}
.abertura .rotulo{margin-bottom:24px}
.titulo-a{font-size:var(--tf);position:relative;z-index:1}
.ln{display:block;overflow:hidden;padding:.1em .08em .2em;margin:-.1em -.08em -.2em}
.ln>span{display:block;white-space:nowrap}
.ab-baixo{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:32px;margin-top:48px;font-size:16px;line-height:1.45}
.ab-baixo .c1{color:var(--tinta)}
.ab-baixo .c2{color:var(--cz)}
.ab-acao{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:32px}
.cel-ab{--cw:clamp(250px,21vw,320px);position:absolute;z-index:3;right:var(--lado);top:calc(168px + var(--tf)*var(--ov))}

/* ---------- 3. rolagem com o celular fixo ---------- */
.rol{padding:var(--sec) var(--lado) 0}
.rol-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;margin-top:40px;align-items:start}
.passo{min-height:56vh;max-width:540px;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.passo h3{font-family:var(--ft);font-weight:400;font-size:46px;line-height:1.04;letter-spacing:-.01em;color:var(--ap);transition:color .5s ease}
.passo p{margin-top:16px;font-size:17px;line-height:1.45;color:var(--ap);transition:color .5s ease}
.passo.ativo h3,.passo.ativo p{color:var(--tinta)}
.pto{display:inline-block;width:10px;height:10px;margin-left:12px;border-radius:50%;background:var(--argila);vertical-align:middle;opacity:0;transform:scale(.2);transition:opacity .4s ease,transform .4s ease}
.passo.ativo .pto{opacity:1;transform:none}
.passo-mob{display:none}
.rol-cel{--ch:clamp(520px,calc(100vh - 150px),720px);--cw:calc(var(--ch)*9/19.5);position:sticky;top:max(88px,calc((100vh - var(--ch))/2 + 36px));align-self:start;justify-self:center}
.rol-cel .cel{--cw:calc(var(--ch)*9/19.5);height:var(--ch)}
.tl{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tl.ativa{opacity:1;transform:none}

/* ---------- 4. manifesto: seção preta de borda curva, com grão, rótulos verticais e o símbolo vazado ---------- */
.mani{--curva:clamp(44px,7.5vw,112px);position:relative;margin-top:var(--sec);padding:calc(var(--curva) + clamp(56px,7vw,100px)) var(--lado);background:#2B1E18;color:var(--creme);border-radius:50% / var(--curva);overflow:hidden}
.grao{position:absolute;inset:0;width:100%;height:100%;opacity:.1;pointer-events:none}
.mani-v{position:absolute;top:50%;writing-mode:vertical-rl;font-weight:600;font-size:11px;line-height:1;letter-spacing:.32em;text-transform:uppercase;color:#BBAA96;white-space:nowrap}
.mani-e{left:calc(var(--lado)/2 - 7px);transform:translateY(-50%) rotate(180deg)}
.mani-d{right:calc(var(--lado)/2 - 7px);transform:translateY(-50%)}
.mani-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,5vw,72px);max-width:1280px;margin:0 auto}
.mani-t{font-size:clamp(34px,4.4vw,68px);line-height:1.05;color:var(--creme)}
.mani .ln>span{white-space:normal}
.mani .ln.lt>span{color:var(--arg-cl)}
.mani-p{max-width:560px;margin-top:clamp(24px,2.6vw,36px);font-size:19px;line-height:1.5;color:rgba(243,236,225,.8)}
.mani-sim{justify-self:center;width:clamp(220px,32vw,460px);height:auto;overflow:visible}
.mani-sim .sim{fill:none;stroke:var(--arg-cl);stroke-width:5;stroke-linejoin:round}

/* ---------- 5. o método ---------- */
.metodo{padding:var(--sec) var(--lado) 0}
.met-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}
.met-n{display:block;overflow:hidden;font-size:clamp(96px,12.5vw,180px);line-height:.8;letter-spacing:0}
.met-n>span{display:block}
.met h3{margin-top:4px;font-family:var(--ft);font-weight:400;font-size:32px;line-height:1.08}
.met p{margin-top:12px;font-size:17px;line-height:1.5;color:#4A3B32}
.marc{margin-top:12px;font-size:17px;line-height:1.5;color:#4A3B32}
.marc li{position:relative;padding-left:18px}
.marc li+li{margin-top:7px}
.marc li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--argila)}

/* ---------- 6. os números ---------- */
.nums{padding:calc(var(--sec)/2) var(--lado) 0}
.nums-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.card-n{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:240px;padding:32px;border-radius:20px;background:var(--card)}
.card-n strong{align-self:flex-end;font-family:var(--ft);font-weight:400;font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.01em;text-align:right}
.card-n p{font-size:15px;line-height:1.4;max-width:36ch;color:var(--tx2)}
.nums-nota{margin-top:20px;font-size:13px;line-height:1.4;color:var(--cz)}

/* ---------- 7. antes e depois ---------- */
.ad{margin:var(--sec) var(--lado) 0;padding:clamp(28px,4.4vw,64px);border-radius:28px;background:var(--tinta);color:var(--creme)}
.ad h2 span{display:block}
.ad h2 .l2{color:var(--arg-cl)}
.ad-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(32px,5vw,72px);margin-top:clamp(36px,4vw,56px);align-items:center}
.ad-ciclos{grid-column:1;grid-row:1}
.btn-rep{grid-column:1;grid-row:2;justify-self:start;margin-top:32px;height:40px;padding:0 18px;border:1.5px solid #6B5A4E;border-radius:999px;background:transparent;color:var(--creme);font-family:var(--f);font-weight:600;font-size:14px;line-height:1;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.btn-rep:hover{border-color:var(--arg-cl);color:var(--arg-cl)}
.ad-cel{grid-column:2;grid-row:1/span 2;justify-self:center;--cw:clamp(250px,22vw,300px)}
.ad-cel .cel{--cw:clamp(250px,22vw,300px)}
.ciclo+.ciclo{margin-top:44px}
.ciclo-r{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cz);margin-bottom:6px}
.agora .ciclo-r{color:var(--arg-cl)}
.ciclo svg{width:100%;height:auto;overflow:visible}
.ciclo .seg{fill:none;stroke:var(--arg-cl);stroke-width:3.5;stroke-linecap:butt}
.agora .pt{fill:var(--arg-cl)}
.ciclo .pt{transform-box:fill-box;transform-origin:center}
.ciclo-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;text-align:center;font-size:15px;line-height:1.25}
.ciclo-l li{padding:0 4px}
.antes .ciclo-l li{color:var(--ap)}
.antes .ciclo-l .fim{opacity:.55}
.agora .ciclo-l li{color:var(--creme)}

/* conversa desenhada, sem marca de aplicativo */
.chat{display:flex;flex-direction:column;height:100%;background:#3A2B23;color:var(--creme)}
.chat-top{padding:calc(var(--cw)*.1 + 8px) 16px 12px;border-bottom:1px solid #4A382E;text-align:center;font-weight:600;font-size:15px}
.chat-corpo{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px 14px}
.bal{max-width:86%;padding:10px 13px 7px;border-radius:18px;font-size:14px;line-height:1.35}
.bal.b{align-self:flex-start;background:#4A382E;border-bottom-left-radius:5px}
.bal.c{align-self:flex-end;background:var(--argila);color:var(--creme);border-bottom-right-radius:5px}
.bal time{display:block;margin-top:4px;text-align:right;font-size:12px;line-height:1;opacity:.6}
.dig{display:none;align-self:flex-start;gap:5px;padding:14px 15px;border-radius:18px 18px 18px 5px;background:#4A382E}
.dig i{display:block;width:7px;height:7px;border-radius:50%;background:#A89684;animation:digita 1.1s ease-in-out infinite}
.dig i:nth-child(2){animation-delay:.15s}
.dig i:nth-child(3){animation-delay:.3s}
.chat-in{flex:none;height:38px;margin:0 12px 16px;border:1px solid #5A463A;border-radius:999px}
@keyframes digita{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes balao{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- 8. pílulas ---------- */
.pil{padding:var(--sec) var(--lado) 0;text-align:center}
.pil h2{max-width:1040px;margin:0 auto;font-size:clamp(32px,3.9vw,56px);line-height:1.02}
.pil-fila{max-width:1080px;margin:48px auto 0}
.pil-fila+.pil-fila{margin-top:44px}
.pil-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.pilula{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:999px;background:var(--card);color:var(--tinta);font-size:16px;line-height:1.2}
.pilula.ct{box-shadow:inset 0 0 0 1.5px var(--argila)}
.pilula.p{background:var(--tinta);color:var(--creme)}

/* ---------- 9. chamada final ---------- */
.cta{padding:var(--sec) var(--lado) 0;text-align:center}
.cta h2{font-size:clamp(42px,6vw,88px);line-height:1.04}
.cta h2 small{font-family:var(--f);font-weight:400;text-transform:none;font-size:clamp(20px,1.95vw,28px);letter-spacing:0;line-height:1}
.cta-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,6vw,96px);margin-top:48px;padding:clamp(24px,3.6vw,52px);border-radius:20px;background:var(--card);text-align:left}
.cel-cta{--cw:clamp(230px,20vw,280px)}
.cta-txt{max-width:460px;justify-self:center}
.cta-txt p{font-size:17px;line-height:1.5;margin-bottom:28px}

/* ---------- 10. rodapé ---------- */
.rod{--pad:clamp(28px,3.6vw,56px);margin:var(--sec) 0 0;padding:var(--pad) var(--lado);border-radius:20px 28px 0 0;background:var(--tinta);color:var(--creme);overflow:hidden}
.rod-logo{margin-bottom:clamp(8px,1.5vw,20px)}
.rodape-marca{display:block;height:clamp(40px,6.4vw,92px);width:auto;aspect-ratio:818/145;color:var(--creme)}
.rod-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(32px,4vw,56px);font-size:14px;line-height:1.7}
.rod-cols h4{margin-bottom:10px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,236,225,.6)}
.rod-cols a{transition:color .2s ease}
.rod-cols a:hover{color:var(--arg-cl)}
.rod-excl{align-self:end}
.rod-fim{margin-top:clamp(28px,3.4vw,48px);font-size:12px;line-height:1.4;color:rgba(243,236,225,.6)}

/* ---------- animações (só com a classe .anim, que o script liga se não houver pedido de menos movimento) ---------- */
.anim [data-rev="sobe"]{opacity:0;transform:translateY(40px)}
.anim [data-rev="desce"]{opacity:0;transform:translateY(-36px)}
.anim [data-rev="sobe"].in,.anim [data-rev="desce"].in{opacity:1;transform:none;transition:opacity .8s ease var(--d,0s),transform .95s cubic-bezier(.2,.7,.2,1) var(--d,0s)}

/* abertura: título linha por linha, de dentro da máscara; celular sobe com desfoque saindo */
.anim .titulo-a .ln>span{transform:translateY(108%)}
.anim .abertura.on .titulo-a .ln>span{transform:none;transition:transform 1.1s cubic-bezier(.19,.9,.22,1) calc(var(--i)*.16s + .1s)}
.anim .ab-fade{opacity:0;transform:translateY(16px)}
.anim .abertura.on .ab-fade{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform .9s ease var(--d,0s)}
.anim .cel-ab{opacity:0;transform:translateY(150px);filter:blur(14px)}
.anim .cel-ab.vem{opacity:1;transform:none;filter:blur(0);transition:opacity .9s ease .5s,transform 1.4s cubic-bezier(.19,.9,.22,1) .5s,filter 1.2s ease .5s}

/* método: números rolam de baixo pra cima, um depois do outro */
.anim .met-n>span{transform:translateY(105%)}
.anim .met-grade.in .met-n>span{transform:none;transition:transform 1s cubic-bezier(.19,.9,.22,1) calc(var(--i)*.22s)}
.anim .met h3,.anim .met p,.anim .met .marc{opacity:0;transform:translateY(14px)}
.anim .met-grade.in h3,.anim .met-grade.in p,.anim .met-grade.in .marc{opacity:1;transform:none;transition:opacity .7s ease .5s,transform .7s ease .5s}

/* antes e depois: linhas se desenham */
.anim .ciclo .seg{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.anim .ad.rodando .ciclo .seg{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.6s) ease-in-out var(--d,0s),opacity .01s linear var(--d,0s)}
.anim .ciclo .pt{opacity:0;transform:scale(.2)}
.anim .ad.rodando .ciclo .pt{opacity:1;transform:none;transition:opacity .4s ease var(--d,0s),transform .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.anim .ciclo-l li{opacity:0;transform:translateY(8px)}
.anim .ad.rodando .ciclo-l li{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
.anim .antes.ciclo .ciclo-l .fim{opacity:0}
.anim .ad.rodando .antes .ciclo-l .fim{opacity:.55}

/* conversa: balões um por um, com três pontinhos antes de cada mensagem do salão */
.anim .bal{display:none}
.anim .bal.vis{display:block;animation:balao .4s cubic-bezier(.2,.8,.3,1) both}
.anim .dig.vis{display:flex}
html:not(.anim) .btn-rep{display:none}

/* manifesto: título sobe linha por linha, a linha argila entra por último, o símbolo desenha o contorno */
.anim .mani .ln>span{transform:translateY(108%)}
.anim .mani.in .ln>span{transform:none;transition:transform 1.1s cubic-bezier(.19,.9,.22,1) calc(var(--i)*.16s + .1s)}
.anim .mani-p{opacity:0;transform:translateY(14px)}
.anim .mani.in .mani-p{opacity:1;transform:none;transition:opacity .8s ease 1.2s,transform .8s ease 1.2s}
.anim .mani-sim .sim{stroke-dasharray:1 1;stroke-dashoffset:1}
.anim .mani.in .mani-sim .sim{stroke-dashoffset:0;transition:stroke-dashoffset 2.8s cubic-bezier(.5,0,.2,1) .4s}

/* pílulas: caem e se encaixam */
.anim .pilula{opacity:0;transform:translateY(-90px) rotate(var(--r,-4deg))}
.anim .pil-fila.in .pilula{opacity:1;transform:none;transition:transform .75s cubic-bezier(.34,1.5,.64,1) calc(var(--i)*.075s + var(--b,0s)),opacity .35s ease calc(var(--i)*.075s + var(--b,0s))}


/* ---------- páginas "O sistema" e "Sobre": peças novas ---------- */

/* menu: item da página atual marcado, botão de menu no celular de mão */
.lk{position:relative}
.lk[aria-current="page"]{font-weight:600}
.lk[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--arg-cl)}
.menu-bt{display:none;flex:none;width:42px;height:42px;padding:0;border:1.5px solid rgba(243,236,225,.4);border-radius:50%;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-bt:focus-visible{outline:2px solid var(--arg-cl);outline-offset:3px}
.menu-bt i{display:block;width:16px;height:2px;border-radius:2px;background:var(--creme);transition:transform .25s ease,opacity .2s ease}
.topo.aberto .menu-bt i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topo.aberto .menu-bt i:nth-child(2){opacity:0}
.topo.aberto .menu-bt i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* abertura das páginas internas */
.ab2{--tf:clamp(44px,6.2vw,96px);min-height:0}
.ab2-sub{max-width:640px;margin-top:32px;font-size:19px;line-height:1.5;color:var(--tx2)}
.ab2 .ab-acao{margin-top:28px}

/* janela do painel atrás do celular (O sistema): o desenho da janela está no bloco m3- */
.jan-wrap{position:relative;max-width:1100px;margin:56px auto 0;padding-bottom:7%}
.jan-wrap .cel-jan{--cw:clamp(180px,17vw,250px);position:absolute;right:3%;bottom:0;top:auto;margin:0}
.anim .jan-wrap .m3-jan{opacity:0;transform:translateY(40px)}

/* trilho do atendimento (cartão preto) */
.tri{margin:var(--sec) var(--lado) 0;padding:clamp(28px,4.4vw,64px);border-radius:28px;background:var(--tinta);color:var(--creme)}
.tri .ciclo{max-width:900px;margin:clamp(24px,3vw,40px) auto 0}
.tri .ciclo-l li b{display:block;margin-bottom:.25em;font-weight:700;font-size:.92em;letter-spacing:.1em}
.tri .ciclo-l li span{display:block;font-size:.92em;line-height:1.3;color:var(--ap)}
.anim .tri.in .ciclo .seg{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t,.6s) ease-in-out var(--d,0s),opacity .01s linear var(--d,0s)}
.anim .tri.in .ciclo .pt{opacity:1;transform:none;transition:opacity .4s ease var(--d,0s),transform .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.anim .tri.in .ciclo-l li{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}

/* quem vê o quê */
.vq{padding:var(--sec) var(--lado) 0}
.vq-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.card-v{min-height:220px;padding:32px;border-radius:20px;background:var(--card)}
.card-v h3{font-family:var(--ft);font-weight:400;font-size:clamp(32px,3vw,42px);line-height:1.05}
.card-v p{margin-top:16px;font-size:17px;line-height:1.5;color:#4A3B32}

/* perguntas que abrem e fecham */
.faq{width:100%;max-width:calc(1000px + 2*var(--lado));margin:0 auto;padding:var(--sec) var(--lado) 0}
.faq-lista{margin-top:36px;border-top:1.5px solid rgba(43,30,24,.14)}
.faq-i{border-bottom:1.5px solid rgba(43,30,24,.14)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 0;border:0;background:none;color:var(--tinta);font-family:var(--f);font-weight:600;font-size:clamp(18px,1.7vw,22px);line-height:1.3;text-align:left;cursor:pointer}
.faq-q:focus-visible{outline:2px solid var(--argila);outline-offset:4px;border-radius:6px}
.faq-m{position:relative;flex:none;width:34px;height:34px;border:1.5px solid var(--tinta);border-radius:50%}
.faq-m::before,.faq-m::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--tinta);transition:transform .3s ease}
.faq-m::after{transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-m::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden}
.faq-a p{max-width:640px;padding:0 54px 26px 0;font-size:18px;line-height:1.5;color:#4A3B32}
.faq-on .faq-a{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s ease,visibility 0s linear .4s}
.faq-on .faq-i.aberto .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s ease,visibility 0s}

/* partes provisórias: borda tracejada argila e etiqueta */
.prov{position:relative;border:2px dashed var(--argila);border-radius:18px}
.prov-et{position:absolute;top:-.8em;left:16px;padding:.3em .75em;border-radius:99px;background:var(--argila);color:var(--creme);font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.14em}
.faq-a .prov{margin:14px 0 26px;padding:24px 20px 16px}
.faq-a .prov p{padding:0}

/* sobre: manifesto com três frases, trajetória, cartão em elipse, fotos, fundador, pra quem é */
.mani-t.m2{font-size:clamp(30px,3.5vw,54px)}
.trj{padding:var(--sec) var(--lado) 0}
.trj .t2{max-width:900px;margin-top:14px}
.prov-card{max-width:420px;margin-top:44px;padding:30px 24px 22px;font-weight:600;font-size:18px;line-height:1.3}
.traj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:56px}
.et2{position:relative;padding-top:30px}
.et2::before{content:"";position:absolute;top:0;left:0;right:-32px;height:2px;background:#DDD0BD;transform-origin:left center}
.et2:last-child::before{right:0}
.et2::after{content:"";position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--argila)}
.et2 h3{margin-top:10px;font-family:var(--ft);font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.08}
.mkm{display:block;overflow:hidden;padding-bottom:.08em}
.mkm>span{display:block}
.et2>p:last-child{margin-top:14px;font-size:16px;line-height:1.5;color:#4A3B32}
.anim .traj .et2::before{transform:scaleX(0)}
.anim .traj.in .et2::before{transform:none;transition:transform .9s ease calc(var(--i)*.25s)}
.anim .traj .et2::after{transform:scale(0)}
.anim .traj.in .et2::after{transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*.25s)}
.anim .traj .mkm>span{transform:translateY(105%)}
.anim .traj.in .mkm>span{transform:none;transition:transform 1s cubic-bezier(.19,.9,.22,1) calc(var(--i)*.25s + .2s)}
.anim .traj .et2>p{opacity:0;transform:translateY(12px)}
.anim .traj.in .et2>p{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i)*.25s + .5s),transform .7s ease calc(var(--i)*.25s + .5s)}

.mani.el{padding:calc(var(--curva) + clamp(40px,5vw,72px)) var(--lado)}
.mani-c{position:relative;display:grid;gap:clamp(30px,3.8vw,54px);max-width:900px;margin:0 auto;text-align:center}
.pilar h2{font-size:clamp(34px,5vw,70px);line-height:1.02}
.pilar-i{margin-top:.8em;font-family:var(--ft);font-size:clamp(20px,2vw,28px);font-style:italic;line-height:1.3;color:rgba(243,236,225,.78)}
.anim .pilar-i{opacity:0;transform:translateY(10px)}
.anim .mani.in .pilar-i{opacity:1;transform:none;transition:opacity .8s ease var(--pd,.6s),transform .8s ease var(--pd,.6s)}
.pilar:nth-child(2) .pilar-i{--pd:.8s}
.pilar:nth-child(3) .pilar-i{--pd:1s}
.pilar:nth-child(4) .pilar-i{--pd:1.2s}

.insta{padding:var(--sec) var(--lado) 0}
.insta .t2{max-width:900px;margin-top:14px}
.insta-lk{margin-top:14px;font-size:18px}
.lk-t{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.lk-t:hover{color:var(--cz)}
.insta-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.insta-fx figure{border-radius:20px;overflow:hidden;background:#DDD0BD}
.insta-fx img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

.fund{padding:var(--sec) var(--lado) 0}
.fund-g{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;gap:clamp(32px,5vw,72px);max-width:1180px;margin:0 auto}
.fund-foto{aspect-ratio:4/5;border-radius:20px;background:rgba(180,83,47,.08)}
.fund-txt .t2{margin:12px 0 28px;font-size:clamp(32px,3.2vw,46px)}
.fund-txt h3{font-family:var(--ft);font-weight:400;font-size:36px;line-height:1.05}
.fund-txt .rotulo{margin-top:8px}
.fund-txt p:last-child{max-width:600px;margin-top:20px;font-size:18px;line-height:1.5;color:#4A3B32}
.quem{padding:var(--sec) var(--lado) 0;text-align:center}
.quem .t2{max-width:960px;margin:14px auto 0}
.quem-tx{max-width:760px;margin:36px auto 0}
.quem-tx p{font-size:19px;line-height:1.5;color:#4A3B32}
.quem-tx p+p{margin-top:18px}
.quem-ex{display:inline-block;margin-top:36px;padding:14px 26px;border-radius:999px;background:var(--tinta);color:var(--creme);font-weight:600;font-size:16px;line-height:1.2}
.cta-card.sem-cel{grid-template-columns:1fr;justify-items:center;padding:clamp(32px,5vw,64px);text-align:center}

/* janelas grandes de computador (o desenho está no bloco m3-) */
.jv{padding:var(--sec) var(--lado) 0}
.jv-preto{margin:var(--sec) var(--lado) 0;padding:clamp(28px,4.4vw,64px);border-radius:28px;background:var(--tinta);color:var(--creme)}
.jv-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:clamp(28px,4.5vw,64px)}
.jv.inv .jv-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.jv.inv .jv-txt{order:2}
.jv-txt p{max-width:440px;margin-top:20px;font-size:18px;line-height:1.5;color:#4A3B32}
.jv-preto .jv-txt p{color:rgba(243,236,225,.8)}
.jv-txt .t2{font-size:clamp(34px,3.6vw,52px)}
.jan-col{container-type:inline-size;min-width:0}
/* ---------- carrossel de recursos (O sistema): duas fileiras andando em sentidos opostos ---------- */
.rec{padding:var(--sec) 0 0;overflow:hidden}
.rec-t{padding:0 var(--lado);text-align:center}
.rec-t span{display:block}
.rec-t .l2{color:var(--argila)}
.rec-r{padding:0 var(--lado);margin:clamp(32px,4vw,52px) 0 14px}
.rec-r.lt{color:var(--argila)}
.rec-r.lt{margin-top:clamp(28px,3.4vw,44px)}
.rec-fila{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.rec-fila::-webkit-scrollbar{display:none}
.rec-trilho{display:flex;width:max-content}
.rec-grupo{display:flex;flex:none;gap:14px;padding-right:14px}
.rec-b{display:flex;flex:none;align-items:center;gap:14px;max-width:320px;height:96px;padding:0 24px 0 18px;border-radius:20px;background:var(--card);box-shadow:0 1px 2px rgba(43,30,24,.05),0 10px 22px -16px rgba(43,30,24,.22);color:var(--tinta);font-size:17px;line-height:1.25}
.rec-b.p{background:var(--tinta);color:var(--creme)}
.rec-b svg{flex:none;width:48px;height:48px;padding:12px;border-radius:15px;background:#F3ECE1;fill:none;stroke:#6B5A4E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rec-b.p svg{background:rgba(224,160,127,.16);stroke:var(--arg-cl)}
.rec-b:focus-visible{outline:2px solid var(--argila);outline-offset:-2px}
html:not(.anim) .rec-grupo[aria-hidden="true"]{display:none}
.anim .rec-fila{overflow:hidden}
.anim .rec-esq .rec-trilho{animation:rec-esq 100s linear infinite}
.anim .rec-dir .rec-trilho{animation:rec-dir 110s linear infinite}
.anim .rec-fila:hover .rec-trilho,.anim .rec-fila:focus-within .rec-trilho{animation-play-state:paused}
@keyframes rec-esq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rec-dir{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- sobre: capítulo dos 4 anos (O mercado da beleza) ---------- */
.et2-lk{color:inherit;text-decoration:underline;text-decoration-color:var(--argila);text-decoration-thickness:2px;text-underline-offset:5px}
.et2-lk:hover{color:var(--tinta)}
.et2-lk:focus-visible{outline:2px solid var(--argila);outline-offset:3px}
.btn.claro{background:#FBF7F0;color:var(--tinta)}
.btn.claro:hover{background:var(--ap)}

/* ---------- sobre: bastidores em vídeo e capítulo da clínica ---------- */
.cl{padding:var(--sec) var(--lado) 0}
.cl-t{max-width:1000px;margin-top:14px}
.cl .ln>span{white-space:normal}
.cl-tx{max-width:640px;margin-top:28px;font-size:18px;line-height:1.5;color:#4A3B32}
.cl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.cl-c{padding:32px;border-radius:20px;background:var(--card)}
.cl-c h3{font-family:var(--ft);font-weight:400;font-size:28px;line-height:1.12}
.cl-c p{margin-top:14px;font-size:17px;line-height:1.5;color:#4A3B32}
.cl .prov-card{margin-top:30px}
.cl-fecho{margin-top:48px;font-size:20px;line-height:1.4;text-align:center}
.mani.el{margin-top:calc(var(--sec)*.45)}
.anim .cl-t .ln>span{transform:translateY(108%)}
.anim .cl-t.in .ln>span{transform:none;transition:transform 1.1s cubic-bezier(.19,.9,.22,1) .1s}

/* ---------- sobre: a clínica sendo formada (linha do tempo em fotos) ---------- */
.cl-tl{--g:20px;--h:260px;display:flex;align-items:flex-start;gap:var(--g);margin-top:44px}
.cl-tl figure{position:relative;flex:var(--r,.8) 1 0;min-width:0;padding-top:30px}
.cl-tl figure::before{content:"";position:absolute;top:6px;left:6px;width:calc(100% + var(--g));height:1.5px;background:var(--argila);transform-origin:left center}
.cl-tl figure:last-child::before{display:none}
.cl-tl figure::after{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--argila)}
.cl-tl img{display:block;width:100%;height:auto;aspect-ratio:var(--r,.8);object-fit:cover;border-radius:20px;background:#DDD0BD}
.cl-tl figcaption{margin-top:10px;font-size:14px;line-height:1.35;color:var(--cz)}
.anim .cl-tl figure::before{transform:scaleX(0)}
.anim .cl-tl figure.in::before{transform:none;transition:transform .8s ease calc(var(--d) + .35s)}
.anim .cl-tl figure::after{transform:scale(0)}
.anim .cl-tl figure.in::after{transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1) var(--d)}

/* ---------- responsivo ---------- */
@media (max-width:1279px){
  .abertura{--ov:1.7}
}
@media (max-width:1259px){
  .met-grade{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
}
@media (max-width:899px){
  .abertura{min-height:0;padding-bottom:40px}
  .titulo-a{font-size:clamp(40px,11.5vw,64px)}
  .ln>span{white-space:normal}
  .ab-baixo{margin-top:36px}
  .cel-ab{--cw:min(300px,76vw);position:relative;right:auto;top:auto;margin:44px auto 0}

  /* rolagem: sem celular fixo, cada passo mostra a sua tela logo abaixo do texto */
  .rol-grade{display:block}
  .rol-cel{display:none}
  .passo{min-height:0;max-width:none;padding:0;margin-top:56px}
  .passo:first-child{margin-top:36px}
  .passo h3,.passo p{color:var(--tinta)}
  .passo h3{font-size:clamp(34px,8vw,44px)}
  .pto{opacity:1;transform:none}
  .passo-mob{display:block}
  .passo-mob .cel{--cw:min(300px,76vw);margin:28px auto 0}

  .mani-in{grid-template-columns:1fr}
  .mani-t{font-size:clamp(32px,9vw,56px)}
  .mani-sim{width:min(62vw,300px);margin-top:48px}
  .ad-grade{display:block}
  .ad-cel{display:flex;justify-content:center;margin-top:44px}
  .btn-rep{margin-top:28px}
  .cta-card{grid-template-columns:1fr;justify-items:center;text-align:left}
  .cel-cta{--cw:min(260px,70vw)}
}
@media (max-width:780px){
  :root{--topo-h:64px}
}
@media (max-width:700px){
  .nums-grade{grid-template-columns:1fr}
  .card-n{min-height:200px;padding:26px}
  .rod-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .rod-excl{align-self:start}
}
@media (max-width:599px){
  .met-grade{grid-template-columns:1fr;row-gap:48px}
  .met-n{font-size:96px}
  .ab-baixo{grid-template-columns:1fr;gap:16px}
}
@media (max-width:480px){
  .ciclo-l{font-size:12.5px}
  .ciclo-l li{padding:0 2px}
  .pilula{padding:0 18px}
}
/* ---------- responsivo das páginas novas ---------- */
@media (max-width:1259px){
  .traj{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .et2:nth-child(2n)::before{right:0}
}
@media (max-width:899px){
  .jan-wrap{padding-bottom:30%}
  .jan-wrap .cel-jan{--cw:min(34vw,170px);right:2%}
  .vq-grade{grid-template-columns:1fr}
  .card-v{min-height:0}
  .fund-g{grid-template-columns:1fr}
  .fund-foto{width:min(300px,70vw);margin:0 auto}
  .mani-t.m2{font-size:clamp(28px,7.4vw,46px)}
  .traj{grid-template-columns:1fr;row-gap:40px}
  .et2{padding:0 0 0 30px}
  .et2::before,.et2:nth-child(2n)::before,.et2:last-child::before{top:0;bottom:-40px;left:0;right:auto;width:2px;height:auto;transform-origin:top center}
  .et2:last-child::before{bottom:0}
  .et2::after{top:3px;left:-5px}
  .anim .traj .et2::before{transform:scaleY(0)}
}
@media (max-width:780px){
  .topo-in{display:flex;align-items:center;gap:8px}
  .marca{margin-right:auto}
  .menu-marca{height:1.25rem}
  .menu-bt{display:flex}
  .topo .btn.peq{padding:0 12px;font-size:13.5px}
  .topo nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:2px;padding:10px var(--lado) 18px;background:rgba(43,30,24,.97);box-shadow:0 18px 30px -22px rgba(43,30,24,.6)}
  .topo.aberto nav{display:flex}
  .topo .lk{padding:12px 0;font-size:18px}
  .lk[aria-current="page"]::after{left:-12px;right:auto;top:50%;bottom:auto;width:6px;height:6px;margin-top:-3px;border-radius:50%}
}
@media (max-width:639px){
  .insta-fx{display:flex;gap:12px;overflow-x:auto;padding:0 var(--lado);margin:40px calc(-1*var(--lado)) 0;scroll-snap-type:x mandatory;scroll-padding:0 var(--lado);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .insta-fx::-webkit-scrollbar{display:none}
  .insta-fx figure{flex:0 0 68%;scroll-snap-align:start}
  .faq-a p{padding-right:0}
}
@media (max-width:899px){
  .jv-in,.jv.inv .jv-in{grid-template-columns:1fr}
  .jv.inv .jv-txt{order:0}
  .jan-col{overflow-x:auto;padding:0 0 .6em;-webkit-overflow-scrolling:touch}
  .m3-jan.g{width:720px;max-width:none;font-size:10px}
  .jv-txt p{max-width:none}
}
@media (max-width:639px){
  .rec-b{height:80px;gap:12px;max-width:270px;padding:0 20px 0 14px;font-size:15px}
  .rec-b svg{width:40px;height:40px;padding:9px;border-radius:12px}
}
@media (max-width:899px){
  .cl-cards{grid-template-columns:1fr}
}
@media (max-width:639px){
  .cl-tl{--g:14px;display:flex;overflow-x:auto;margin:44px calc(-1*var(--lado)) 0;padding:0 var(--lado);scroll-snap-type:x mandatory;scroll-padding:0 var(--lado);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cl-tl::-webkit-scrollbar{display:none}
  .cl-tl figure{flex:0 0 calc(var(--r,.8)*var(--h));scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* números confirmados pelo Lucas (24/10) */
.num-card{display:inline-block;max-width:460px;margin-top:40px;padding:24px 28px;border-radius:20px;background:#2B1E18;color:#F3ECE1}
.num-card .num-g{font-family:var(--ft);font-weight:400;font-size:clamp(36px,4.6vw,52px);line-height:1;letter-spacing:-.01em;color:var(--arg-cl);margin:0 0 10px}
.num-card p{margin:0;font-size:17px;line-height:1.45}

/* foto do fundador (24/10) */
.fund-foto-img{margin:0;border:0;border-radius:20px;overflow:hidden;background:none}
.fund-foto-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

/* texto do fundador: os quatro parágrafos iguais (24/10) */
.fund-bio{max-width:600px;margin-top:20px}
.fund-bio p,.fund-bio p:last-child{max-width:none;margin:0 0 16px;font-size:18px;line-height:1.5;color:#4A3B32}

/* ---------- sobre: capítulo da Dani em uma linha só (24/10) ---------- */
.mb{padding:var(--sec) var(--lado) 0}
.mb-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.mb .t2{max-width:none;margin-top:12px;font-size:clamp(32px,3vw,44px)}
.mb-tx{max-width:none;margin-top:20px}
.mb-tx p{font-size:16px;line-height:1.5;color:#4A3B32}
.mb-tx p+p{margin-top:12px}
.mb-marcos{display:grid;gap:8px;margin-top:20px;padding:0;list-style:none}
.mb-m{position:relative;padding-left:26px;font-size:15px;font-weight:600;line-height:1.35}
.mb-m::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:3px;background:var(--argila)}
.mb .num-card{display:block;max-width:none;margin-top:20px;padding:16px 22px}
.mb .num-card .num-g{font-size:clamp(32px,3vw,42px);margin-bottom:6px}
.mb .num-card p{font-size:15px;line-height:1.4}
.mb-in{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.mb-fotos{--mh:clamp(160px,23vh,250px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.mb-fotos figure{display:flex;flex-direction:column;min-width:0}
.mb-fotos img,.mb-fotos video{display:block;width:100%;height:var(--mh);object-fit:cover;border-radius:16px;background:#DDD0BD}
.mb-fotos .mb-dani{object-position:50% 18%}
.mb-fotos .mb-palco{object-position:78% 30%}
.mb-fotos .mb-caixas{object-position:50% 45%}
.mb-fotos .mb-cam{object-position:55% 50%}
.mb-fotos figcaption{margin-top:6px;font-size:12px;line-height:1.3;color:var(--cz)}
.mb-pod{grid-column:3 / 5;display:grid;grid-template-columns:minmax(0,1fr) 55%;gap:10px;align-items:center;padding:12px;border-radius:16px;background:var(--tinta);color:var(--creme)}
.mb-pod-t{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;padding:2px 0 2px 4px}
.mb-pod .rotulo{font-size:10px;color:var(--arg-cl)}
.mb-pod h3{font-family:var(--ft);font-weight:400;font-size:clamp(16px,1.25vw,20px);line-height:1.15}
.mb-pod-p{font-size:11.5px;line-height:1.35;color:rgba(243,236,225,.8)}
.mb-pod .mb-pod-b{align-self:flex-start;gap:6px;height:auto;min-height:34px;padding:7px 14px;font-size:12px;line-height:1.15;text-align:left;white-space:normal}
.mb-pod-b svg{flex:none}
.mb-fotos .mb-pod-i{align-self:center;width:100%;height:auto;aspect-ratio:16 / 9;border-radius:12px;object-fit:cover}
@media (max-width:1359px){
  .mb-pod{grid-template-columns:1fr}
  .mb-fotos .mb-pod-i{order:-1}
  .mb-pod-t{padding:2px 4px 4px}
}
@media (max-width:899px){
  .mb-in{grid-template-columns:1fr}
  .mb-fotos{--mh:min(56vw,260px);grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-pod{grid-column:1 / -1;grid-template-columns:1fr;padding:12px}
  .mb-pod-t{padding:6px 6px 8px;gap:10px}
  .mb-pod h3{font-size:22px}
  .mb-pod-p{font-size:13px}
  .mb-pod .mb-pod-b{min-height:38px;padding:0 16px;font-size:13px;white-space:nowrap}
}

/* ---------- salão (Revind Blz): peças novas e ajustes de contraste ---------- */
.mani,.ad,.tri,.jv-preto,.rod,.ab-foto,.mb-pod{--rot:rgba(243,236,225,.72)}
.mani .rotulo,.ad .rotulo,.tri .rotulo,.jv-preto .rotulo,.rod .rotulo,.ab-foto .rotulo,.ad .ciclo-r,.tri .ciclo-r{color:var(--rot)}
.mani .rotulo::before,.ad .rotulo::before,.tri .rotulo::before,.jv-preto .rotulo::before,.rod .rotulo::before,.ab-foto .rotulo::before,.mb-pod .rotulo::before{background:var(--arg-cl)}
.mani em,.ad em,.tri em,.jv-preto em,.ab-foto em,.rod em,.mb-pod em{color:var(--arg-cl)}
.mani .gigante,.mani .t2{color:var(--creme)}
.rec-b,.pilula,.card-n,.card-v,.cl-c,.cta-card{border:1px solid var(--linha)}
.rec-b.p,.pilula.p{border-color:transparent}
.insta-fx figure,.cl-tl img,.fund-foto-img{border-radius:20px}
.quem .rotulo,.pil .rotulo,.cta .rotulo{justify-content:center}
.tri h2,.ad h2,.jv-preto h2{color:var(--creme)}
.tri .t2,.ad .t2{color:var(--creme)}

/* abertura com foto de fundo (O sistema e Sobre). A seção recebe style="--foto:url(img/blz/arquivo.webp)" */
.abertura.ab-foto{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:calc(var(--topo-h) + 56px) var(--lado) 88px;overflow:hidden;background:var(--tinta);color:var(--creme)}
.ab-foto::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--foto) center/cover no-repeat;transform-origin:center}
.ab-foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(43,30,24,.8) 0%,rgba(43,30,24,.5) 26%,rgba(43,30,24,0) 52%),linear-gradient(0deg,rgba(43,30,24,.72) 0%,rgba(43,30,24,.2) 28%,rgba(43,30,24,0) 52%)}
.ab-foto .titulo-a{max-width:980px;color:var(--creme)}
.ab-foto .ab2-sub{color:rgba(243,236,225,.88)}
.ab-foto .nota{color:rgba(243,236,225,.78)}
.ab-foto .ab-acao{margin-top:32px}
.anim .ab-foto::after{transform:scale(1.06);filter:blur(14px)}
.anim .ab-foto.on::after{transform:none;filter:blur(0);transition:transform 1.4s cubic-bezier(.19,.9,.22,1),filter 1.4s ease}
@media (max-width:759px){
  .ab-foto::after{background-position:78% 50%}
  .ab-foto::before{background:linear-gradient(90deg,rgba(43,30,24,.82) 0%,rgba(43,30,24,.5) 70%,rgba(43,30,24,.3) 100%),linear-gradient(0deg,rgba(43,30,24,.75) 0%,rgba(43,30,24,0) 55%)}
  .abertura.ab-foto{padding-bottom:56px}
}

/* janela do painel, logo depois da abertura */
.jan-sec{padding:var(--sec) var(--lado) 0}
.jan-sec .jan-wrap{margin-top:0}
.anim .jan-sec .jan-wrap.in .m3-jan{opacity:1;transform:none;transition:opacity 1s ease .1s,transform 1.2s cubic-bezier(.19,.9,.22,1) .1s}
.anim .jan-sec .jan-wrap .m3-jan{opacity:0;transform:translateY(40px)}

/* títulos dos passos: a palavra-herói acende junto com o passo */
.passo h3 em{color:inherit;transition:color .5s ease}
.passo.ativo h3 em{color:var(--argila)}
@media (max-width:899px){.passo h3 em{color:var(--argila)}}
@media (max-width:780px){
  .topo .btn.peq .bt-c{display:none}
  .topo .btn.peq,.topo .btn.peq.com-seta{padding:0 14px}
}

/* ---------- privacidade.html: faixa escura de abertura (o topo é translúcido) e o texto corrido ---------- */
.leg-abre{padding:calc(var(--topo-h) + clamp(48px,6vw,88px)) var(--lado) clamp(40px,5vw,72px);background:var(--tinta);color:var(--creme)}
.leg-in{max-width:760px;margin:0 auto}
.leg-abre .rotulo{color:rgba(243,236,225,.82)}
.leg-h1{margin-top:18px;font-size:clamp(38px,5.4vw,72px);color:var(--creme)}
.leg-apoio{max-width:46ch;margin-top:20px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:rgba(243,236,225,.84)}
.leg-data{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,236,225,.6)}
.leg-corpo{padding:clamp(40px,5vw,72px) var(--lado) 0}
.leg-texto h2{margin:44px 0 12px;font-family:var(--ft);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.01em;color:var(--tinta)}
.leg-texto h2:first-child{margin-top:0}
.leg-texto p,.leg-texto li{font-size:17px;line-height:1.7;color:var(--tinta)}
.leg-texto p{margin-bottom:14px}
.leg-texto ul,.leg-texto ol{margin:0 0 16px 1.35em}
.leg-texto ul{list-style:disc}
.leg-texto ol{list-style:decimal}
.leg-texto li{margin-bottom:7px;padding-left:.2em}
.leg-texto li::marker{color:var(--arg-es)}
.leg-texto a{text-decoration:underline;text-decoration-color:var(--argila);text-underline-offset:.2em;overflow-wrap:anywhere}
.leg-forte{font-weight:600}
.leg-caixa{margin-top:36px;padding:24px;border:1px solid var(--linha);border-radius:20px;background:var(--papel)}
.leg-caixa p:last-child{margin-bottom:0}
/* ============================================================================================================
   Telas simuladas v3 (m3-), 24/10/2026: celular e janelas de computador na linguagem do sistema.
   Só HTML, CSS e SVG de proporção fixa (nada de ECharts). Tudo em em, pra escalar com o celular e com a janela.
   Número leve com a unidade apagada, um destaque por gráfico, etiqueta escura, hachura no que ainda não aconteceu,
   cartões macios, linhas de pessoa em cartão, leitura final em caixa tracejada. Cores e fontes do salão.
   ============================================================================================================ */
.tela{--m3-t2:#6B5A4E;--m3-cz:#9A8878;--m3-sb:0 1px 2px rgba(43,30,24,.05),0 .6em 1.4em -.9em rgba(43,30,24,.26),0 0 0 1px rgba(221,208,189,.55);color:#2B1E18;line-height:1.3;text-align:left}

/* o celular simulado e uma imagem: o texto sai da largura do aparelho (4.94cqi = largura do aparelho x .046), sem piso em px (--pf:0) */
.cel-tela{container-type:inline-size;--pf:0}

/* celular: moldura da tela */
.m3-ph{display:flex;flex-direction:column;height:100%;background:#F3ECE1;font-size:calc(var(--cw)*.046);font-size:4.94cqi}
.cel-jan .m3-ph{font-size:calc(var(--cw)*.046)}
.m3-hd{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.65em;row-gap:.1em;padding:calc(var(--cw)*.1 + 5px) 1em .5em}
.m3-lg{flex:none;width:2em;height:2em;padding:.46em .32em;border-radius:.62em;background:#2B1E18;fill:#F3ECE1}
.m3-hn{min-width:0;overflow:hidden;font-size:1.2em;font-weight:500;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.m3-ex{padding:.32em .8em;border-radius:99px;box-shadow:inset 0 0 0 1px #D9CBB6;font-size:.62em;font-weight:600;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--m3-t2)}
.m3-hs{grid-column:2/-1;min-width:0;overflow:hidden;font-size:.82em;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;color:var(--m3-cz)}
.m3-bd{flex:1;min-height:0;display:flex;flex-direction:column;gap:.667em;padding:.4em .85em .85em;overflow:hidden}
.m3-bd>.m3-cd:not(.m3-camp){flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.m3-bd>.m3-ag,.m3-bd>.m3-tc{flex:1 1 auto;align-content:space-evenly}

/* cartão, painel interno, títulos, números leves */
.m3-cd{position:relative;min-width:0;padding:.65em .8em;border-radius:1.1em;background:#FBF7F0;box-shadow:var(--m3-sb)}
.m3-cd.esc{background:#2B1E18;color:#F3ECE1;box-shadow:0 .7em 1.5em -.9em rgba(43,30,24,.55)}
.m3-pn{padding:.55em .6em;border-radius:.85em;background:#F3ECE1}
.m3-cd.esc .m3-pn{background:rgba(243,236,225,.08)}
.m3-tt{margin-bottom:.45em;font-size:.95em;font-weight:500;line-height:1.25}
.m3-big{font-size:2.45em;font-weight:400;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.m3-un{margin-right:.06em;font-size:.46em;font-weight:400;letter-spacing:0;color:var(--m3-cz);vertical-align:.7em}
.m3-un2{margin-left:.15em;font-size:.4em;font-weight:400;letter-spacing:0;color:var(--m3-cz)}
.m3-lb{margin-top:.35em;font-size:.84em;line-height:1.3;color:var(--m3-t2)}
.m3-cd.esc .m3-lb,.m3-cd.esc .m3-un,.m3-cd.esc .m3-un2{color:#C4B29C}
.m3-n2{display:flex;align-items:center;gap:.7em}
.m3-n2 .m3-big{flex:none;font-size:2.3em}
.m3-n2 .m3-lb{flex:1;margin:0}
.m3-nt{font-size:.8em;line-height:1.35;color:var(--m3-t2)}

/* pílula, etiqueta escura flutuante, leitura em caixa tracejada */
.m3-pl{display:inline-block;padding:.22em .65em;border-radius:99px;background:rgba(180,83,47,.15);font-size:.76em;font-weight:600;line-height:1.2;white-space:nowrap;color:#2B1E18}
.m3-pl.n{background:rgba(43,30,24,.07);color:var(--m3-t2)}
.m3-fl{position:relative;display:inline-block;padding:.34em .72em;border-radius:.6em;background:#2B1E18;color:#F3ECE1;font-size:.72em;font-weight:600;line-height:1.15;white-space:nowrap}
.m3-fl::after{content:"";position:absolute;left:50%;bottom:-.26em;width:.52em;height:.52em;margin-left:-.26em;border-radius:.1em;background:#2B1E18;transform:rotate(45deg)}
.m3-lh{display:flex;align-items:flex-start;gap:.55em;padding:.55em .65em;border:1.5px dashed rgba(154,136,120,.6);border-radius:.85em;font-size:.84em;line-height:1.35;color:var(--m3-t2)}
.m3-lh svg{flex:none;width:1.25em;height:1.25em;margin-top:.08em;fill:none;stroke:#9A8878;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m3-lh b{font-weight:600;white-space:nowrap;color:#2B1E18}
.m3-lh-b{margin-top:.15em}

/* avatar de iniciais (as letras vêm do atributo, não do texto da página), botão redondo, linha-cartão de pessoa */
.m3-ai{flex:none;display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:#E3D6C4;color:#4A3B32;font-size:.75em;font-weight:600;letter-spacing:.02em}
.m3-ai::before{content:attr(data-i)}
.m3-bi{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;box-shadow:inset 0 0 0 1px #D9CBB6}
.m3-bi svg{width:1.05em;height:1.05em;fill:none;stroke:#6B5A4E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m3-pr{display:flex;align-items:center;gap:.6em;padding:.33em .5em;border-radius:.95em;background:#F3ECE1}
.m3-pr+.m3-pr{margin-top:.333em}
.m3-pt1{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.m3-pt1 b,.m3-pt1 span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m3-pt1 b{font-size:.92em;font-weight:500}
.m3-pt1 span{font-size:.76em;color:var(--m3-cz)}
.m3-pr.on{background:#2B1E18;color:#F3ECE1}
.m3-pr.on .m3-pt1 span{color:#C4B29C}
.m3-pr.on .m3-ai{background:#F3ECE1;color:#2B1E18}
.m3-pr.on .m3-bi{box-shadow:inset 0 0 0 1px rgba(243,236,225,.3)}
.m3-pr.on .m3-bi svg{stroke:#F3ECE1}

/* painel: ritmo até a meta (a parte projetada em hachura) e funil em degraus */
.m3-mt{position:relative;margin-top:2.3em}
.m3-mt .m3-fl{position:absolute;right:-.2em;bottom:calc(100% + .5em)}
.m3-mt .m3-fl::after{left:auto;right:.55em;margin-left:0}
.m3-mt-t{position:relative;height:.85em;border-radius:99px;background:#F1E8DA}
.m3-mt-f{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#2B1E18;transform-origin:left center}
.m3-mt-p{position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;background:repeating-linear-gradient(135deg,rgba(180,83,47,.7) 0 1.4px,transparent 1.4px 4.5px),rgba(180,83,47,.14)}
.m3-mt-m{position:absolute;right:0;top:-.3em;bottom:-.3em;width:2px;border-radius:2px;background:#B4532F}
.m3-mt+.m3-lh{margin-top:.8em}
.m3-fu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.3em;margin:.1em -.15em 0}
.m3-fc{display:grid;grid-template-rows:auto minmax(4.4em,1fr) auto;min-width:0}
.m3-fv{grid-row:1;margin-bottom:.4em;font-size:1.3em;font-weight:400;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.m3-fc.on .m3-fv{color:#B4532F}
.m3-fp{grid-row:2;position:relative;min-height:4.4em}
.m3-fp i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:.5em .5em .2em .2em;background:repeating-linear-gradient(135deg,rgba(43,30,24,.32) 0 1.2px,transparent 1.2px 4.6px),rgba(43,30,24,.07);transform-origin:bottom}
.m3-fc.on .m3-fp i{background:#B4532F}
.m3-fp::after{content:"";position:absolute;left:100%;bottom:0;width:.3em;height:100%;background:rgba(43,30,24,.06);clip-path:polygon(0 calc(100% - var(--h)),100% calc(100% - var(--hn)),100% 100%,0 100%)}
.m3-fc:last-child .m3-fp::after{display:none}
.m3-fnm{grid-row:3;align-self:start;box-sizing:border-box;min-width:0;max-width:100%;height:2.5em;margin-top:.95em;overflow:hidden;font-size:.7em;hyphens:none;line-height:1.2;color:var(--m3-t2);overflow-wrap:normal;word-break:keep-all;text-wrap:balance}
.m3-fc.on .m3-fnm{font-weight:600;color:#2B1E18}
.m3-cd>.m3-fu{flex:1 1 auto}
.m3-ro{display:flex;align-items:center;gap:.8em;margin-top:.667em}
.m3-rg{position:relative;flex:none;width:max(calc(56px*var(--pf,1)),4.6em);height:max(calc(56px*var(--pf,1)),4.6em)}
.m3-rg svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.m3-rg circle{fill:none;stroke-width:4}
.m3-rg .fd{stroke:#E6DACB}
.m3-rg .arco{stroke:#B4532F;stroke-linecap:round}
.m3-rg b{position:absolute;inset:0;display:grid;place-items:center;font-weight:500}
.m3-r19{display:block;font-size:1.15em;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.m3-r19 small{margin-left:.06em;font-size:.55em;font-weight:400;letter-spacing:0;color:var(--m3-cz)}
.m3-ro p{font-size:.84em;line-height:1.3;color:var(--m3-t2)}

/* barras horizontais com trilha: o destaque na cor da linha e o valor em etiqueta escura */
.m3-rw+.m3-rw{margin-top:.6em}
.m3-rl{display:flex;justify-content:space-between;align-items:center;gap:.6em;min-height:1.6em;font-size:.86em;line-height:1.2}
.m3-rl span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m3-rv{flex:none;font-weight:600;white-space:nowrap}
.m3-rw.on .m3-rv{padding:.12em .6em;border-radius:99px;background:#2B1E18;color:#F3ECE1;font-size:.9em}
.m3-rt{height:.6em;margin-top:.3em;border-radius:99px;background:#F1E8DA;overflow:hidden}
.m3-rt i{display:block;width:var(--w);height:100%;border-radius:99px;background:#CDBDA8;transform-origin:left center}
.m3-rt.on i,.m3-rw.on .m3-rt i{background:#B4532F}
.m3-pn .m3-rt{background:#E6DACB}
.m3-n2+.m3-pn,.m3-pn+.m3-lh{margin-top:.667em}

/* mapa de rua, com as manchas em argila onde vale aparecer */
.m3-mp{position:relative;border-radius:.9em;overflow:hidden;background:#E8DCCB}
.m3-mp-p{aspect-ratio:300/165}
.m3-mp-j{aspect-ratio:400/260;border-radius:1.1em}
.m3-mp svg{position:absolute;inset:0;width:100%;height:100%}
.m3-mc,.m3-an,.m3-anp{transform-box:fill-box;transform-origin:center}
.m3-mpl{position:absolute;left:50%;top:calc(52.7% + .8em);transform:translateX(-50%);padding:.25em .7em;border-radius:99px;background:#2B1E18;color:#F3ECE1;font-size:.7em;font-weight:600;white-space:nowrap}
.m3-mlg{display:flex;flex-wrap:wrap;gap:.3em .8em;margin-top:.6em;font-size:.74em;line-height:1.25;color:var(--m3-t2)}
.m3-mlg span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.m3-mlg i{flex:none;display:block;width:.8em;height:.8em;border-radius:50%;background:#2B1E18}
.m3-mlg i.c{background:#6B5A4E}
.m3-mlg i.q{border-radius:.2em;background:#B4532F}
.m3-mlg+.m3-n2{margin-top:.65em}

/* hoje: prazo por serviço em linhas, cliente VIP em cartão escuro, medidor segmentado */
.m3-lr{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.18em 0;border-top:1px dashed #E6DACB;font-size:.86em}
.m3-lr>span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m3-tt+.m3-lr{border-top:0}
.m3-lr .m3-pl{font-size:.88em}
.m3-dt{display:flex;gap:.45em}
.m3-dt i{display:block;width:1em;height:1em;border-radius:50%;background:#F3ECE1}
.m3-dt i.o{background:transparent;box-shadow:inset 0 0 0 1.6px #E0A07F}
.m3-dl{margin-top:.55em;font-size:.82em;color:#C4B29C}
.m3-gh{display:grid;grid-template-columns:minmax(0,1fr)}
.m3-gh>svg{grid-area:1/1;display:block;width:100%;height:7.6em}
.m3-gs{fill:none;stroke:#2B1E18;stroke-width:7;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.m3-gs.l{stroke:#B4532F}
.m3-gv{grid-area:1/1;z-index:1;align-self:end;margin-bottom:.15em;text-align:center}
.m3-gv .m3-big{font-size:2.7em}
.m3-gh>.m3-lb{grid-area:2/1;margin-top:.1em;text-align:center}
.m3-cpl{display:flex;justify-content:space-between;gap:.6em;margin-top:.5em;font-size:.84em;color:var(--m3-t2)}
.m3-cpl b{font-weight:600;color:#2B1E18}
.m3-cpl,.m3-dn,.m3-ah,.m3-ga,.m3-dl,.m3-gn,.m3-wn{white-space:nowrap}

/* terça: cada cliente em linha-cartão, uma bolinha por semana (a última visita em argila) */
.m3-tc{display:grid;gap:.55em}
.m3-sm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;align-content:center;column-gap:.6em;row-gap:1em;padding:1em .9em 1.05em;border-radius:1em;background:#FBF7F0;box-shadow:var(--m3-sb)}
.m3-sn{min-width:0;overflow:hidden;font-size:.92em;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.m3-sm .m3-ai{width:2.3em;height:2.3em}
.m3-sq{padding:.2em .65em;border-radius:99px;background:rgba(43,30,24,.07);font-size:.7em;font-weight:600;color:var(--m3-t2);white-space:nowrap}
.m3-bol{grid-column:1/-1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));justify-items:center}
.m3-bol i{display:block;width:1.15em;height:1.15em;border-radius:50%;background:#E3D6C4}
.m3-bol i.c{background:#2B1E18}
.m3-bol i.u{background:#B4532F}
.m3-sm.on{background:#2B1E18;color:#F3ECE1;box-shadow:none}
.m3-sm.on .m3-ai{background:#F3ECE1;color:#2B1E18}
.m3-sm.on .m3-sq{background:rgba(243,236,225,.16);color:#F3ECE1}
.m3-sm.on .m3-bol i{background:rgba(243,236,225,.2)}
.m3-sm.on .m3-bol i.c{background:#F3ECE1}
.m3-sm.on .m3-bol i.u{background:#E0A07F}

/* ticket médio: linha suave com marcador tracejado e etiqueta, e o par serviço e produto */
.m3-lc{position:relative;aspect-ratio:300/120;margin-top:.5em}
.m3-lc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m3-ar{fill:rgba(180,83,47,.1);stroke:none}
.m3-mk{fill:none;stroke:#2B1E18;stroke-width:1.2;stroke-dasharray:2 3.2}
.m3-tr{fill:none;stroke:#2B1E18;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m3-p2{fill:#B4532F;stroke:#FBF7F0;stroke-width:2.2}
.m3-pf{fill:#2B1E18;stroke:#FBF7F0;stroke-width:2.2}
.m3-ca{position:absolute;left:0;bottom:1.35em;font-size:.76em;font-weight:600;color:var(--m3-t2)}
.m3-cb{position:absolute;right:0;left:auto;top:.1em}
.m3-cb.m3-fl::after{left:auto;right:1.16em;margin-left:0}
.m3-lgd{display:flex;flex-wrap:wrap;gap:.3em 1.1em;margin-top:.6em;font-size:.76em;line-height:1.25;color:var(--m3-t2)}
.m3-lgd span{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.m3-lgd i{flex:none;display:block;width:.8em;height:.8em;border-radius:50%;background:#B4532F}
.m3-pp{display:grid;grid-template-columns:minmax(0,4.5em) 1.3em minmax(0,1fr);align-items:center;gap:.4em;min-height:3.4em;padding:.5em .55em;border-radius:.95em;background:#F3ECE1}
.m3-pp+.m3-pp{margin-top:.4em}
.m3-bx{font-size:.84em;font-weight:500;line-height:1.2}
.m3-sa2{width:1.3em;height:1.3em;fill:none;stroke:#9A8878;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m3-pp.on{background:#2B1E18;color:#F3ECE1}
.m3-pp.on .m3-sa2{stroke:#E0A07F}
.m3-pn .m3-pp{background:#FBF7F0;box-shadow:var(--m3-sb)}
.m3-lk{display:flex;align-items:center;gap:.6em;margin-top:.65em}
.m3-lk .m3-rt{flex:1;margin:0}
.m3-lk .m3-pl{flex:none}
.m3-pn+.m3-pn{margin-top:.6em}

/* chuva: faixa do tempo e colunas da semana com trilha, ícone do tempo e etiqueta no dia de chuva */
.m3-ws{display:flex;align-items:center;gap:.6em;padding:.55em .7em;border-radius:1em;background:#FBF7F0;box-shadow:var(--m3-sb);font-size:.84em;font-weight:500;white-space:nowrap}
.m3-ws>span:not(.m3-wt){min-width:0;overflow:hidden;text-overflow:ellipsis}
.m3-ws .m3-pl{flex:none;margin-left:auto}
.m3-wt{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.7em;background:#2B1E18}
.m3-wt svg{width:1.3em;height:1.3em;fill:none;stroke:#F3ECE1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:.5em;margin-top:1.7em}
.m3-bd .m3-wk{flex:1 1 auto}
.m3-bd .m3-wb{flex:1 1 auto;height:auto;min-height:6.2em}
.m3-wd{display:flex;flex-direction:column;align-items:center;gap:.35em;min-width:0}
.m3-wd>svg{flex:none;width:1.4em;height:1.4em;fill:none;stroke:#9A8878;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-wd.ch>svg{stroke:#2B1E18}
.m3-wb{order:-1;position:relative;width:100%;height:6.2em;border-radius:.65em;background:#F1E8DA}
.m3-wb::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(#D6C7B1 50%,transparent 50%) center/1px 6px repeat-y}
.m3-wb i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:.65em;background:#D6C7B1;transform-origin:bottom}
.m3-wd.ch .m3-wb i{background:#2B1E18}
.m3-wd.lv .m3-wb i{background:#B4532F}
.m3-wn{font-size:.74em;line-height:1;white-space:nowrap;color:var(--m3-t2)}
.m3-wd.lv .m3-wn,.m3-wd.ch .m3-wn{font-weight:600;color:#2B1E18}
.m3-fi{position:absolute;left:50%;bottom:calc(var(--h) + .5em);transform:translateX(-50%);padding:.35em .55em;font-size:.8em}
.m3-fi svg{display:block;width:1.3em;height:1.3em;fill:none;stroke:#F3ECE1;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* agenda do dia: horas à esquerda, atendimentos em mini-cartão, o vago tracejado com os nomes sugeridos */
.m3-ag{display:grid;gap:1em}
.m3-ar2{display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:.5em;align-items:start}
.m3-ah{padding-top:1.5em;font-size:.76em;color:var(--m3-cz)}
.m3-am{display:flex;align-items:center;gap:.65em;padding:.8em .8em;border-radius:1em;background:#FBF7F0;box-shadow:var(--m3-sb)}
.m3-it{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.65em;background:rgba(180,83,47,.14)}
.m3-it svg{width:1.15em;height:1.15em;fill:none;stroke:#9A4423;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-anm{flex:1;min-width:0;overflow:hidden;font-size:.92em;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.m3-md{flex:none;width:1.1em;height:1.1em;fill:#9A8878}
.m3-vg{padding:.7em .75em;border:1.5px dashed rgba(180,83,47,.7);border-radius:1em;background:rgba(180,83,47,.05)}
.m3-nm{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.55em;padding:.3em 0}
.m3-nm+.m3-nm{border-top:1px dashed rgba(180,83,47,.28)}
.m3-nm .m3-ai{grid-row:1/span 2;font-size:.66em}
.m3-nm b{grid-column:2;grid-row:1;min-width:0;overflow:hidden;font-size:.9em;font-weight:500;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.m3-nm .m3-pl{grid-column:2;grid-row:2;justify-self:start;max-width:100%;overflow:hidden;padding:0;background:none;font-size:.76em;font-weight:400;line-height:1.2;text-overflow:ellipsis;color:var(--m3-cz)}
.m3-gc{min-width:0}
.m3-gd{display:grid;grid-template-columns:2em repeat(3,minmax(0,1fr));column-gap:.4em}
.m3-ga{display:flex;flex-direction:column;justify-content:space-between;padding-top:1.96em;font-size:.72em;line-height:1;color:var(--m3-cz);text-align:right}
.m3-gn{margin-bottom:.4em;font-size:.78em;font-weight:500;line-height:1.2;white-space:nowrap;text-align:center}
.m3-gb{display:grid;grid-template-rows:repeat(10,.78em);gap:.22em}
.m3-bd .m3-gpn{flex:1 1 auto;display:flex}
.m3-bd .m3-gpn>.m3-gd{flex:1 1 auto}
.m3-bd .m3-gc{display:flex;flex-direction:column}
.m3-bd .m3-gb{flex:1 1 auto;grid-template-rows:repeat(10,minmax(.78em,1fr))}
.m3-gb i{display:block;border-radius:.3em;background:#DDD0BD}
.m3-gb i.v{background:repeating-linear-gradient(135deg,rgba(180,83,47,.7) 0 1.3px,transparent 1.3px 4.2px),rgba(180,83,47,.12);box-shadow:inset 0 0 0 1.4px #B4532F}
.m3-pn>.m3-gd{margin:0}

/* clientes: rosca com espaço entre as fatias e só a fatia em foco na cor da linha, idade em colunas com trilha */
.m3-rs{display:flex;align-items:center;gap:.8em}
.m3-rg2{flex:none;width:5em;height:5em}
.m3-rg2 svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.m3-rg2 circle{fill:none;stroke-width:5.2}
.m3-sg{stroke-dasharray:var(--da);stroke-dashoffset:var(--of)}
.m3-rsl{flex:1;min-width:0;display:grid;gap:.45em}
.m3-rr{display:flex;align-items:center;gap:.5em;font-size:.72em;line-height:1.15;white-space:nowrap}
.m3-rr span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m3-rr b{order:-1;flex:none;min-width:3em;padding:.22em .5em;border-radius:99px;font-size:.92em;font-weight:600;text-align:center}
.m3-id{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:.5em;height:6em;margin-top:1.5em}
.m3-ic{position:relative;border-radius:.6em;background:#F1E8DA}
.m3-bd .m3-id{flex:1 1 auto;height:auto;min-height:6em}
.m3-ic i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:.6em;background:#CDBDA8;transform-origin:bottom}
.m3-ic.on i{background:#B4532F}
.m3-fid{position:absolute;left:62.5%;bottom:calc(var(--lh) + .5em);transform:translateX(-50%)}
.m3-pg{font-size:.8em;line-height:1.3;color:#C4B29C}
.m3-bg3{white-space:nowrap}
.m3-bg3{margin-top:.45em;font-size:2.1em}

/* resumo: duas barras (o que entrou, o que está parado em hachura) e a campanha pronta em cartão escuro */
.m3-pdb{flex:1 1 auto;display:flex;flex-direction:column;margin-top:.667em}
.m3-pdb>.m3-db{flex:1 1 auto}
.m3-db{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.6em}
.m3-dc{display:flex;flex-direction:column;gap:.4em;min-width:0}
.m3-dp{position:relative;flex:1 1 auto;min-height:7em;border-radius:.7em;background:rgba(43,30,24,.05)}
.m3-dp i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:.7em;background:#2B1E18;transform-origin:bottom}
.m3-dp.lt i{background:repeating-linear-gradient(135deg,rgba(180,83,47,.75) 0 1.5px,transparent 1.5px 5px),rgba(180,83,47,.16)}
.m3-dv{position:absolute;left:50%;bottom:calc(var(--h) + .5em);transform:translateX(-50%)}
.m3-dn{font-size:.78em;text-align:center;color:var(--m3-t2)}
.m3-nt2{margin-top:.667em}
.m3-camp{display:flex;align-items:center;gap:.7em;padding:.85em .9em}
.m3-cpt{flex:1;font-size:.88em;line-height:1.35;color:#C4B29C}
.m3-cpt b{display:block;margin-bottom:.15em;font-size:1.05em;font-weight:500;color:#F3ECE1}
.m3-camp .m3-bi{background:#F3ECE1;box-shadow:none}
.m3-camp .m3-bi svg{stroke:#2B1E18}

/* janelas de computador: barra lateral clara com o seletor do espaço, itens com ícone e o ativo em cartão branco; sem barra de topo */
.m3-jan{display:grid;grid-template-columns:13.5em minmax(0,1fr);width:100%;aspect-ratio:16/10;font-size:calc(min(100vw - 2*var(--lado),1100px)/88);border-radius:1.6em;overflow:hidden;background:#F3ECE1;color:#2B1E18;box-shadow:0 50px 90px -40px rgba(43,30,24,.45),0 0 0 1px #DDD0BD}
.m3-jan.g{aspect-ratio:auto;font-size:10px;font-size:calc(100cqw/72)}
.m3-sd{display:flex;flex-direction:column;gap:.25em;padding:1.1em .9em 1em}
.m3-sl{display:flex;align-items:center;gap:.65em;margin-bottom:1em;padding:.6em .65em;border-radius:1em;background:#FBF7F0;box-shadow:0 1px 2px rgba(43,30,24,.05),0 0 0 1px rgba(221,208,189,.6)}
.m3-sl .m3-lg{width:2.5em;height:2.5em}
.m3-sk{flex:1;min-width:0;display:grid;gap:.4em}
.m3-sk i{display:block;height:.5em;border-radius:99px;background:#E3D6C4}
.m3-sk i+i{width:60%;background:#EEE5D6}
.m3-cv{flex:none;width:1.4em;height:1.4em;fill:none;stroke:#9A8878;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m3-si{display:flex;align-items:center;gap:.7em;padding:.62em .75em;border-radius:.9em;font-size:1.02em;white-space:nowrap;color:#4A3B32}
.m3-si svg{flex:none;width:1.35em;height:1.35em;fill:none;stroke:#8C7A6B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-si.on{background:#FBF7F0;font-weight:500;color:#2B1E18;box-shadow:0 1px 2px rgba(43,30,24,.06),0 .5em 1em -.7em rgba(43,30,24,.3),0 0 0 1px rgba(221,208,189,.55)}
.m3-si.on svg{stroke:#2B1E18}
.m3-sa{display:flex;align-items:center;gap:.7em;margin-top:auto;padding:.7em .6em 0}
.m3-ai-p{width:2.3em;height:2.3em;font-size:1em}
.m3-mn{min-width:0;padding:1.3em 1.6em 1.5em;font-size:1.1em}
.m3-jh{display:flex;align-items:center;gap:.8em;margin-bottom:1.2em}
.m3-wi{flex:none;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:#FBF7F0;box-shadow:0 1px 2px rgba(43,30,24,.05),0 0 0 1px rgba(221,208,189,.6)}
.m3-wi svg{width:1.4em;height:1.4em;fill:none;stroke:#2B1E18;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-jh b{font-family:var(--ft);font-size:2em;font-weight:400;line-height:1;letter-spacing:-.01em}
.m3-jh span{font-size:1.05em;color:#9A8878}
.m3-jh em{margin-left:auto;padding:.4em .9em;border-radius:99px;box-shadow:inset 0 0 0 1px #D9CBB6;font-size:.72em;font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B5A4E}
.m3-jh0 .m3-sk{flex:none;width:14em}
.m3-bi-e{width:2.6em;height:2.6em;margin-left:auto;background:#2B1E18;box-shadow:none}
.m3-bi-e svg{stroke:#F3ECE1}
.m3-mini{padding:1em 1.1em}
.m3-mg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2em;align-items:start}
.m3-wfa{grid-column:2;grid-row:1}
.m3-wch{grid-column:1;grid-row:1/span 2}
.m3-wmp{grid-column:2;grid-row:2}
.m3-wch .m3-ws{margin-bottom:.7em;background:#F3ECE1;box-shadow:none}
.m3-wch .m3-wb{height:14em}
.m3-wch .m3-lh{margin-top:.9em}
.m3-wch .m3-nt{margin-top:.7em}
.m3-wmp .m3-n2{margin-top:.7em}
.m3-wmp .m3-mp{border-radius:.9em}
.m3-jm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2em;align-items:start}
.m3-mpn{position:absolute;transform:translateX(-50%);padding:.25em .75em;border-radius:99px;background:#FBF7F0;box-shadow:inset 0 0 0 1.5px #B4532F;font-size:.74em;font-weight:600;white-space:nowrap}
.m3-mo{position:absolute;left:.9em;bottom:.9em;display:flex;align-items:center;gap:.7em;padding:.6em .95em .6em .6em;border-radius:1em;background:#FBF7F0;box-shadow:var(--m3-sb)}
.m3-rg-s{width:2.8em;height:2.8em}
.m3-rg-s>svg+svg{position:absolute;inset:0;margin:auto;width:1.2em;height:1.2em;transform:none;fill:none;stroke:#B4532F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m3-mot{line-height:1.2}
.m3-mot b{display:block;font-size:1em;font-weight:500}
.m3-mot span{display:block;margin-top:.1em;font-size:.82em;color:#6B5A4E}
.m3-oqs{padding:1em}
.m3-oq{display:flex;align-items:center;gap:.7em;padding:.65em .7em;border-radius:.9em;background:#F3ECE1}
.m3-oq+.m3-oq{margin-top:.5em}
.m3-oq p{flex:1;min-width:0;line-height:1.25}
.m3-oq b{display:block;font-size:.92em;font-weight:500}
.m3-oq span{display:block;margin-top:.15em;font-size:.78em;color:var(--m3-cz)}
.m3-oq.on{background:#2B1E18;color:#F3ECE1}
.m3-oq.on span{color:#C4B29C}
.m3-oq.on .m3-it{background:rgba(224,160,127,.2)}
.m3-oq.on .m3-it svg{stroke:#E0A07F}
.m3-jf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.2em;align-items:start}
.m3-jfd{display:grid;gap:1.2em}
.m3-fin{display:flex;align-items:center;gap:1.4em}
.m3-fin .m3-rg2{width:10.5em;height:10.5em}
.m3-fls{flex:1;min-width:0;display:grid;gap:.3em}
.m3-fl2{display:flex;align-items:center;gap:.7em;padding:.55em .7em;border-radius:.8em;font-size:.95em;line-height:1.2}
.m3-fl2 i{flex:none;display:block;width:.85em;height:.85em;border-radius:50%}
.m3-fl2 span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m3-fl2.on{background:#F3ECE1;font-weight:500}
.m3-kp{display:flex;flex-direction:column;justify-content:flex-end;min-height:9em;padding:1.2em 1.3em}
.m3-kp .m3-big{font-size:3em}
.m3-sb{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:.95em;line-height:1.25}
.m3-sb+.m3-sb{margin-top:.7em}
.m3-sb .m3-pl{display:inline-flex;align-items:center;gap:.2em}
.m3-sb .m3-pl svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.m3-jc{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.2em;align-items:stretch}
.m3-crs{display:grid;gap:1.3em}
.m3-cr{display:grid;grid-template-columns:8em minmax(0,1fr);align-items:start;gap:1em}
.m3-cn{display:flex;align-items:center;gap:.6em;font-weight:500;white-space:nowrap}
.m3-ct{position:relative;height:1.4em;margin-top:.35em;border-radius:99px;background:#F1E8DA}
.m3-cf{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:99px;background:#CDBDA8;transform-origin:left center}
.m3-cf.gz{background:repeating-linear-gradient(135deg,rgba(180,83,47,.75) 0 1.5px,transparent 1.5px 5px),rgba(180,83,47,.16)}
.m3-cm{position:absolute;top:-.35em;bottom:-.35em;width:2px;border-radius:2px;background:#2B1E18}
.m3-cl{margin-top:.5em;font-size:.82em;color:var(--m3-t2)}
.m3-cl.on{display:inline-block;padding:.3em .75em;border-radius:99px;background:#2B1E18;color:#F3ECE1;font-weight:600}
.m3-kp2{display:flex;flex-direction:column;justify-content:flex-end;padding:1.3em 1.4em}
.m3-kp2 .m3-big{font-size:3.1em}

/* o que acontece quando a tela entra (a classe .anda é posta pelo script): barras crescem, rosca fecha, linha se desenha, bolinhas acendem */
.anim .tela:not(.anda) .m3-mt-f,.anim .tela:not(.anda) .m3-rt i,.anim .tela:not(.anda) .m3-cf{transform:scaleX(0)}
.anim .tela.anda .m3-mt-f{transform:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.anim .tela.anda .m3-rt i,.anim .tela.anda .m3-cf{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,.2s)}
.anim .tela:not(.anda) .m3-fp i,.anim .tela:not(.anda) .m3-wb i,.anim .tela:not(.anda) .m3-ic i,.anim .tela:not(.anda) .m3-dp i{transform:scaleY(0)}
.anim .tela.anda .m3-fp i,.anim .tela.anda .m3-wb i,.anim .tela.anda .m3-ic i,.anim .tela.anda .m3-dp i{transform:none;transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d,.2s)}
.anim .tela:not(.anda) .m3-mt-p{clip-path:inset(0 100% 0 0)}
.anim .tela.anda .m3-mt-p{clip-path:inset(0 0 0 0);transition:clip-path .9s ease 1.3s}
.anim .tela:not(.anda) .m3-mt-m,.anim .tela:not(.anda) .m3-mt .m3-fl,.anim .tela:not(.anda) .m3-fi,.anim .tela:not(.anda) .m3-fid,.anim .tela:not(.anda) .m3-dv,.anim .tela:not(.anda) .m3-cb,.anim .tela:not(.anda) .m3-ca,.anim .tela:not(.anda) .m3-fp::after,.anim .tela:not(.anda) .m3-ar,.anim .tela:not(.anda) .m3-pf,.anim .tela:not(.anda) .m3-mk{opacity:0}
.anim .tela.anda .m3-mt-m{opacity:1;transition:opacity .4s ease 1.1s}
.anim .tela.anda .m3-mt .m3-fl{opacity:1;transition:opacity .5s ease 1.2s}
.anim .tela.anda .m3-fi,.anim .tela.anda .m3-fid,.anim .tela.anda .m3-dv,.anim .tela.anda .m3-cb,.anim .tela.anda .m3-ca{opacity:1;transition:opacity .5s ease 1.1s}
.anim .tela.anda .m3-fp::after{opacity:1;transition:opacity .6s ease 1s}
.anim .tela.anda .m3-ar,.anim .tela.anda .m3-pf,.anim .tela.anda .m3-mk{opacity:1;transition:opacity .6s ease 1.4s}
.anim .tela:not(.anda) .arco{stroke-dasharray:0 100}
.anim .tela.anda .arco{transition:stroke-dasharray 1.1s ease-out .6s}
.anim .tela:not(.anda) .m3-sg{stroke-dasharray:0 100}
.anim .tela.anda .m3-sg{transition:stroke-dasharray 1s ease-out var(--d,.2s)}
.anim .tela:not(.anda) .m3-tr{stroke-dasharray:1 1;stroke-dashoffset:1}
.anim .tela.anda .m3-tr{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease-in-out .3s}
.anim .tela:not(.anda) .m3-p2{opacity:0}
.anim .tela.anda .m3-p2{opacity:1;transition:opacity .4s ease var(--d,1.3s)}
.anim .tela:not(.anda) .acende,.anim .tela:not(.anda) .m3-gs{opacity:0;transform:scale(.3)}
.anim .tela.anda .acende,.anim .tela.anda .m3-gs{opacity:1;transform:none;transition:opacity .35s ease var(--d,.2s),transform .45s cubic-bezier(.34,1.56,.64,1) var(--d,.2s)}
.anim .tela:not(.anda) .m3-lh,.anim .tela:not(.anda) .m3-ws,.anim .tela:not(.anda) .m3-camp{opacity:0;transform:translateY(8px)}
.anim .tela.anda .m3-lh,.anim .tela.anda .m3-ws,.anim .tela.anda .m3-camp{opacity:1;transform:none;transition:opacity .6s ease .7s,transform .6s ease .7s}
.anim .tela:not(.anda) .m3-mc,.anim .tela:not(.anda) .m3-anp{opacity:0}
.anim .tela.anda .m3-mc{animation:m3mancha 2.8s ease-in-out .5s 1 both}
.anim .tela.anda .m3-anp{animation:m3pulso 1.6s ease-out .9s 1 both}
@keyframes m3mancha{0%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1)}62%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes m3pulso{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* conversa do antes e depois: tamanhos em em, ligados a largura do aparelho (14px com o aparelho de 300px), pra escalar junto no celular */
.cel .chat{font-size:calc(var(--cw)*.0467);font-size:5cqi}
.cel .chat-top{padding:calc(var(--cw)*.1 + .57em) 1.14em .86em;font-size:1.07em}
.cel .chat-corpo{gap:.71em;padding:1.14em 1em}
.cel .bal{padding:.71em .93em .5em;border-radius:1.29em;font-size:1em}
.cel .bal.b{border-bottom-left-radius:.36em}
.cel .bal.c{border-bottom-right-radius:.36em}
.cel .bal time{margin-top:.29em;font-size:.857em}
.cel .dig{gap:.36em;padding:1em 1.07em;border-radius:1.29em 1.29em 1.29em .36em}
.cel .dig i{width:.5em;height:.5em}
.cel .chat-in{height:2.71em;margin:0 .86em 1.14em}

/* celular: UMA tela por passo. O celular fixo da rolagem nunca aparece abaixo de 900px (o script tambem so o usa a partir de 900px) */
@media (max-width:899px){
  .rol-cel{display:none!important}
}