/* Lookalike v3.1 · "Como é na prática": quatro cenas antes/depois com alavanca de revelação.
   Mobile-first: trilho horizontal com snap + seletor Antes|Depois. Desktop: grade 2x2 + alavanca.
   Sem JS: estado "Depois" fixo e legível. Movimento só com html.js e fora de prefers-reduced-motion.
   --p = fração da cena "Depois" visível (1 = tudo depois, 0 = tudo antes). */

.pratica .cab .lead{max-width:40ch}

/* trilho (celular) */
.ad-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 28px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding:4px var(--pad) 8px;scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch}
.ad-trilho::-webkit-scrollbar{display:none}
.no-js .ad-trilho{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin-inline:0;padding:0;gap:16px}

/* cartão */
.ad{--p:1;position:relative;scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;background:var(--branco);border:1px solid rgba(203,203,195,.9);border-radius:10px;transition:border-color .3s,box-shadow .4s var(--ease)}
.ad:focus-within{border-color:var(--pet500);box-shadow:0 22px 48px -28px rgba(15,76,78,.5)}
@media(hover:hover){.ad:hover{border-color:var(--pet500);box-shadow:0 22px 48px -28px rgba(15,76,78,.45)}}
.ad-topo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:18px 18px 14px}
.ad-n{font-size:12px;letter-spacing:.08em;color:var(--chumbo)}
.ad h3{font-size:clamp(17px,1.5vw,20px);line-height:1.3;letter-spacing:-.01em;min-height:2.6em;text-wrap:balance}
@media(min-width:1200px){.ad h3{min-height:0}}

/* palco: altura fixa por proporção; tudo dentro escala em cqw */
.ad-palco{position:relative;margin:0 18px;aspect-ratio:4/3;border-radius:8px;background:#4A4946;color:var(--nevoa);overflow:hidden;container-type:inline-size;user-select:none;-webkit-user-select:none;isolation:isolate}
.ad-cenas,.ad-alavanca{--em:clamp(11px,3.7cqw,15px);--banda:calc(5cqw + 2.4*var(--em))}
.ad-cenas{position:absolute;inset:0}
.ad-cena{position:absolute;inset:0;padding:var(--banda) 5% 5%;font-size:var(--em);line-height:1.3;background:#4A4946}
.ad-depois{clip-path:inset(0 0 0 calc((1 - var(--p))*100%))}
.ad-rot{position:absolute;top:5%;transition:opacity .25s;font-size:.92em;letter-spacing:.06em;text-transform:uppercase;padding:.4em .8em;border-radius:999px;border:1px solid rgba(203,203,195,.35);color:var(--traco);line-height:1;background:rgba(74,73,70,.9)}
.ad-antes .ad-rot{left:5%}
.ad-depois .ad-rot{right:5%;border-color:var(--teal);color:var(--gelo);background:rgba(66,156,159,.2)}
/* a alavanca viaja na faixa superior livre; o chip do lado que ficou estreito some */
.ad[data-beira="esq"] .ad-antes .ad-rot,.ad[data-beira="dir"] .ad-depois .ad-rot{opacity:0}

/* divisor e alavanca (só com ponteiro fino, a partir de 768) */
.ad-div{position:absolute;top:0;bottom:0;left:calc((1 - var(--p))*100%);width:2px;margin-left:-1px;background:var(--branco);box-shadow:0 0 0 1px rgba(39,38,36,.3);pointer-events:none;z-index:2}
.ad-alavanca{position:absolute;top:calc(var(--banda)/2);left:clamp(24px,calc((1 - var(--p))*100%),calc(100% - 24px));width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--branco);color:var(--grafite);box-shadow:0 8px 20px -8px rgba(0,0,0,.6),0 0 0 1px rgba(39,38,36,.2);display:flex;align-items:center;justify-content:center;gap:0;cursor:ew-resize;z-index:3;touch-action:none;transition:transform .2s var(--ease),box-shadow .2s}
.ad-alavanca .ico{width:14px;height:14px;stroke-width:2.2}
.ad-alavanca .ico:first-child{margin-right:-3px}.ad-alavanca .ico:last-child{margin-left:-3px}
.ad-alavanca:focus-visible{outline:2px solid var(--pet500);outline-offset:3px}
.ad.arrastando .ad-alavanca,.ad.arrastando .ad-palco{cursor:grabbing}
.ad.arrastando .ad-alavanca{transform:scale(1.06)}
@media(hover:hover){.ad-alavanca:hover{transform:scale(1.06)}}
@media(max-width:767px){.ad-div,.ad-alavanca{display:none}}

/* rodapé: seletor + uma frase por estado (altura reservada) */
.ad-rod{display:grid;gap:12px;padding:14px 18px 18px;margin-top:auto}
.ad-seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid var(--traco);border-radius:8px;padding:3px;background:#fff}
.ad-seg button{min-height:44px;border-radius:6px;font-size:15px;font-weight:500;color:var(--chumbo);transition:background .25s,color .25s,transform .15s var(--ease)}
.ad-seg button:active{transform:scale(.97)}
.ad-seg button[aria-pressed="true"]{background:var(--pet700);color:var(--branco)}
.ad-seg button:focus-visible{outline:2px solid var(--pet500);outline-offset:2px}
.ad-frase{position:relative;min-height:calc(1.45em*2);font-size:15px;line-height:1.45;color:var(--grafite)}
.ad-frase span{position:absolute;inset:0;transition:opacity .35s}
.ad-frase .f-antes{opacity:0}
.ad-frase b{font-weight:500;color:var(--pet700)}
.ad[data-estado="antes"] .f-antes{opacity:1}
.ad[data-estado="antes"] .f-depois{opacity:0}

/* indicadores (celular) */
.ad-pontos{display:flex;justify-content:center;margin-top:4px}
.ad-pontos button{width:44px;height:44px;display:grid;place-items:center}
.ad-pontos button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--traco);transition:background .25s,transform .25s}
.ad-pontos button[aria-current="true"]::before{background:var(--pet700);transform:scale(1.3)}
.ad-pontos button:focus-visible{outline:2px solid var(--pet500);outline-offset:-6px;border-radius:50%}

/* grade (tablet/desktop) */
@media(min-width:768px){
  .ad-trilho{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:20px;overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none}
  .ad-pontos{display:none}
  .ad-palco{touch-action:none;cursor:ew-resize}
  .ad-cenas,.ad-alavanca{--banda:max(calc(5cqw + 2.4*var(--em)),54px)}
}
@media(min-width:1200px){
  .ad-rod{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
  .ad-seg{grid-template-columns:auto auto}
  .ad-seg button{padding:0 16px;font-size:14px}
  .no-js .ad-rod{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:1000px){.ad-topo{padding:22px 22px 16px}.ad-palco{margin:0 22px;aspect-ratio:3/2}.ad-rod{padding:16px 22px 22px}}

/* ---- cena 1 · dinheiro ---- */
.c1a .chip0,.c3a .chip0{position:absolute;font-size:.95em;padding:.5em .9em;border:1px dashed rgba(203,203,195,.5);border-radius:999px;color:var(--nevoa);background:rgba(51,50,47,.92);white-space:nowrap;line-height:1}
.c1a .chip0 b{color:var(--branco);font-weight:500}
.c1a .solta-c{position:absolute;left:var(--x);top:var(--y);width:34%;transform:rotate(var(--r));padding:.4em .6em;border:1px dashed rgba(203,203,195,.45);border-radius:.4em;background:rgba(51,50,47,.92);display:grid;gap:.22em}
.c1a .solta-c small{font-size:.92em;color:var(--traco);letter-spacing:.03em;white-space:nowrap}
.c1a .solta-c i{display:block;height:.5em;width:66%;border-radius:.3em;background:rgba(203,203,195,.3)}
.c1a .solta-c em{font-style:normal;font-size:.92em;color:var(--traco);opacity:.75;white-space:nowrap}
.c1a .area,.c3a .area{position:absolute;left:5%;right:5%;top:var(--banda);bottom:5%}
.c1a .chip0{left:2%;top:2%;transform:rotate(-2deg)}
.c1a .s1{--x:52%;--y:4%;--r:2deg}.c1a .s2{--x:7%;--y:24%;--r:-1.5deg}.c1a .s3{--x:56%;--y:46%;--r:2.5deg}.c1a .s4{--x:15%;--y:62%;--r:-2deg}
.c1a .s5,.c1a .s6,.c1a .s7{display:none}
@container (min-width:540px){
  .c1a .solta-c{width:26%;display:grid}
  .c1a .s1{--x:40%;--y:2%;--r:2deg}.c1a .s2{--x:70%;--y:10%;--r:-1.5deg}.c1a .s3{--x:8%;--y:24%;--r:-2deg}.c1a .s4{--x:44%;--y:36%;--r:1.5deg}.c1a .s5{--x:72%;--y:44%;--r:-2.5deg}.c1a .s6{--x:20%;--y:60%;--r:2deg}.c1a .s7{--x:54%;--y:70%;--r:-1.5deg}
}
.c1d{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.8em;align-content:stretch}
.c1-topo{display:flex;align-items:center;justify-content:space-between;gap:1em;border-bottom:1px solid rgba(203,203,195,.18);padding-bottom:.45em}
.c1-topo span{font-size:.92em;color:var(--traco);letter-spacing:.03em}
.c1-topo b{font-size:2.3em;line-height:1;font-weight:500;color:var(--gelo);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.c1-liga{display:grid;grid-template-columns:auto minmax(0,1fr) 44%;grid-template-rows:minmax(0,1fr);align-items:stretch;min-height:0}
.c1-mid{position:relative;min-height:0}
.c1-cli,.c1-rec{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:.25em;min-height:0;list-style:none;margin:0;padding:0}
.c1-cli li{display:flex;align-items:center;min-height:0}
.c1-cli i{width:1.7em;height:1.7em;border-radius:50%;background:rgba(203,203,195,.18);border:1px solid rgba(203,203,195,.4);position:relative;flex:none;overflow:hidden}
.c1-cli i::before{content:"";position:absolute;left:50%;top:22%;width:.55em;height:.55em;margin-left:-.275em;border-radius:50%;background:var(--nevoa)}
.c1-cli i::after{content:"";position:absolute;left:50%;top:62%;width:1.1em;height:1.1em;margin-left:-.55em;border-radius:50%;background:var(--nevoa)}
.c1-rec li{align-self:center;height:min(100%,2.2em);display:flex;align-items:center;gap:.5em;padding:0 .6em;border:1px solid rgba(66,156,159,.45);border-radius:.4em;font-size:.92em;color:var(--nevoa);background:rgba(15,76,78,.28);white-space:nowrap;min-height:0}
.c1-rec li i{flex:1;height:.45em;border-radius:.25em;background:rgba(66,156,159,.6);min-width:.6em}
.c1-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.c1-fios path{fill:none;stroke:var(--teal);stroke-width:1.5;vector-effect:non-scaling-stroke}
.js .ad.vivo .c1-fios{animation:ad-varre .9s var(--ease) both;animation-delay:.55s}
.js .ad.vivo .c1-cli i{animation:ad-pop .4s var(--ease) both;animation-delay:calc(.2s + var(--i)*.12s)}
.js .ad.vivo .c1-rec li{animation:ad-pop .4s var(--ease) both;animation-delay:calc(.95s + var(--i)*.18s)}
@keyframes ad-varre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ad-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ---- cena 2 · atendimento ---- */
.c2a,.c2d{display:flex;flex-direction:column;gap:.55em}
.zap-topo{display:flex;align-items:center;gap:.6em;padding-bottom:.45em;border-bottom:1px solid rgba(203,203,195,.18)}
.zap-av{width:1.9em;height:1.9em;border-radius:50%;background:rgba(203,203,195,.25);flex:none;position:relative;overflow:hidden}
.zap-av::before{content:"";position:absolute;left:50%;top:22%;width:.6em;height:.6em;margin-left:-.3em;border-radius:50%;background:var(--nevoa)}
.zap-av::after{content:"";position:absolute;left:50%;top:62%;width:1.2em;height:1.2em;margin-left:-.6em;border-radius:50%;background:var(--nevoa)}
.zap-topo span{color:var(--nevoa);font-weight:500}
.zap-topo em{font-style:normal;margin-left:auto;font-size:.92em;color:var(--traco);white-space:nowrap}
.zap-topo em.et{color:var(--gelo);border:1px solid var(--teal);border-radius:999px;padding:.3em .7em;background:rgba(66,156,159,.2);line-height:1}
.bolha{position:relative;max-width:84%;padding:.5em .8em;border-radius:.8em .8em .8em .2em;background:rgba(203,203,195,.14);color:var(--nevoa);line-height:1.3;margin:0}
.bolha.in small{display:block;margin-top:.25em;font-size:.92em;color:var(--traco)}
.bolha.sis{align-self:center;max-width:100%;text-align:center;font-size:.92em;color:var(--traco);background:none;border:1px dashed rgba(203,203,195,.35);border-radius:999px;padding:.35em .9em;white-space:nowrap}
.bolha.ag{align-self:flex-end;border-radius:.8em .8em .2em .8em;background:var(--pet700);color:var(--branco)}
.bolha.ag span{display:block;font-size:.92em;color:var(--gelo);margin-bottom:.1em}
.zap-vazio{margin-top:auto;border:1px dashed rgba(203,203,195,.35);border-radius:.5em;padding:.55em .8em;display:grid;gap:.1em;text-align:center;color:var(--traco);font-size:.95em;line-height:1.3}
.zap-vazio b{color:var(--nevoa);font-weight:500}
/* peças ligadas a container query não animam: trocar display reinicia animação ao redimensionar */
.zap-comp{display:none;margin-top:auto;align-items:center;justify-content:space-between;gap:.6em;padding:.5em .8em;border:1px solid rgba(203,203,195,.25);border-radius:.5em;background:rgba(39,38,36,.35);color:var(--traco);font-size:.95em}
.zap-comp i{width:1.7em;height:1.7em;border-radius:.35em;background:var(--teal);flex:none;position:relative}
.zap-comp i::after{content:"";position:absolute;left:.45em;top:.5em;width:.5em;height:.5em;border:solid var(--noite);border-width:.14em .14em 0 0;transform:rotate(45deg)}
@container (min-width:520px){.zap-comp{display:flex}}
.js .ad.vivo .c2d .et{animation:ad-pop .4s var(--ease) both;animation-delay:.35s}
.js .ad.vivo .c2d .sis{animation:ad-sobe .45s var(--ease) both;animation-delay:.8s}
.js .ad.vivo .c2d .ag{animation:ad-sobe .45s var(--ease) both;animation-delay:1.45s}
@keyframes ad-sobe{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}

/* ---- cena 3 · repetitivo ---- */
.c3a .carta{position:absolute;left:calc(6% + var(--i)*6%);top:calc(2% + var(--i)*14%);width:54%;transform:rotate(calc(var(--r)*1deg));display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em .6em;align-items:center;padding:.5em .7em;border:1px solid rgba(203,203,195,.3);border-radius:.4em;background:#3A3936;box-shadow:0 .5em 1.2em -.7em rgba(0,0,0,.7)}
.c3a .carta i{grid-row:span 2;width:1.7em;height:1.7em;border-radius:.35em;background:rgba(203,203,195,.16);position:relative}
.c3a .carta i::before{content:"";position:absolute;inset:.45em .35em;border:1px solid var(--traco);border-radius:.15em}
.c3a .carta .ic-mail::after{content:"";position:absolute;left:.35em;right:.35em;top:.5em;height:.45em;border:1px solid var(--traco);border-top:0;border-radius:0 0 .1em .1em;transform:skewY(0)}
.c3a .carta .ic-zap::before{border-radius:50%}
.c3a .carta .ic-ind::before{border-radius:50% 50% .15em .15em}
.c3a .carta b{display:block;height:.5em;width:72%;border-radius:.3em;background:rgba(203,203,195,.45)}
.c3a .carta s{display:block;height:.4em;width:48%;border-radius:.3em;background:rgba(203,203,195,.22);text-decoration:none}
.c3a .carta em{position:absolute;right:.55em;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--gelo)}
.c3a .c3-chip{right:2%;bottom:2%}
.c3a .carta.extra{display:none}
@container (min-width:540px){.c3a .carta,.c3a .carta.extra{display:grid;width:56%;left:calc(6% + var(--i)*5.5%);top:calc(2% + var(--i)*11.5%)}}
.c3d{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.7em}
.c3-topo{display:flex;align-items:center;gap:.6em;border-bottom:1px solid rgba(203,203,195,.18);padding-bottom:.45em}
.c3-topo b{font-size:2.3em;line-height:1;font-weight:500;color:var(--gelo);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.c3-topo span{font-size:.92em;color:var(--nevoa);line-height:1.2}
.c3-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.4em;min-height:0;list-style:none;margin:0;padding:0}
.c3-grade li{display:flex;align-items:center;gap:.45em;padding:0 .55em;min-height:0;border-radius:.4em;background:rgba(66,156,159,.16);border:1px solid rgba(66,156,159,.45)}
.c3-grade li i{width:1em;height:1em;border-radius:50%;background:var(--teal);position:relative;flex:none}
.c3-grade li i::after{content:"";position:absolute;left:.33em;top:.14em;width:.22em;height:.46em;border:solid var(--noite);border-width:0 .14em .14em 0;transform:rotate(45deg)}
.c3-grade li s{flex:1;height:.4em;border-radius:.2em;background:rgba(203,203,195,.4);text-decoration:none}
.js .ad.vivo .c3-grade li{animation:ad-acende .5s var(--ease) both;animation-delay:calc(.3s + var(--i)*.11s)}
.js .ad.vivo .c3-grade li i{animation:ad-pop .35s var(--ease) both;animation-delay:calc(.3s + var(--i)*.11s)}
@keyframes ad-acende{from{background:rgba(203,203,195,.06);border-color:rgba(203,203,195,.18)}to{background:rgba(66,156,159,.16);border-color:rgba(66,156,159,.45)}}

/* ---- cena 4 · número ---- */
.c4a,.c4d{display:flex;flex-direction:column;gap:.7em}
.c4d{gap:.6em}
.ga-topo{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding-bottom:.45em;border-bottom:1px solid rgba(203,203,195,.18)}
.ga-topo span{color:var(--nevoa);font-weight:500}
.ga-topo em{font-style:normal;color:var(--traco);font-size:.92em}
.ga-barra{display:flex;height:2em;border-radius:.4em;overflow:hidden;background:rgba(203,203,195,.08);gap:2px}
.ga-barra i{display:block;height:100%;width:var(--w);flex:none;transform-origin:left}
.c4a .ga-barra i{background:repeating-linear-gradient(135deg,rgba(203,203,195,.28) 0 .5em,rgba(203,203,195,.1) .5em 1em)}
.c4d .ga-barra i:nth-child(1){background:var(--teal)}
.c4d .ga-barra i:nth-child(2){background:var(--pet500)}
.c4d .ga-barra i:nth-child(3){background:var(--gelo)}
.ga-leg{display:grid;gap:.35em;font-size:.95em;color:var(--nevoa);list-style:none;margin:0;padding:0}
.ga-leg li{display:flex;align-items:center;gap:.6em;white-space:nowrap}
.ga-leg i{width:.8em;height:.8em;border-radius:.15em;flex:none}
.ga-leg s{text-decoration:none;margin-left:auto;color:var(--traco);font-size:.97em}
.ga-leg em{margin-left:auto;flex:0 0 calc(var(--w)*.5);height:.45em;border-radius:.25em;background:rgba(203,203,195,.28)}
.ga-utm{display:none;gap:.5em;list-style:none;margin:0;padding:0}
.ga-utm li{flex:1;display:flex;align-items:center;gap:.45em;padding:.45em .6em;border:1px solid rgba(203,203,195,.22);border-radius:.4em;font-size:.92em;color:var(--nevoa);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden}
.ga-utm li i{width:1em;height:1em;border-radius:50%;background:var(--teal);position:relative;flex:none}
.ga-utm li i::after{content:"";position:absolute;left:.33em;top:.14em;width:.22em;height:.46em;border:solid var(--noite);border-width:0 .14em .14em 0;transform:rotate(45deg)}
@container (min-width:480px){.ga-utm{display:flex}}
.ga-ok{margin-top:auto;border:1px solid rgba(66,156,159,.45);border-radius:.5em;padding:.5em .8em;display:grid;gap:.1em;text-align:center;background:rgba(15,76,78,.28);font-size:.95em;line-height:1.3}
.ga-ok b{color:var(--gelo);font-weight:500}
.ga-ok span{display:none;color:var(--nevoa)}
@container (max-width:262px){.ga-ok{display:none}}
@container (min-width:480px){.ga-ok span{display:block}}
.c4a .ga-leg i{background:repeating-linear-gradient(135deg,rgba(203,203,195,.4) 0 .2em,rgba(203,203,195,.12) .2em .4em)}
.c4d .ga-leg li:nth-child(1) i{background:var(--teal)}
.c4d .ga-leg li:nth-child(2) i{background:var(--pet500)}
.c4d .ga-leg li:nth-child(3) i{background:var(--gelo)}
.js .ad.vivo .c4d .ga-barra i{animation:ad-cresce .6s var(--ease) both;animation-delay:calc(.3s + var(--i)*.28s)}
.js .ad.vivo .c4d .ga-leg li{animation:ad-sobe .4s var(--ease) both;animation-delay:calc(.5s + var(--i)*.28s)}
@keyframes ad-cresce{from{transform:scaleX(0)}to{transform:none}}

/* reduzir movimento: estado final, sem loops */
@media(prefers-reduced-motion:reduce){
  .ad *,.ad *::before,.ad *::after{animation:none!important;transition:none!important}
}