/* ===== Topo em duas versões: PC = rota da Ana (clicável, avança sozinha) · celular = topo Carta simples ===== */
@media (max-width:859px){.so-pc{display:none!important}}
@media (min-width:860px){.so-cel{display:none!important}}

/* celular: tira o que polui (dica de arrastar, "rumo"), alfinete vira enfeite */
@media (max-width:859px){
 .hero-carta .rumo-linha,.hero-carta .h-dica{display:none!important}
 .hero-carta .h-pin{pointer-events:none}
 .hero-carta .cota{font-size:11px;letter-spacing:.12em;white-space:nowrap}
 .hero-carta .acoes{gap:10px;flex-wrap:nowrap;margin-top:22px}
 .hero-carta .acoes .btn{flex:1 1 auto;justify-content:center;text-align:center;padding:14px 12px;font-size:15.5px;white-space:nowrap}
 .hero-carta p.sub{font-size:17px}
 .hero-carta h1{margin-bottom:16px}
}

/* ---------- PC: a rota da Ana ---------- */
.rota-ana{padding:16px 0 26px!important;min-height:calc(100svh - 74px);overflow:hidden}
.rota-ana .wrap{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;pointer-events:auto!important;position:relative;z-index:2}
.ra-fundo{position:absolute;inset:-30px;background:url(../rota/curvas-post.svg) right -180px top -160px/1150px no-repeat,url(../rota/curvas-post.svg) left -560px bottom -600px/1000px no-repeat;opacity:.8;pointer-events:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rota-ana h1{font-size:clamp(44px,min(5.2vw,8.8vh),84px);line-height:.92;margin:8px 0 10px;max-width:11.5em}
.rota-ana p.sub{font-size:16.5px;color:#141414c4;margin:0}
.rota-ana .acoes{display:flex;gap:12px;margin-top:18px}

.ra-cartao{position:relative;margin-top:14px;background:#fff;border:1.5px solid var(--preto);border-radius:22px;padding:14px 22px 16px;box-shadow:10px 10px 0 var(--marca);max-width:600px}
/* trilho com as 5 paradas */
.ra-paradas{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding-top:28px;--f:0}
.ra-linha,.ra-feito{position:absolute;left:10%;right:10%;top:44px;height:4px}
.ra-linha{width:80%;overflow:visible}
.ra-linha path{stroke:#14141433;stroke-width:4;stroke-dasharray:4 10;vector-effect:non-scaling-stroke;fill:none}
.ra-feito{background:repeating-linear-gradient(90deg,var(--verm) 0 6px,transparent 6px 14px);transform-origin:0 50%;transform:scaleX(var(--f));transition:transform .8s cubic-bezier(.6,0,.2,1)}
.ra-paradas button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0 0 4px;cursor:pointer;font:inherit;color:inherit;border-radius:12px}
.ra-paradas button .pt{width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid var(--preto);display:block;position:relative;z-index:1;transition:background .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ra-paradas button b{position:absolute;top:0;left:50%;width:30px;height:30px;margin-left:-15px;display:flex;align-items:center;justify-content:center;font:800 13px Figtree;z-index:2;pointer-events:none}
.ra-paradas button span{font:800 11.5px Figtree;letter-spacing:.12em;text-transform:uppercase;color:#14141480;transition:color .3s}
.ra-paradas button:hover .pt{transform:scale(1.12);background:#FFF6C2}
.ra-paradas button.feita .pt{background:var(--verm);border-color:var(--verm)}.ra-paradas button.feita b{color:#fff}
.ra-paradas button.on .pt{background:var(--marca);transform:scale(1.18)}
.ra-paradas button.on span{color:var(--preto)}
.ra-paradas button:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
/* barrinha de tempo embaixo da parada atual */
.ra-paradas .tempo{display:block;width:34px;height:3px;border-radius:2px;background:#14141414;overflow:hidden;position:relative;opacity:0}
.ra-paradas button.on .tempo{opacity:1}
.ra-paradas .tempo::after{content:"";position:absolute;inset:0;background:var(--azul);transform:scaleX(0);transform-origin:0 50%}
.rota-ana.toca .ra-paradas button.on .tempo::after{animation:tempo var(--dur,6.5s) linear forwards}
.rota-ana.pausa .ra-paradas button.on .tempo::after{animation-play-state:paused}
@keyframes tempo{to{transform:scaleX(1)}}
/* a Ana anda de parada em parada */
.ra-ana{position:absolute;left:10%;top:-4px;width:34px;height:44px;margin-left:-17px;transform:translate3d(var(--x,0px),0,0);transition:transform .8s cubic-bezier(.6,0,.2,1);z-index:3;filter:drop-shadow(0 3px 0 #14141430);pointer-events:none}
.ra-ana svg{width:100%;height:100%;display:block}
.ra-ana.pula svg{animation:pulaAna .8s cubic-bezier(.6,0,.2,1)}
@keyframes pulaAna{40%{transform:translateY(-12px)}}
.ra-ana b{position:absolute;left:38px;top:0;background:var(--azul);color:#fff;border-radius:99px;padding:3px 9px;font:800 10.5px Figtree;letter-spacing:.1em;text-transform:uppercase}
/* texto da parada */
.ra-painel{position:relative;margin-top:10px;display:grid}
.ra-passo{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(18px,0,0);transition:opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;pointer-events:none}
.ra-passo.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.ra-passo .cota{display:flex;align-items:center;gap:10px;font-size:11.5px}
.ra-passo .cota i{width:24px;height:2px;background:var(--verm);display:block}
.ra-passo h2{font-size:clamp(28px,2.5vw,38px);line-height:1;margin:8px 0 8px;letter-spacing:-.02em}
.ra-passo h2 em{color:var(--azul);font-style:normal}
.ra-passo p{font-size:15.5px;line-height:1.45;color:#141414c4;margin:0;max-width:500px}
.ra-faz{display:inline-flex;align-items:center;gap:10px;margin-top:12px;background:var(--gelo);border:1.5px dashed #14141455;border-radius:12px;padding:8px 12px}
.ra-faz small{font:800 10.5px Figtree;letter-spacing:.14em;text-transform:uppercase;color:var(--verm);white-space:nowrap}
.ra-faz b{font-size:14.5px}
.ra-passo .btn{margin-top:12px;padding:10px 18px;font-size:15px}
.ra-ctrl{position:absolute;right:0;top:-6px;display:flex;gap:6px;z-index:2}
.ra-ctrl button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--preto);background:#fff;font:800 13px Figtree;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.ra-ctrl button:hover{background:var(--marca);transform:translateY(-2px)}
.ra-ctrl .ra-play{font-size:10px;letter-spacing:-1px}
/* celular ao lado */
.ra-palco{position:relative;display:flex;justify-content:center;align-items:center;--alt:min(600px,calc(100svh - 150px))}
.ra-palco .v-cel{height:var(--alt);width:calc(var(--alt) * .49)}
.rota-ana[data-i="3"] .v-cel{box-shadow:16px 16px 0 var(--azul);transform:rotate(-2deg)}
.rota-ana[data-i="4"] .v-cel{box-shadow:16px 16px 0 #1FAF5A}
.ra-palco .v-selo{right:2%;bottom:2%}
.ra-palco .v-dono{bottom:auto;top:-34px}
@media (max-height:700px){.ra-passo p{font-size:15px}.ra-passo h2{margin:6px 0}.ra-faz{margin-top:10px;padding:6px 12px}.ra-palco .v-tela{font-size:12px}.ra-palco .t-site .hero2{height:180px}.ra-palco .t-site .hero2 svg{width:128px}.ra-palco .t-busca .mapa{height:100px}}
@media (max-width:1100px){.rota-ana .wrap{gap:28px}.ra-paradas button span{font-size:10px;letter-spacing:.08em}}

/* o celular */
.v-palco{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.v-cel{position:relative;width:300px;height:614px;border-radius:46px;background:#141414;padding:11px;box-shadow:16px 16px 0 var(--marca);transform:rotate(2deg);transition:box-shadow .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.v-cel::before{content:"";position:absolute;left:50%;top:18px;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#141414;z-index:5}
.v-telas{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.v-tela{position:absolute;inset:0;opacity:0;transform:translate3d(0,24px,0) scale(.98);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);font-family:Figtree;color:#141414;font-size:13px;pointer-events:none}
.v-tela.on{opacity:1;transform:none;pointer-events:auto}
.v-status{display:flex;justify-content:space-between;padding:16px 22px 6px;font-size:12px;font-weight:800}
.v-dono{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);background:#fff;border:1.5px solid #141414;border-radius:99px;padding:5px 14px;font:700 12px Figtree;white-space:nowrap;transition:opacity .3s}

/* adesivos que pulam ao lado do celular */
.v-adesivo{position:absolute;z-index:6;border-radius:16px;padding:10px 16px;font:800 14px Figtree;white-space:nowrap;border:1.5px solid #141414;box-shadow:0 6px 0 #141414;opacity:0;transform:translate3d(0,14px,0) scale(.8) rotate(var(--r,0deg));transition:opacity .3s,transform .55s cubic-bezier(.3,1.6,.5,1)}
.v-adesivo.on{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(var(--r,0deg));transition-delay:.55s}
.v-selo{position:absolute;right:-6px;bottom:6%;width:104px;height:104px;animation:gira 26s linear infinite;z-index:4}

/* --- tela 0: bloqueio da Ana --- */
.t-bloq{background:linear-gradient(180deg,#2B3BFF 0,#1C2AD6 100%);color:#fff;text-align:center}
.t-bloq .hora{font:800 64px 'Bricolage Grotesque';font-variation-settings:"wdth" 80;letter-spacing:-.03em;margin-top:56px}
.t-bloq .dia{font-size:14px;opacity:.85}
.t-bloq .noti{margin:120px 16px 0;text-align:left;background:#ffffffee;color:#141414;border-radius:18px;padding:12px 14px;display:grid;grid-template-columns:34px 1fr;gap:4px 10px;opacity:0;transform:translateY(12px)}
.v-tela.on.t-bloq .noti,.t-bloq.on .noti{animation:sobe .6s .5s cubic-bezier(.2,.8,.2,1) forwards}
.t-bloq .noti i{grid-row:span 2;width:34px;height:34px;border-radius:9px;background:var(--marca);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px}
.t-bloq .noti small{opacity:.6}
@keyframes sobe{to{opacity:1;transform:none}}

/* --- tela 1: busca --- */
.t-busca{background:#fff}
.t-busca .barra{margin:18px 14px 12px;border:1.5px solid #14141433;border-radius:99px;padding:11px 14px;display:flex;gap:8px;align-items:center;font-size:13px}
.t-busca .barra i{width:12px;height:12px;border:2px solid #141414aa;border-radius:50%;display:block;position:relative;flex:none}
.t-busca .barra i::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:#141414aa;transform:rotate(45deg)}
.t-busca .cursor{display:inline-block;width:1.5px;height:14px;background:#2B3BFF;margin-left:1px;animation:pisca 1s steps(1) infinite;vertical-align:middle}
.t-busca .mapa{margin:0 14px;height:120px;border-radius:14px;background:#EFE9DC url(../rota/curvas-post.svg) center/420px;position:relative;overflow:hidden;border:1.5px solid #14141422}
.t-busca .mapa svg{position:absolute;width:24px;height:32px;left:58%;top:30%}
.t-busca .res{margin:10px 14px;border:1.5px solid #14141422;border-radius:14px;padding:11px 12px;opacity:0;transform:translateY(10px)}
.v-tela.on.t-busca .res{animation:sobe .5s cubic-bezier(.2,.8,.2,1) forwards}
.t-busca .res.um{border:2px solid #141414;background:#FFF8CC}
.t-busca .res b{display:block;font-size:14px}
.t-busca .res small{color:#14141499}
.t-busca .res .est{color:#E8A400;letter-spacing:1px}
.t-busca .cinza{height:9px;border-radius:4px;background:#1414140f;margin-top:7px}

/* --- tela 2: site da confeitaria --- */
.t-site{background:#FFF6F0}
.t-site .topo{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 8px;font:800 15px 'Bricolage Grotesque';font-variation-settings:"wdth" 85}
.t-site .topo span{width:22px;height:2px;background:#141414;box-shadow:0 6px 0 #141414,0 -6px 0 #141414;display:block}
.t-site .hero2{margin:4px 12px;border-radius:20px;background:#F7C9D4;height:212px;position:relative;overflow:hidden}
.t-site .hero2 svg{position:absolute;right:-10px;bottom:-6px;width:170px}
.t-site .hero2 h4{position:absolute;left:16px;top:18px;font:800 30px/0.95 'Bricolage Grotesque';font-variation-settings:"wdth" 80;letter-spacing:-.03em;color:#5B1630;max-width:150px}
.t-site .hero2 small{position:absolute;left:16px;bottom:16px;font-weight:700;color:#5B1630}
.t-site .zap{margin:12px;border-radius:99px;background:#1FAF5A;color:#fff;font-weight:800;text-align:center;padding:13px;position:relative}
.t-site .zap .toque{position:absolute;right:30px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#ffffff66;border:2px solid #fff;opacity:0}
.v-tela.on.t-site .zap .toque{animation:toque2 1.6s 1.4s ease-out infinite}
@keyframes toque2{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.t-site .chips{display:flex;gap:6px;padding:4px 12px;flex-wrap:wrap}
.t-site .chips span{border:1.5px solid #5B163033;border-radius:99px;padding:5px 10px;font-weight:700;color:#5B1630;background:#fff}
.t-site .info{margin:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t-site .info div{background:#fff;border-radius:12px;padding:9px 10px;font-weight:700}
.t-site .info small{display:block;color:#14141488;font-weight:600}

/* --- tela 3: conversa --- */
.t-chat{background:#EFE7DC}
.t-chat .cab{background:#1F7A4D;color:#fff;padding:34px 14px 12px;display:flex;align-items:center;gap:10px}
.t-chat .cab i{width:32px;height:32px;border-radius:50%;background:#F7C9D4;display:block;flex:none}
.t-chat .cab b{display:block;font-size:14px}.t-chat .cab small{opacity:.8}
.t-chat .msgs{padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.t-chat .m{max-width:78%;padding:9px 11px;border-radius:14px;line-height:1.35;opacity:0;transform:translateY(8px) scale(.96);box-shadow:0 1px 0 #00000014}
.t-chat .m.ela{align-self:flex-end;background:#D9FDD3;border-bottom-right-radius:4px}
.t-chat .m.loja{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.t-chat .m small{display:block;font-size:10px;color:#14141477;margin-top:3px;text-align:right}
.t-chat .auto{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2B3BFF;display:block;margin-bottom:2px}
.v-tela.on.t-chat .m{animation:sobe .45s cubic-bezier(.2,.8,.2,1) forwards}
.t-chat .digitando{align-self:flex-start;background:#fff;border-radius:14px;padding:10px 12px;display:flex;gap:4px;opacity:0}
.t-chat .digitando i{width:6px;height:6px;border-radius:50%;background:#14141466;display:block;animation:pula 1s infinite}
.t-chat .digitando i:nth-child(2){animation-delay:.15s}.t-chat .digitando i:nth-child(3){animation-delay:.3s}
@keyframes pula{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
.v-tela.on.t-chat .digitando{animation:apareceSome 1.2s .9s forwards}
@keyframes apareceSome{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}

/* --- tela 4: agenda da loja --- */
.t-agenda{background:#F7F5EF}
.t-agenda .cab{padding:30px 16px 10px;display:flex;justify-content:space-between;align-items:end}
.t-agenda .cab b{font:800 22px 'Bricolage Grotesque';font-variation-settings:"wdth" 80;letter-spacing:-.02em}
.t-agenda .nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 10px}
.t-agenda .nums div{background:#fff;border:1.5px solid #141414;border-radius:14px;padding:10px 12px}
.t-agenda .nums small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#14141488}
.t-agenda .nums strong{display:block;font:800 30px 'Bricolage Grotesque';font-variation-settings:"wdth" 80}
.t-agenda .lin{margin:6px 12px;background:#fff;border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center}
.t-agenda .lin time{font-weight:800}
.t-agenda .lin em{font-style:normal;font-size:10px;font-weight:800;border-radius:99px;padding:3px 8px;background:#FFF3A6}
.t-agenda .lin.nova{border:2px solid #2B3BFF;opacity:0;transform:translateX(30px)}
.t-agenda .lin.nova em{background:#2B3BFF;color:#fff}
.v-tela.on.t-agenda .lin.nova{animation:entraLado .6s .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes entraLado{to{opacity:1;transform:none}}
.t-agenda .toast{position:absolute;left:12px;right:12px;bottom:18px;background:#141414;color:#fff;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(20px)}
.t-agenda .toast i{color:#1FAF5A;font-style:normal;font-size:18px}
.v-tela.on.t-agenda .toast{animation:sobe .5s 1.5s cubic-bezier(.2,.8,.2,1) forwards}

/* --- tela 5: confirmado --- */
.t-ok{background:#1FAF5A;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.t-ok .check{width:96px;height:96px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transform:scale(0)}
.t-ok .check svg{width:52px}
.v-tela.on.t-ok .check{animation:pulo .7s .3s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pulo{to{transform:scale(1)}}
.t-ok h4{font:800 30px/1 'Bricolage Grotesque';font-variation-settings:"wdth" 80;letter-spacing:-.02em;margin:22px 0 8px}
.t-ok .card{margin-top:22px;background:#fff;color:#141414;border-radius:16px;padding:14px;text-align:left;width:100%}
.t-ok .card b{display:block}.t-ok .card small{color:#14141499}
.t-ok .est{margin-top:16px;font-size:22px;letter-spacing:4px;color:#FFE14D;opacity:0}
.v-tela.on.t-ok .est{animation:sobe .5s 1.1s forwards}

@media (prefers-reduced-motion:reduce){
 .ra-passo,.v-tela,.v-adesivo,.ra-ana,.ra-feito{transition:none!important;animation:none!important}
}
/* agenda no celular estreito: etiqueta vai pra baixo do texto */
.ra-palco .t-agenda .lin{grid-template-columns:40px 1fr;row-gap:4px}
.ra-palco .t-agenda .lin em{grid-column:2;justify-self:start}
.ra-palco .t-agenda .lin span{font-size:.92em;line-height:1.3}

/* ===== arte 2D do site no topo (versão celular) ===== */
.h-cel.h-arte{background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important;width:300px!important;height:450px!important;right:-14px!important;top:40px!important;transform:rotate(2deg)!important}
.arte-site{width:100%;height:100%;overflow:visible;display:block}
.arte-site text{font:800 10.5px Figtree;fill:#141414}
.arte-site .e2 text,.arte-site .e4 text{fill:#fff}
.a-fio{fill:none;stroke:#FF4A2E;stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.a-et{opacity:0;transform:translateY(8px);transform-box:fill-box;animation:aEt .6s cubic-bezier(.3,1.5,.5,1) forwards}
.a-et.e4{animation-delay:.5s}.a-et.e1{animation-delay:.8s}.a-et.e2{animation-delay:1.1s}.a-et.e3{animation-delay:1.4s}
@keyframes aEt{to{opacity:1;transform:none}}
.a-zap{transform-box:fill-box;transform-origin:50% 50%;animation:aZap 2.6s ease-in-out 2s infinite}
@keyframes aZap{0%,70%,100%{transform:none}80%{transform:scale(.95)}}
.a-toque{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:aToque 2.6s ease-out 2s infinite}
@keyframes aToque{0%,65%{opacity:0;transform:scale(.4)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.a-pc{animation:aFlut 6s ease-in-out infinite alternate}
@keyframes aFlut{to{transform:rotate(-5deg) translate(0,-6px)}}
.fora .a-zap,.fora .a-toque,.fora .a-pc{animation-play-state:paused}
@media (max-width:380px){.h-cel.h-arte{width:270px!important;height:405px!important;right:-18px!important}}
@media (prefers-reduced-motion:reduce){.a-et,.a-zap,.a-toque,.a-pc{animation:none!important;opacity:1;transform:none}}
@media (max-width:859px){
 .hero-carta .h-pin,.hero-carta .h-rota,.hero-carta .h-leg,.hero-carta .h-zap{display:none!important}
 .h-cel.h-arte{right:auto!important;left:50%!important;margin-left:-150px;top:34px!important}
 .hero-carta .h-selo{left:-6px;right:auto;top:0;bottom:auto;width:78px;height:78px}
 .hero-carta .h-mapa{height:500px}
}
@media (max-width:380px){.h-cel.h-arte{margin-left:-135px}}