/* Agente3 - cut-out animation landing page. Tokens first, then engine, then pieces. */
:root{
  /* One white background for every scene, without floors or dividing lines; the
     forest green is kept only for the prices (owner, 21 Oct 2026: "cleaner colors,
     without the divisions"). --cream names the off-white text on that green. */
  /* Yellow and near-black are Agente3's pair (the buttons and the prices); green marks the second
     line of the headings, WhatsApp, done and paid, and the forest green stays as the background of
     the prices and the footer (owner, 21 Oct 2026: "for the footer background I kind like the
     green"); red only marks a discount. The green and the red keep 5:1 on white. */
  --white:#FFFFFF; --cream:#F8F7F2; --dark:#102A1D;
  --green:#098045; --yellow:#FFC72C; --red:#D7261B; --ink:#1A1A1A; --paper:#FFFFFF;
  --app-border:#E3E3E3; --app-subtle:#F7F7F7; --app-muted:#616161;
  /* Urbanist for headings, prices and the wordmark, geometric and the same as the dashboard; Inter
     for everything else (owner, 21 Oct 2026: "use a more geometric font ... bring back the
     Urbanist"). The titles are in sentence case without full stops and carry the wordmark's
     sticker look, a white cut line and a soft lift (owner, 21 Oct 2026: "make the text for the
     title normal form and then add the effect we have for the Agente3 logo"). */
  --display:'Urbanist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:var(--display);
  --script:var(--display);
  /* Larger, punchier type scale inside the 390x760 stage */
  --t-micro:12px; --t-small:14px; --t-btn:16px; --t-body:16px; --t-strong:18px; --t-lead:24px; --t-title:40px; --t-num:44px; --t-display:76px;
  --btn-font:600 var(--t-btn)/1 var(--sans); --btn-track:.05em;
  /* The same WhatsApp wallpaper used by the app. */
  --wall:url("img/app/whatsapp-chat-bg.png");
  --s:1; --H:760; --bg:var(--white);
  color-scheme:light;
}
html,body{background:var(--page,var(--white))}
body{margin:0;color:var(--ink);font:400 var(--t-body)/1.4 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
img{max-width:none}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- scroll track + pinned stage ---------- */
#story{position:relative}
#track{position:relative;height:1600vh}
#pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);isolation:isolate}
#progress{position:absolute;top:0;left:0;right:0;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;z-index:56;pointer-events:none}
#stage{position:absolute;left:50%;top:var(--stage-top,0px);width:390px;height:calc(var(--H) * 1px);margin-left:-195px;
  transform:scale(var(--s));transform-origin:50% 0;z-index:2}
/* chapters live on top of each other inside the stage; one is visible at a time */
.ch{position:absolute;inset:0;visibility:hidden}
.ch.on{visibility:visible}
/* Keep inactive SVG filters from painting artifacts over the current scene. */
.ch:not(.on){display:none}
.pc{position:absolute}
[data-at]{visibility:hidden}
[data-at].in{visibility:visible}
.z-set{z-index:10}.z-prop{z-index:20}.z-char{z-index:30}.z-ui{z-index:40}
.fx{transform-origin:50% 50%}
.fb{transform-origin:50% 100%}
.ft{transform-origin:50% 0}

/* ---------- stickers: a thin white cut line, no shadow ---------- */
.stk{display:block;width:100%;height:auto;filter:url(#o5);-webkit-user-drag:none;user-select:none}
.stk.sm{filter:url(#o4)}
.stk.xs{filter:url(#o3)}
.stk.xl{filter:url(#o6)}
.flip{transform:scaleX(-1)}

/* ---------- fixed top bar: logo top-left, auto-scrolling section nav bar, CTA top-right ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:65;pointer-events:none;transition:background-color .25s ease}
/* The bar takes the colour of the page under it (app.js sets --bar-bg): over the hero
   and the pricing page, and always on a phone, where the scenes start under it. */
.topbar.is-solid{background:var(--bar-bg,var(--white))}
.topbar-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px))}
/* The wordmark is a sticker like the cut-outs: a white cut line around the letters and a soft lift. */
.topbar-logo{pointer-events:auto;flex:none;font:800 30px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none;
  -webkit-text-stroke:7px #fff;paint-order:stroke fill;filter:drop-shadow(0 1.5px 2.5px rgba(26,26,26,.22));
  padding:6px 12px;background:transparent;transition:color .22s ease}
.topbar-nav{pointer-events:auto;min-width:0;max-width:100%;background:transparent;
  border:1px solid transparent;border-radius:999px;padding:4px}
.topbar-track{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.topbar-track::-webkit-scrollbar{display:none}
/* The menu scrolls sideways on a phone; a fade marks the side that has more links. */
.topbar-track.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.topbar-track.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.topbar-track.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
/* Four sections, each one or more scenes. The one on screen is darker, with a small
   dot under it; no pill (owner, 21 Oct 2026: "this round thing ... too strong and ugly"). */
.topbar-link{position:relative;display:inline-flex;align-items:center;padding:9px 12px 11px;font:500 13px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);white-space:nowrap;flex:none;transition:color .18s ease}
.topbar-link::before{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--ink);opacity:0;transition:opacity .18s ease}
.topbar-link:hover{color:#555}
.topbar-link.on::before{opacity:1}
.topbar-cta{pointer-events:auto;flex:none}
.topbar.is-dark .topbar-logo{color:var(--ink)}
.topbar.is-dark .topbar-link,.topbar.is-dark .topbar-link:hover{color:#fff}
.topbar.is-dark .topbar-link.on::before{background:var(--yellow)}
@media(max-width:899px){
  .topbar{background:var(--bar-bg,var(--white))}
  .topbar-inner{flex-wrap:wrap;gap:8px;padding:10px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px))}
  .topbar-logo{font-size:25px;padding:5px 10px;-webkit-text-stroke-width:6px}
  .topbar-cta{padding:10px 15px;font-size:12px}
  .topbar-nav{order:3;width:100%;padding:3px}
  .topbar-link{padding:8px 8px 10px;font-size:12px}
}

/* ---------- illustrated hero ---------- */
.hero{position:relative;background:var(--white);overflow:hidden;isolation:isolate}
.hero-layout{width:min(100%,1280px);min-height:100svh;margin:0 auto;padding:96px 40px 76px;display:grid;grid-template-columns:1.04fr 1.08fr;gap:36px;align-items:center}
.hero-copy{position:relative;z-index:2}
.hero h1{font:800 clamp(54px,5.6vw,82px)/1.06 var(--display);letter-spacing:-.02em;margin:0;-webkit-text-stroke:.16em #fff;paint-order:stroke fill;filter:drop-shadow(0 2px 3px rgba(26,26,26,.2))}
.hero-whatsapp{color:var(--green);white-space:nowrap}
.hero-description{max-width:34ch;font:400 clamp(20px,1.8vw,23px)/1.5 var(--sans);color:#222823;margin:24px 0 20px}
.hero-description b{font-weight:700;font-size:1.05em;color:var(--ink)}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:30px}
.hero-cta{padding:17px 28px;font-size:16px}
.hero-explore{display:inline-flex;align-items:center;gap:10px;font:600 17px/1.4 var(--sans);color:var(--ink)}
.hero-explore:hover{color:#555}
.hero-art{position:relative;width:100%;height:580px}
.hero-store{position:absolute;left:0;bottom:20px;width:100%}
.hero-merchant{position:absolute;right:6%;bottom:0;height:84%;width:auto;overflow:visible;transform-origin:50% 100%;will-change:transform}
.merchant-head{transform-origin:242px 134px;will-change:transform}
.merchant-hand{transform-origin:220px 326px;will-change:transform}
.hero-counter{position:absolute;right:0;bottom:0;width:50%}
.hero-signal{position:absolute;left:12%;top:5%;display:grid;place-items:center;width:108px;height:108px;background:#25D366;border:6px solid #fff;border-radius:50%;box-shadow:0 8px 20px rgba(11,138,76,.22);will-change:transform}
.hero-signal img{width:64px;height:72px;filter:brightness(0) invert(1)}
/* The Pix symbol beside the WhatsApp one, in the Banco Central's own teal on white, as its brand
   manual asks (owner, 21 Oct 2026). */
.hero-pix{position:absolute;left:calc(12% + 96px);top:calc(5% + 50px);display:grid;place-items:center;width:84px;height:84px;background:#fff;border:5px solid #fff;border-radius:50%;box-shadow:0 8px 20px rgba(50,188,173,.24),0 0 0 1px rgba(50,188,173,.18) inset;will-change:transform}
.hero-pix img{width:50px;height:50px}
@media(max-width:899px){
  .hero-layout{grid-template-columns:1fr;gap:14px;padding:106px 20px 28px;align-content:center}
  .hero-copy{text-align:center}
  .hero h1{font-size:clamp(40px,11vw,54px)}
  .hero-description{font-size:18px;margin:16px auto 14px;max-width:33ch}
  .hero-actions{justify-content:center;gap:18px;margin-top:18px}
  .hero-cta{padding:14px 24px;font-size:13px}
  .hero-explore{font-size:15px;gap:8px}
  .hero-art{height:clamp(290px,38svh,350px);max-width:370px;margin:0 auto}
  .hero-merchant{right:9%;height:90%}
  .hero-store{bottom:12px}
  .hero-counter{width:48%}
  .hero-signal{left:6%;top:8%;width:70px;height:70px;border-width:4px}
  .hero-signal img{width:42px;height:48px}
  .hero-pix{left:calc(6% + 62px);top:calc(8% + 32px);width:56px;height:56px;border-width:3px}
  .hero-pix img{width:33px;height:33px}
}
@media(min-width:900px) and (max-height:760px){
  .hero-layout{padding-top:88px;padding-bottom:44px}
  .hero-art{height:clamp(420px,68svh,520px)}
}
@media(max-width:899px) and (max-height:740px){
  .hero-layout{padding-top:98px;padding-bottom:20px}
  .hero h1{font-size:38px}
  .hero-description{font-size:16px;margin-top:12px;margin-bottom:12px}
  .hero-actions{margin-top:14px}
  .hero-art{height:270px}
}

/* ---------- benefit copy and product scenes ---------- */
.step-copy{left:20px;top:36px;width:350px}
.step-copy h2{margin:0;font:800 34px/1.08 var(--display);letter-spacing:-.015em;text-wrap:balance;-webkit-text-stroke:.16em #fff;paint-order:stroke fill;filter:drop-shadow(0 2px 3px rgba(26,26,26,.2))}
/* The second line of each heading is green; no yellow marker (owner, 21 Oct 2026: "I don't like
   this yellow highlighting"). */
.step-copy h2 em{font-style:normal;color:var(--green)}
.step-copy p{margin:12px 0 0;font:400 16px/1.5 var(--sans);color:#222823;text-wrap:pretty}
.step-copy p b{font-weight:800;color:var(--ink)}
.scene-panel{--panel-scale:1.04;width:364px}
.scene-panel>.card{width:350px;transform:scale(var(--panel-scale));transform-origin:0 0}
#dash,#cart,#order{left:13px;top:250px}
.scene-person{display:none}
#ana4{left:282px;bottom:22px;height:clamp(110px,calc(var(--H) * 1px - 650px),210px)}
#cart-bag{left:52px;bottom:22px;height:clamp(110px,calc(var(--H) * 1px - 650px),210px)}
#ana5a,#ana5b{display:none}
#phone5{left:24px;width:342px;bottom:-32px}
#phone5 .phone-hand-art{display:block;width:100%;height:auto;position:relative;z-index:1}
.hand-phone-slot{position:absolute;left:42.96%;top:3.44%;width:41.96%;height:56.36%;z-index:2;pointer-events:none;
  border-radius:10.5% / 5%;overflow:hidden;container-type:inline-size}
@media(max-width:899px){
  #phone5{--hand-width:min(390px,calc((var(--H) * 1px - 290px) / 1.52));
    width:var(--hand-width);left:calc((390px - var(--hand-width)) / 2);bottom:-24px}
}
@media(max-width:899px) and (max-height:640px){
  #phone5{bottom:-68px}
}
.order-payment{display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid var(--app-border);font:700 14px/1.2 var(--sans);color:#0C5132}
.order-payment b{font-size:20px}
.order-counter{left:225px;width:154px;bottom:20px;z-index:35}
#order-preparer{left:302px;translate:-50% 0;height:clamp(200px,calc(var(--H) * 1px - 548px),300px);bottom:22px}
.packer-rig{overflow:visible;transform-origin:50% 100%;will-change:transform}
.bag-item{opacity:0;transform-origin:190px 250px;will-change:transform,opacity}
#mark-ready.ready{background:#0C5132;color:#fff}

/* ---------- titles: one paper strip per line, one typeface ---------- */
.rn{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:var(--t-title);line-height:1;margin:0}
.rn.left{align-items:flex-start}
.rn .row{display:flex;justify-content:center;white-space:nowrap;filter:url(#o3)}
.rn.left .row{justify-content:flex-start}
.rn .w{display:block;font:800 1em/1 var(--serif);letter-spacing:-.02em;padding:.2em .38em .14em;background:#fff;color:var(--ink);
  transform:rotate(var(--r,0deg));clip-path:polygon(var(--poly))}
.rn .w.hi{background:var(--green);color:#fff}

/* ---------- marker scribbles ---------- */
.scr{--d:0;position:absolute;display:block;white-space:nowrap;pointer-events:none}
.scr svg{position:absolute;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.scr svg path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d))}
.scr b{display:block;position:relative;font:italic 800 28px/1 var(--script);letter-spacing:-.03em;color:var(--ink);clip-path:inset(-10px calc((1 - var(--d)) * 110% - 10px) -10px -10px)}
.scr.red svg{stroke:var(--red)}.scr.red b{color:var(--red)}
.scr.grn svg{stroke:var(--green)}.scr.grn b{color:var(--green)}
.scr.wht svg{stroke:#fff}.scr.wht b{color:#fff}
.scr.yel svg{stroke:#C98F00}.scr.yel b{color:#B07C00}

/* ---------- live UI cards: resembling Agente3 Frontend (1px #e3e3e3 border, square corners, black buttons) ---------- */
.card{background:var(--paper);border:1px solid var(--app-border);border-radius:0;overflow:hidden;color:var(--ink);box-shadow:0 1px 0 0 rgba(26,26,26,.07)}
.app-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--app-border)}
.app-eyebrow{display:block;font:600 11px/1.15 var(--sans);color:var(--app-muted)}
.app-hd strong{display:block;font:700 15px/1.2 var(--sans);color:var(--ink);margin-top:1px}

/* Numbered Stepper (resembling packages/ui/src/components/stepper.tsx) */
.app-stepper{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--app-subtle);border-bottom:1px solid var(--app-border);font:600 11px/1 var(--sans);color:var(--app-muted)}
.stp{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.stp i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--sans);font-style:normal;background:#E3E3E3;color:#616161}
.stp.done{color:var(--ink)}.stp.done i{background:#CDFEE1;color:#0C5132}
.stp.cur{color:var(--ink);font-weight:700}.stp.cur i{background:var(--ink);color:#fff}
.stp-line{flex:1;height:1px;background:var(--app-border)}

/* ---------- HUD + buttons ---------- */
#hud{position:absolute;left:0;right:0;top:0;z-index:55;display:flex;justify-content:flex-end;align-items:center;
  padding:10px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));pointer-events:none}
#hud a{pointer-events:auto}
/* The yellow buttons and the section menu are a little lighter, in capitals and black (owner,
   21 Oct 2026). */
.cta,.cta-big{font:var(--btn-font);letter-spacing:var(--btn-track);text-transform:uppercase;background:var(--yellow);color:var(--ink)}
.cta{border-radius:999px;padding:12px 20px;white-space:nowrap;text-decoration:none}
.cta:hover,.cta-big:hover{background:#F0B91A}
.btn{appearance:none;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 13px/1 var(--sans);padding:10px 16px;cursor:default;white-space:nowrap}
.btn.full{display:block;width:100%;text-align:center;padding:11px 16px}
.btn.dis{background:#8A8A8A;opacity:.6}
.btn.press{transform:scale(.97);background:#303030}

/* ---------- character proportions; a soft shadow stands in for the floor ---------- */
.z-char.fb::after,#cart-bag::after{content:"";position:absolute;left:14%;right:14%;bottom:-7px;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,26,26,.16),rgba(26,26,26,0));z-index:-1;pointer-events:none}
.hfit{height:100%;width:auto}

/* ---------- dashboard card (Nova divulgação) ---------- */
.db{padding:10px 12px 12px;background:var(--paper)}
.prod-list{border:1px solid var(--app-border);background:#fff}
.prod-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-bottom:1px solid var(--app-border)}
.prod-row:last-child{border-bottom:0}
.th{display:block;width:34px;height:34px;object-fit:contain;flex:none;background:#fff;border:1px solid #EFEFEF}
.prod-meta{min-width:0;flex:1}
.prod-meta span{display:block;font:600 12px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-meta small{display:flex;align-items:center;gap:6px;font:700 12px/1.2 var(--sans);color:var(--ink);margin-top:2px}
/* A discount tag, the one place red appears. */
.prod-meta .off,.li .off{display:inline-block;flex:none;padding:2px 5px;border-radius:3px;background:var(--red);color:#fff;
  font:700 10.5px/1.2 var(--sans);letter-spacing:.01em;white-space:nowrap;overflow:visible}
.li small .off{margin-left:6px}
.prod-meta small s{font-weight:500;color:var(--app-muted);margin-left:4px}
.aud-box{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;padding:7px 9px;background:var(--app-subtle);border:1px solid var(--app-border);font:500 11px/1.2 var(--sans);color:var(--app-muted)}
.aud-box b{color:var(--ink);font-weight:700}
.ft2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.valid-lbl{font:500 12px/1.1 var(--sans);color:var(--app-muted)}
.valid-lbl b{color:var(--ink);font-weight:700}
.sb{padding:8px 0 0;background:var(--paper)}
.bar{position:relative;height:8px;border-radius:99px;background:#E3E3E3;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);background:#0C5132}
.sb p{margin:5px 0 0;font:600 11px/1.2 var(--sans);color:var(--app-muted)}
.sb.done p{color:#0C5132;font-weight:700}

/* ---------- WhatsApp previews rendered from the app ---------- */
.app-wa-avatar{display:block;width:34px;height:34px;flex-shrink:0;border-radius:50%;object-fit:cover;object-position:50% 45%;background:#EBF5EE}
/* The phone keeps the real proportions of the app's frame (320 x 660) at every width. On a phone
   screen its lower part runs past the bottom edge, as if rising from below: the messages sit at
   the top, so only the empty wallpaper and the message box are cut (owner, 21 Oct 2026: the
   squeezed 320 x 560 phone looked weird). */
.app-phone{--phone-scale:.92;left:47.8px;top:238px;width:294.4px;height:607.2px}
.app-whatsapp-mockup{display:flex;flex-direction:column;align-items:center;width:320px;transform:scale(var(--phone-scale,1));transform-origin:0 0;pointer-events:none}
.app-whatsapp-mockup img:not(.app-wa-avatar){padding:12px}
.app-wa-response{position:relative;width:100%}
.app-wa-typing{position:absolute;right:0;top:0;padding:8px 12px;background:#dcf8c6;border-radius:8px 0 8px 8px}
.qr rect{fill:#141414}
.dots{display:inline-flex;gap:4px;padding:5px 2px 3px}
.dots u{display:block;width:7px;height:7px;border-radius:50%;background:#aaa}
.dots u.hi{background:#555}

/* ---------- cart: the WhatsApp cart, never a web page ---------- */
.cart .rows{padding:2px 12px;background:var(--paper)}
.li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--app-border)}
.li:last-child{border-bottom:0}
.li .th{width:32px;height:32px}
.li span{flex:1;font:600 13px/1.15 var(--sans);color:var(--ink)}
.li small{display:block;font:500 11px/1.1 var(--sans);color:var(--app-muted);margin-top:2px}
.li b{font:700 13px/1 var(--sans);color:var(--ink)}
.sum{display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px;font:500 12px/1.1 var(--sans);color:var(--app-muted);background:var(--app-subtle);border-top:1px solid var(--app-border)}
.sum b{color:var(--ink);font-weight:600}
.tot{display:flex;justify-content:space-between;align-items:baseline;padding:9px 12px;font:700 13px/1 var(--sans);background:var(--paper);border-top:1px solid var(--app-border)}
.tot b{color:#0C5132;font:800 18px/1 var(--serif)}
.go{padding:0 12px 12px;background:var(--paper)}

/* ---------- Pix screen, sized to the photographed phone's display ---------- */
.px{position:relative;width:100%;height:100%;background:#F7F7F7;display:flex;flex-direction:column;padding:21cqw 6cqw 10cqw;gap:4cqw;color:var(--ink)}
.px-status{position:absolute;top:0;left:0;right:0;z-index:9;height:15cqw;padding:4.2cqw 6.5cqw 0;display:flex;align-items:flex-start;justify-content:space-between;color:#111B21;font:700 4.5cqw/1 var(--sans)}
.px-status-icons{display:flex;align-items:center;gap:1.8cqw}
.px-status-icons svg{display:block;width:5.5cqw;height:4.5cqw;overflow:visible}
.px-status-icons .px-battery{width:8cqw}
.px-island{position:absolute;top:2.4cqw;left:37%;width:26%;height:7.4cqw;border-radius:999px;background:#080909;z-index:12}
.px-home{position:absolute;bottom:2.7cqw;left:33%;width:34%;height:1.5cqw;border-radius:999px;background:#16251C;z-index:10}
.px-banner{background:#CDFEE1;border:1px solid #95F3B9;color:#0C5132;padding:5cqw}
.px-banner b{display:block;font:750 7cqw/1.2 var(--sans)}
.px-banner small{display:block;font:500 5.2cqw/1.25 var(--sans);margin-top:2cqw}
.px-box{flex:1;min-height:0;background:#fff;border:1px solid var(--app-border);padding:5cqw;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3cqw}
.px-hd{width:100%;display:flex;flex-direction:column;gap:2cqw;border-bottom:1px solid var(--app-border);padding-bottom:4cqw}
.px-hd span{font:600 5.5cqw/1.2 var(--sans);color:var(--app-muted)}
.px-hd b{font:800 10cqw/1 var(--sans);color:var(--ink);white-space:nowrap}
.px .qr{width:70%;height:auto;flex:none;border:1px solid var(--app-border);padding:3cqw;background:#fff}
.px-code{width:100%;background:var(--app-subtle);border:1px solid var(--app-border);padding:3cqw;font:500 4cqw/1.15 monospace;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp{width:100%;text-align:center;font:750 5.5cqw/1 var(--sans);background:var(--ink);color:#fff;padding:5cqw 3cqw;border-radius:99px}
.okp{position:absolute;inset:0;background:#F4FBF6;color:#0C5132;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5cqw;text-align:center;padding:23cqw 8cqw 18cqw;z-index:5}
.px.ok .okp{display:flex}
.okp b{font:850 9.5cqw/1.12 var(--sans);color:#0C5132}
.okp-amount{font:850 14cqw/1 var(--sans);letter-spacing:-.04em;white-space:nowrap}
.okp small{font:600 5.5cqw/1.2 var(--sans);color:#53685A}
.okp-sub{font:600 5.8cqw/1.35 var(--sans);color:#53685A;border-top:1px solid #D5E6DA;padding-top:6cqw;margin:3cqw 0 0;width:100%}
.okp .ck{width:24cqw;height:24cqw}
.okp .ck svg{width:14cqw;height:14cqw}
.ck{width:52px;height:52px;border-radius:50%;background:#0C5132;display:grid;place-items:center;flex:none}
.okc{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--paper)}
.okc .ck{width:34px;height:34px}
.okc b{display:block;font:700 14px/1.15 var(--sans);color:var(--ink)}
.okc small{display:block;font:500 12px/1.25 var(--sans);color:var(--app-muted);margin-top:2px}
.okc.big{padding:12px 16px}.okc.big b{font-size:16px}.okc.big .ck{width:40px;height:40px}

/* ---------- store order panel (Pedidos / PickingChecklist) ---------- */
.steps{display:flex;gap:5px;padding:8px 12px;background:var(--app-subtle);border-bottom:1px solid var(--app-border)}
.st{flex:1;display:flex;align-items:center;gap:5px;padding:6px 7px;border:1px solid var(--app-border);background:#fff;color:var(--app-muted);font:600 11px/1 var(--sans);white-space:nowrap}
.st i{width:16px;height:16px;border-radius:50%;background:#E3E3E3;display:grid;place-items:center;font:700 10px/1 var(--sans);font-style:normal;flex:none;color:#616161}
.st.on{border-color:var(--ink);color:var(--ink);font-weight:700}.st.on i{background:var(--ink);color:#fff}
.st.done{background:#CDFEE1;border-color:#95F3B9;color:#0C5132;font-weight:700}.st.done i{background:#0C5132;color:#fff}
.chk{list-style:none;margin:0;padding:8px 12px 10px;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;background:var(--paper)}
.chk li{display:flex;align-items:center;gap:7px;font:500 12.5px/1.15 var(--sans);color:var(--ink)}
.chk li b{font-weight:700}
.chk li span{width:16px;height:16px;border-radius:0;border:1.5px solid #8A8A8A;background:#fff;flex:none;position:relative}
.chk li.ok span{background:var(--ink);border-color:var(--ink)}
.chk li.ok span::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.chk li.ok div{text-decoration:line-through;color:var(--app-muted)}

/* ---------- desktop: large benefit copy beside the product ---------- */
@media(min-width:900px){
  .step-copy{left:-295px;top:124px;width:380px}
  .step-copy h2{font-size:54px;line-height:1.06;letter-spacing:-.02em}
  .step-copy p{font-size:21px;line-height:1.5;margin-top:20px}
  .scene-panel{--panel-scale:1.16;width:406px}
  #dash,#cart,#order{left:110px;top:180px}
  #offer-phone,#chat{--phone-scale:1;left:130px;top:78px;width:320px;height:660px}
  .scene-person{display:block;left:500px;bottom:26px;height:420px}
  #ana4,#ana5a,#ana5b{display:block;left:510px;width:auto;height:420px;bottom:26px}
  #cart-bag{left:-245px;height:210px;bottom:26px}
  #phone5{left:120px;width:400px;bottom:-44px}
  .order-counter{left:488px;width:210px}
  #order-preparer{left:593px;height:440px;bottom:26px}
}
@media(min-width:1360px){
  .scene-person{left:545px;height:480px}
  #ana4,#ana5a,#ana5b{left:545px;height:480px}
  #order-preparer{left:623px;height:490px}
  .order-counter{left:510px;width:225px}
}

.scr.big b{font-size:36px}
.scr.big svg{stroke-width:3}

/* ---------- pricing ---------- */
.pr{position:relative;z-index:3;background:var(--dark);color:var(--cream);overflow:hidden;padding-top:88px;isolation:isolate}
.pr-in{position:relative;z-index:2;width:min(100%,1120px);margin:0 auto;box-sizing:border-box;
  padding-left:max(32px, env(safe-area-inset-left, 0px));padding-right:max(32px, env(safe-area-inset-right, 0px))}
.pr-layout{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
/* On the green the sticker edge turns into a muddy halo, so the prices heading stays plain. */
.pr-heading{margin:0;font:800 clamp(44px,4.8vw,64px)/1.06 var(--display);letter-spacing:-.015em;text-wrap:balance}
.pr-heading em{font-style:normal;color:var(--yellow)}
.pr-lead{font:400 21px/1.5 var(--sans);margin:24px 0 0;color:#C5D7CB;max-width:30ch;text-wrap:pretty}
.plist{list-style:none;margin:0;padding:0;display:grid}
.price-row{border-top:1px solid #45604F;padding:24px 0 26px}
.price-row:last-child{border-bottom:1px solid #45604F}
.price-row h3{margin:0;font:700 22px/1.2 var(--sans);letter-spacing:-.01em}
.price-amount{display:flex;align-items:baseline;gap:10px;margin:16px 0 12px;white-space:nowrap}
.price-currency{font:700 28px/1 var(--sans)}
.price-amount b{font:800 84px/.94 var(--display);letter-spacing:-.03em;color:var(--yellow);font-variant-numeric:tabular-nums}
.price-unit{align-self:center;font:600 18px/1.25 var(--sans);color:#D8E5DB;margin-left:6px}
.price-description{margin:0;font:400 17px/1.55 var(--sans);color:#C5D7CB;max-width:40ch;text-wrap:pretty}
.pr-cta{margin-top:44px}
.cta-big{display:block;text-align:center;margin:0 auto 14px;max-width:360px;padding:22px 26px;border-radius:999px;text-decoration:none;font-size:18px}
.contact{text-align:center;font:600 17px/1.5 var(--sans);color:#E8F5EC;margin:0}
.contact a{color:#fff;font-weight:800}
.contact a:hover{color:var(--yellow)}
.crew{position:relative;width:min(100%,600px);height:400px;margin:44px auto 0}
.crew img{position:absolute;bottom:34px;height:auto;z-index:2}
.crew::after{content:"";position:absolute;left:4%;right:4%;bottom:22px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0));z-index:1;pointer-events:none}
.foot{position:relative;z-index:2;text-align:center;font:500 15px/1.4 var(--sans);color:#B7CBBD;margin:0;padding:18px 0 12px}
.legal-links{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;column-gap:22px;row-gap:12px;padding:0 0 34px;color:#B7CBBD;font:600 14px/1.4 var(--sans)}
.legal-links a:hover{color:#fff}
.legal-links a[aria-current="page"]{font-weight:850}
@media(max-width:899px){
  .pr{padding-top:112px}
  .pr-in{max-width:570px;padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
  .pr-layout{grid-template-columns:1fr;gap:32px}
  .pr-heading{font-size:44px;max-width:13ch}
  .pr-lead{font-size:19px;margin-top:18px;max-width:30ch}
  .price-row{padding:22px 0 24px}
  .price-row h3{font-size:21px}
  .price-amount{gap:8px;margin:14px 0 12px}
  .price-currency{font-size:24px}
  .price-amount b{font-size:72px}
  .price-unit{font-size:16px;margin-left:4px}
  .price-description{font-size:16.5px}
  .pr-cta{margin-top:32px}
  .contact{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto;font-size:15px}
  .contact>span{display:none}
  .crew{height:clamp(270px,70vw,400px);margin-top:32px}
}
@media(max-width:359px){
  .pr-heading{font-size:36px}
  .price-amount b{font-size:58px}
  .price-unit{font-size:14px;margin-left:2px}
}

/* Reveal pricing with a short, smooth lift. */
.rv{opacity:0}
.rv.show{opacity:1;animation:reveal .4s cubic-bezier(.22,1,.36,1) both}
@keyframes reveal{
  from{opacity:0;transform:translateY(16px) scale(.98) rotate(var(--r,0deg))}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg))}
}
.crew img.rv.show,.rn.rv.show{transform:rotate(var(--r,0deg))}

/* ---------- reduced motion: a static storyboard ---------- */
.rmband{position:relative;overflow:hidden;background:var(--c)}
.rmband .ch{visibility:visible;left:50%;margin-left:-195px;transform-origin:50% 0}
.rm #track{height:auto}
.rm #pin{position:static;height:0;overflow:visible;background:transparent;isolation:auto}
.rm #stage,.rm #progress{display:none}
.rm #hud{display:none}
.rm .rv{opacity:1}
@media (prefers-reduced-motion:reduce){.rv.show{animation:none}}


/* phone apps: keep the pinned stage clear of the system bars (no effect elsewhere) */
@supports (top:env(safe-area-inset-top)){
  #pin{top:env(safe-area-inset-top,0px);height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}