/* =========================================================
   Precifica: sistema visual do site (o mesmo do app)
   Pedra no fundo, blocos de cor com papel fixo, tinta para a ação.
   Cada seção define --c: a cor-papel que pinta o marca-texto do
   título, o ponto da etiqueta e os detalhes.
   ========================================================= */
:root{
  --ground:#E7E5E0;      /* pedra: o fundo do app */
  --ground-2:#DEDBD5;
  --card:#F6F5F1;        /* superfície dos cards */
  --paper:#FFFFFF;       /* folha do cliente (proposta, Vitrine) */
  --ink:#151513;         /* tinta: texto e botão principal */
  --ink-2:#5C5A55;
  --ink-3:#8D8A84;
  --line:rgba(21,21,19,.12);
  --line-2:rgba(21,21,19,.22);
  --tint:rgba(21,21,19,.05);
  --tom:#E4704A;         /* marca e negócios */
  --lim:#B7CC6C;         /* dinheiro que entrou */
  --sol:#EAD55C;         /* precisa de você */
  --lil:#B5A8F3;         /* pessoas e Pro */
  --ceu:#9FBCF1;         /* em andamento */
  --arg:#D3D0CA;         /* neutro */
  --on:#151513;          /* texto sobre cor: sempre tinta */
  --on-fg:#F6F5F1;
  --btn:#151513; --btn-fg:#F6F5F1;
  --seg-on:#FFFFFF;
  --band:#151513; --band-2:#1D1D1A; --band-fg:#F2F0EA; --band-fg-2:rgba(242,240,234,.66); --band-line:rgba(255,255,255,.12); --band-line-2:rgba(255,255,255,.28);
  --pro-glow1:rgba(181,168,243,.6); --pro-glow2:rgba(228,112,74,.38);
  --shadow:0 30px 60px -32px rgba(21,21,19,.38);
  --shadow-s:0 16px 36px -18px rgba(21,21,19,.32);
  --mk-mix:76%;
  --f-display:"Bricolage Grotesque","Onest",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --t-hero:clamp(2.6rem,1.05rem + 4.6vw,4.3rem);
  --t-h2:clamp(2.05rem,1.1rem + 3.7vw,4rem);
  --t-h3:clamp(1.55rem,1.15rem + 1.5vw,2.3rem);
  --t-lead:clamp(1.06rem,.98rem + .38vw,1.28rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.3,1.45,.5,1);
  --hdr:68px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#121211; --ground-2:#191917; --card:#1D1D1A; --paper:#FFFFFF;
    --ink:#F2F0EA; --ink-2:#B3B0A8; --ink-3:#7E7B74;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.2); --tint:rgba(255,255,255,.06);
    --tom:#DA6841; --lim:#A6BC5C; --sol:#D8C44C; --lil:#A094EC; --ceu:#89A8E2; --arg:#3A3934;
    --btn:#F2F0EA; --btn-fg:#151513;
    --seg-on:rgba(255,255,255,.12);
    --band:#0A0A09; --band-2:#161614;
    --shadow:0 30px 60px -30px rgba(0,0,0,.7); --shadow-s:0 16px 36px -16px rgba(0,0,0,.65);
    --mk-mix:62%;
    color-scheme:dark;
  }
}
/* Ilha clara: o que o cliente vê (proposta, Vitrine, contrato) fica claro em qualquer tema, como no app. */
.isle{
  --ground:#E7E5E0; --ground-2:#DEDBD5; --card:#F6F5F1; --paper:#FFFFFF;
  --ink:#151513; --ink-2:#5C5A55; --ink-3:#8D8A84;
  --line:rgba(21,21,19,.12); --line-2:rgba(21,21,19,.22); --tint:rgba(21,21,19,.05);
  --tom:#E4704A; --lim:#B7CC6C; --sol:#EAD55C; --lil:#B5A8F3; --ceu:#9FBCF1; --arg:#D3D0CA;
  --btn:#151513; --btn-fg:#F6F5F1; --seg-on:#FFFFFF;
  color:var(--ink); color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page{overflow-x:clip;position:relative}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:680;letter-spacing:-.04em;line-height:1;margin:0;text-wrap:balance;font-optical-sizing:auto}
em{font-style:normal}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;height:44px;padding:0 16px;border-radius:12px;background:var(--btn);color:var(--btn-fg);font-weight:600;display:inline-flex;align-items:center;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.tn{font-variant-numeric:tabular-nums}
.num{font-family:var(--f-display);font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.f{fill:currentColor;stroke:none}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px;position:relative}
@media (min-width:760px){.wrap{padding-inline:32px}}
@media (min-width:1180px){.wrap{padding-inline:40px}}
.sec{padding-block:clamp(76px,9vw,136px);position:relative}

/* ---------- etiqueta da seção e marca-texto do título ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;align-self:start;justify-self:start}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--tom));flex:none}
.sec-head{display:grid;gap:20px;max-width:800px;margin-bottom:clamp(40px,5vw,68px)}
.sec-head h2{font-size:var(--t-h2)}
.sec-head p{font-size:var(--t-lead);color:var(--ink-2);max-width:58ch;line-height:1.55}
.hl{--mk:color-mix(in oklab,var(--c,var(--tom)) var(--mk-mix),var(--ground));background-image:linear-gradient(var(--mk),var(--mk));background-repeat:no-repeat;background-size:100% .32em;background-position:0 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.03em;transition:background-size 1.1s var(--ease) .2s}
.motion .sec-head:not(.in) .hl{background-size:0% .32em}
.band .hl{background-image:linear-gradient(var(--c),var(--c));color:var(--c);background-size:100% .07em;background-position:0 97%}
.motion .band .sec-head:not(.in) .hl,.motion .band [data-r]:not(.in) .hl{background-size:0% .07em}

/* ---------- botões ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;border-radius:12px;font:600 15px/1 var(--f-body);background:var(--btn);color:var(--btn-fg);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s,color .2s}
.b:hover{transform:translateY(-1px)}
.b:active{transform:scale(.98)}
.b-lg{height:56px;padding:0 24px;border-radius:14px;font-size:16px}
.b-sm{height:40px;padding:0 15px;border-radius:11px;font-size:14px;gap:8px}
.b-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.b-o:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.b .tg{width:17px;height:17px;color:var(--tom);transform-origin:62% 50%}
.b:hover .tg{animation:tagswing .9s var(--ease)}
.b .ar{width:17px;height:17px;transition:transform .25s var(--ease)}
.b:hover .ar{transform:translateX(3px)}
@keyframes tagswing{0%{transform:rotate(0)}22%{transform:rotate(-18deg)}48%{transform:rotate(10deg)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.band .b{background:var(--band-fg);color:var(--band)}
.band .b-o{background:transparent;color:var(--band-fg);box-shadow:inset 0 0 0 1.5px var(--band-line-2)}
.band .b-o:hover{box-shadow:inset 0 0 0 1.5px var(--band-fg)}
/* link de texto: a linha acaba onde o texto acaba */
.tlink{display:inline-flex;align-items:center;gap:8px;justify-self:start;align-self:flex-start;width:max-content;max-width:100%;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--line-2);padding-bottom:3px;transition:border-color .2s,gap .2s}
.tlink:hover{border-color:var(--ink);gap:11px}
.tlink svg{width:16px;height:16px}
.band .tlink{color:var(--band-fg);border-color:var(--band-line-2)}
.band .tlink:hover{border-color:var(--band-fg)}

/* ---------- cabeçalho ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--ground);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 1px 0 var(--line)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;gap:22px}
.wm{display:inline-flex;align-items:flex-end;font-family:var(--f-display);font-weight:750;letter-spacing:-.045em;line-height:1;color:var(--ink);font-size:27px;text-decoration:none;font-optical-sizing:auto}
.wm svg{width:.5em;height:.5em;margin:0 0 .07em .05em;flex:none;color:var(--tom)}
.wm:hover svg{animation:tagswing .9s var(--ease);transform-origin:62% 50%}
.nav{display:flex;gap:2px;align-items:center}
.nav > a,.nav > .has-mega > button{height:40px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;text-decoration:none;border:0;background:transparent;cursor:pointer;transition:color .2s,background .2s}
.nav > a:hover,.nav > .has-mega > button:hover,.has-mega.open > button{color:var(--ink);background:var(--tint)}
.nav > a[aria-current="page"],.has-mega.cur > button{color:var(--ink);box-shadow:inset 0 -2px 0 var(--tom);border-radius:10px 10px 4px 4px}
.has-mega{position:relative}
.has-mega > button svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.has-mega.open > button svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:min(660px,86vw);background:var(--card);border-radius:22px;box-shadow:0 0 0 1px var(--line),0 30px 60px -24px rgba(21,21,19,.4);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .22s var(--ease),visibility .18s}
.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.has-mega.open .mega{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mi{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:14px;text-decoration:none;transition:background .15s}
.mi:hover,.mi[aria-current="page"]{background:var(--tint)}
.tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:var(--onc,var(--on));flex:none}
.tile svg{width:19px;height:19px}
.mi b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.mi small{display:block;font-size:13px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.mega-foot{display:flex;align-items:center;gap:14px;margin-top:6px;padding:14px 16px;border-radius:15px;background:var(--band);color:var(--band-fg);text-decoration:none}
.mega-foot b{display:block;font-size:14.5px;font-weight:600}
.mega-foot small{display:block;font-size:12.5px;color:var(--band-fg-2)}
.mega-foot .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.mega-foot .go svg{width:15px;height:15px}
.hdr-act{margin-left:auto;display:flex;align-items:center;gap:6px}
.signin{height:40px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none}
.signin:hover{color:var(--ink);background:var(--tint)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:0;background:transparent;cursor:pointer;place-items:center;color:var(--ink)}
.burger svg{width:22px;height:22px}
@media (max-width:980px){
  .nav,.signin{display:none}
  .burger{display:grid}
  .hdr .b-sm{height:38px;padding:0 13px;font-size:13.5px}
}
@media (max-width:420px){.hdr .b-sm .tg{display:none}.wm{font-size:24px}}

/* menu do celular: a mesma folha "Criar" do app, com as cores por papel */
.msheet{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.msheet.open{visibility:visible;pointer-events:auto}
.msheet-scrim{position:absolute;inset:0;background:rgba(21,21,19,.4);opacity:0;transition:opacity .25s}
.msheet.open .msheet-scrim{opacity:1}
.msheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;overflow:auto;background:var(--card);border-radius:26px 26px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;gap:6px}
.msheet.open .msheet-panel{transform:none}
.grab{width:40px;height:5px;border-radius:5px;background:var(--line-2);align-self:center;margin-bottom:8px}
.msheet .mi{padding:10px 6px}
.msheet .row{display:flex;gap:8px;margin-top:4px}
.msheet .row a{flex:1}
.msheet .sheet-h{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px}
.msheet .sheet-h b{font-family:var(--f-display);font-size:22px;font-weight:680;letter-spacing:-.03em}
.xbtn{width:40px;height:40px;border-radius:12px;border:0;background:var(--tint);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.msheet .links{display:grid;gap:2px;padding:6px 0;border-top:1px solid var(--line);margin-top:4px}
.msheet .links a{height:46px;display:flex;align-items:center;padding:0 8px;border-radius:12px;font-size:16px;font-weight:600;text-decoration:none}
.msheet .links a:hover,.msheet .links a[aria-current="page"]{background:var(--tint)}

/* ---------- chips (iguais aos do onboarding do app) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:44px;padding:0 17px;border-radius:999px;border:0;background:var(--seg-on);box-shadow:inset 0 0 0 1px var(--line);font:500 15px/1 var(--f-body);color:var(--ink);cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .15s,color .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.chip:active{transform:scale(.97)}
.chip .ck{width:16px;height:16px;stroke-width:2.4;display:none}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--btn-fg);box-shadow:none}
.chip[aria-pressed="true"] .ck{display:block;animation:pop .35s var(--spring)}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

/* ---------- revelar ao rolar ---------- */
.motion [data-r]{transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0s)}
.motion [data-r]:not(.in){opacity:0;transform:translateY(22px)}
.motion [data-r="scale"]:not(.in){transform:translateY(16px) scale(.97)}
.motion .sec-head[data-r]:not(.in){transform:none;opacity:1}
.motion .sec-head > *{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.motion .sec-head:not(.in) > *{opacity:0;transform:translateY(18px)}
.motion .sec-head > :nth-child(2){transition-delay:.08s}
.motion .sec-head > :nth-child(3){transition-delay:.16s}
.motion .sec-head > :nth-child(4){transition-delay:.24s}

/* ---------- faixa de tinta ---------- */
.band{background:var(--band);color:var(--band-fg)}
.band .eyebrow{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--band-line);color:var(--band-fg-2)}
.band .sec-head h2{color:var(--band-fg)}
.band .sec-head p{color:var(--band-fg-2)}

/* ---------- perguntas (acordeão em balão) ---------- */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa > button{width:100%;display:flex;align-items:center;gap:16px;padding:22px 2px;border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--f-display);font-weight:620;font-size:clamp(18px,1rem + .5vw,22px);letter-spacing:-.022em;line-height:1.25;color:var(--ink)}
.qa > button:hover .pm{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qa .pm{margin-left:auto;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;flex:none;transition:transform .4s var(--ease),background-color .25s,box-shadow .25s}
.qa .pm svg{width:15px;height:15px}
.qa.open .pm{transform:rotate(45deg);background:var(--sol);box-shadow:none;color:var(--on)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .bub2{margin:0 0 24px;background:var(--card);border-radius:4px 20px 20px 20px;padding:16px 20px;box-shadow:0 0 0 1px var(--line);font-size:16px;line-height:1.62;color:var(--ink-2);max-width:62ch;transform:translateY(-6px);opacity:0;transition:opacity .35s .08s,transform .45s var(--ease) .08s}
.qa.open .bub2{opacity:1;transform:none}
.qa .bub2 strong{color:var(--ink);font-weight:650}

/* ---------- planos ---------- */
.bill{display:inline-flex;padding:4px;gap:4px;border-radius:14px;background:var(--tint)}
.bill button{height:42px;padding:0 18px;border:0;border-radius:11px;background:transparent;font-weight:600;font-size:14.5px;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .2s,color .2s}
.bill button[aria-pressed="true"]{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 2px rgba(21,21,19,.12)}
.save{height:20px;padding:0 7px;border-radius:999px;background:var(--lim);color:var(--on);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1000px}
@media (min-width:820px){.plans{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:stretch}}
.plan{position:relative;border-radius:30px;padding:clamp(24px,3vw,38px);background:var(--card);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;text-align:left}
.plan .pt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.plan .amt{font-size:clamp(46px,4vw,60px);margin-top:16px;display:flex;align-items:baseline;gap:6px}
.plan .amt small{font-family:var(--f-body);font-size:16px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.plan .note{font-size:13.5px;color:var(--ink-3);margin-top:8px;min-height:1.4em;transition:opacity .2s,transform .3s var(--ease)}
.plan .note.swap{opacity:0;transform:translateY(-4px)}
.plan .desc{color:var(--ink-2);font-size:15.5px;margin:14px 0 22px}
.plan ul{display:grid;gap:12px;margin-bottom:28px;flex:1;align-content:start}
.plan li{display:flex;gap:11px;font-size:15px;align-items:flex-start;line-height:1.4}
.plan li .ck{width:22px;height:22px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none;margin-top:-1px}
.plan li .ck svg{width:12px;height:12px;stroke-width:3}
.plan .b{width:100%}
.plan.pro{background:var(--band);color:var(--band-fg);overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -30px rgba(21,21,19,.5)}
.plan.pro::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side at 22% 16%,var(--pro-glow1),transparent 70%),radial-gradient(closest-side at 88% 94%,var(--pro-glow2),transparent 70%);filter:blur(20px);opacity:.85}
.plan.pro .pt,.plan.pro .amt small,.plan.pro .note,.plan.pro .desc{color:var(--band-fg-2)}
.plan.pro li .ck{background:var(--lil);color:var(--on)}
.plan.pro .b{background:var(--band-fg);color:var(--band)}
.propill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;background-color:var(--lil);background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);background-size:260% 100%;background-position:120% 0;background-repeat:no-repeat;color:var(--on);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.propill svg{width:10px;height:10px}
.plan.pro:hover .propill{animation:sheen .9s ease}
@keyframes sheen{from{background-position:120% 0}to{background-position:-60% 0}}
.rec{position:absolute;top:clamp(24px,3vw,36px);right:clamp(24px,3vw,36px);height:28px;padding:0 12px;border-radius:999px;background:var(--band-fg);color:var(--band);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center}
.amt .val{display:inline-block;transition:opacity .2s,transform .3s var(--ease)}

/* ---------- convite final: a etiqueta ---------- */
.close{--c:var(--tom);padding-block:clamp(84px,10vw,150px) clamp(84px,10vw,140px)}
.tagbox{--tw:clamp(78px,8.6vw,124px);--strh:clamp(84px,10vw,150px);position:relative;margin-right:var(--tw)}
.tagcta{position:relative;background:var(--tom);color:var(--on);border-radius:38px 0 0 38px;padding:clamp(34px,5vw,74px);min-height:400px;display:flex;flex-direction:column;justify-content:center;gap:20px;transform-origin:calc(100% + var(--tw)*.42) 50%}
.tagcta .tip{position:absolute;top:0;bottom:0;right:calc(var(--tw)*-1 + 1px);width:var(--tw);height:100%;color:var(--tom)}
.tagcta .hole{position:absolute;top:50%;right:calc(var(--tw)*-.42 - 15px);width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--ground);box-shadow:inset 0 2px 4px rgba(21,21,19,.25)}
/* o fio vem do alto da seção (some em degradê) e termina no furo */
.tagcta .str{position:absolute;top:calc(var(--strh)*-1);right:calc(var(--tw)*-.42 - 75px);width:150px;height:calc(var(--strh) + 50%);pointer-events:none;color:var(--ink-3);-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.tagcta h2{font-size:var(--t-h2);color:var(--on);max-width:14ch}
.tagcta .hl{--mk:rgba(255,255,255,.42)}
.tagcta p{font-size:var(--t-lead);max-width:40ch;line-height:1.5;opacity:.86}
.tagcta .b{background:var(--on);color:var(--on-fg);align-self:flex-start}
.tagcta .b .tg{color:var(--tom)}
.cmeta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;font-weight:550}
.cmeta span{display:inline-flex;align-items:center;gap:7px}
.cmeta svg{width:16px;height:16px;stroke-width:2.6}
.tagcta svg.art{position:absolute;right:-60px;top:50%;width:420px;height:420px;transform:translateY(-50%);stroke:var(--on);fill:none;stroke-width:1;opacity:.16;pointer-events:none}
.motion .tagbox:not(.in) .tagcta{opacity:0;transform:translateY(-34px) rotate(-3deg)}
.motion .tagbox.in .tagcta{animation:hang 1.7s var(--ease) both}
@keyframes hang{0%{opacity:0;transform:translateY(-34px) rotate(-3.5deg)}30%{opacity:1;transform:translateY(0) rotate(1.6deg)}52%{transform:rotate(-.8deg)}74%{transform:rotate(.35deg)}100%{transform:none}}
@media (max-width:760px){
  .tagbox{--tw:54px}
  .tagcta{border-radius:26px 0 0 26px;min-height:0;padding:30px 22px 32px;gap:16px;container-type:inline-size}
  .tagcta .hole{width:22px;height:22px;margin-top:-11px;right:calc(var(--tw)*-.42 - 11px)}
  .tagcta svg.art{right:-200px;width:360px;height:360px}
  /* o título fica em duas linhas: a letra acompanha a largura da etiqueta pra "Seu próximo “sim”" caber inteiro na primeira */
  .tagcta h2{font-size:clamp(30px,8.6vw,40px);font-size:clamp(22px,100cqi / 8.4,40px)}
  .tagcta .b{width:100%;padding:0 18px}
}

/* ---------- rodapé ---------- */
.ftr{padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);overflow:hidden}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
@media (min-width:900px){.ftr-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.55fr))}}
@media (min-width:560px) and (max-width:899px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-grid > :first-child{grid-column:1 / -1}}
.ftr .tagline{font-family:var(--f-display);font-size:clamp(20px,1rem + .6vw,24px);font-weight:560;letter-spacing:-.025em;line-height:1.25;max-width:20ch;margin-top:16px}
.ftr h2{font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;line-height:1.4}
.ftr ul a{display:inline-block;padding:5px 0;font-size:15px;color:var(--ink-2);text-decoration:none}
.ftr ul a:hover{color:var(--ink)}
.ftr-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding-block:26px;margin-top:44px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.ftr-bottom nav{display:flex;gap:18px}
.ftr-bottom a{color:var(--ink-2);text-decoration:none}
.ftr-bottom a:hover{color:var(--ink)}
.giant{font-family:var(--f-display);font-weight:750;letter-spacing:-.045em;line-height:.78;font-size:clamp(76px,17.5vw,268px);color:var(--ink);display:flex;align-items:flex-end;white-space:nowrap;margin-top:28px;margin-bottom:-.1em;user-select:none}
.giant svg{width:.5em;height:.5em;color:var(--tom);margin:0 0 .07em .05em;flex:none}

/* ---------- barra fixa no celular (como a da Vitrine) ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(130%);transition:transform .35s var(--ease);pointer-events:none}
.mbar.show{transform:none}
.mbar-in{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:7px 7px 7px 14px;border-radius:18px;background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line),0 16px 34px -14px rgba(0,0,0,.4)}
.mbar-in small{font-size:12.5px;color:var(--ink-2);line-height:1.25;min-width:0}
.mbar-in .b{margin-left:auto;height:46px;padding:0 16px}
.mbar:not(.show) .mbar-in{visibility:hidden;transition:visibility 0s .35s}
@media (min-width:761px){.mbar{display:none}}

/* ---------- demonstração em vídeo (janela aberta pelos links [data-demo]) ---------- */
html.demo-open{overflow:hidden}
.demo-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
.demo-modal.open{visibility:visible;pointer-events:auto;transition:none}
.demo-scrim{position:absolute;inset:0;background:rgba(21,21,19,.74);opacity:0;transition:opacity .3s var(--ease)}
.demo-modal.open .demo-scrim{opacity:1}
.demo-box{position:relative;width:min(1120px,100%,calc((100svh - 110px) * 16 / 9));background:var(--band);border-radius:22px;padding:8px 8px 8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(18px) scale(.98);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.demo-modal.open .demo-box{opacity:1;transform:none}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 8px 12px;color:var(--band-fg-2);font-size:14px}
.demo-top b{color:var(--band-fg);font-weight:600}
.demo-x{width:38px;height:38px;border-radius:11px;border:0;background:rgba(255,255,255,.08);color:var(--band-fg);cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.demo-x:hover{background:rgba(255,255,255,.16)}
.demo-x svg{width:18px;height:18px}
.demo-frame{aspect-ratio:16/9;border-radius:15px;overflow:hidden;background:#000}
.demo-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
@media (max-width:640px){.demo-box{border-radius:18px;padding:6px}.demo-frame{border-radius:12px}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
@media print{
  .hdr,.msheet,.mbar,.burger{display:none!important}
  .motion [data-r]:not(.in),.motion .sec-head:not(.in) > *{opacity:1!important;transform:none!important}
}