/* NEXO VARZEA: papel creme e tinta azul cobalto, no visual da marca NEXO. */
:root{
  --paper:#e9e3d3;
  --sheet:#f5f1e7;
  --ink:#2143c4;
  --ink-deep:#142a86;
  --ink-text:#1f3699;
  --ink-soft:#4a5a9e;
  --line:rgba(33,67,196,.2);
  --line-strong:#566cc8;
  --tint:rgba(33,67,196,.08);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-chalk:"Caveat Brush","Segoe Print","Comic Sans MS",cursive;
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink-text);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}

/* Ambiente: textura de papel */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ambient .grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E")}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font:700 16px/1 var(--f);font-stretch:108%;text-decoration:none;cursor:pointer;text-shadow:none;box-shadow:0 10px 24px -14px rgba(20,42,134,.8);transition:background-color .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn:hover{background:var(--ink-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-paper{background:var(--paper);color:var(--ink);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn-paper:hover{background:#fff;color:var(--ink-deep)}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(233,227,211,.85)}
.btn-ghost:hover{background:rgba(233,227,211,.14)}
.btn-ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost-ink:hover{background:var(--tint);color:var(--ink-deep)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-full{width:100%}
@media (pointer:coarse){.btn-sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* Navegação: barra de papel */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:0 max(20px,4vw);background:rgba(233,227,211,.9);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:500 21px/1 var(--f);font-stretch:118%;letter-spacing:.02em}
.brand b{font-weight:900;font-stretch:112%}
.brand svg{width:30px;height:30px;flex:none}
.brand .head{width:36px;height:36px}
.brand .wm b{font-weight:900;font-stretch:112%;color:var(--ink-deep)}
.brand .wm em{font-style:normal;font-weight:900;font-stretch:112%;color:var(--ink)}
.lockup{display:grid;justify-items:center;text-align:center;text-decoration:none}
.lk-head{width:76px;height:76px;margin-bottom:10px}
.lk-1,.lk-2{font:900 46px/.9 var(--f);font-stretch:112%;letter-spacing:.01em}
.lk-1{color:var(--ink-deep)}
.lk-2{color:var(--ink)}
.lk-3{margin-top:10px;font:600 11px/1 var(--f);font-stretch:125%;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}
.brand span,.nav .btn-sm{white-space:nowrap}
.nav nav{display:flex;gap:24px;margin-left:auto}
.nav nav a{font:600 15px/1 var(--f);text-decoration:none;color:var(--ink-text);padding:10px 2px;transition:color .2s var(--ease-out)}
.nav nav a:hover{color:var(--ink)}
@media (max-width:900px){.nav nav{display:none}.nav .btn-sm{margin-left:auto}}
@media (max-width:400px){.nav{gap:12px;padding:0 16px}.nav .brand{font-size:18px;gap:8px}.nav .brand svg{width:26px;height:26px}.nav .btn-sm{padding:0 13px;font-size:13px}}

/* Títulos no estilo da marca: grosso e condensado */
.t,.h2{font-family:var(--f);font-weight:850;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}

/* ===== Topo: timelapse de papel para tinta ===== */
.hero{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,#c9cfe6 55%,#5d74cf 100%)}
.cam{position:absolute;inset:0;transform-origin:34% 72%;will-change:transform}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.ph-b,.ph-c{opacity:0;will-change:opacity}
/* Como no vídeo da marca: o texto mora em papel liso no alto e a cena aparece embaixo. De noite o papel vira tinta. */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim-day{background:linear-gradient(180deg,rgba(233,227,211,.96) 0%,rgba(233,227,211,.93) 50%,rgba(233,227,211,0) 70%)}
.scrim-night{opacity:0;background:linear-gradient(180deg,rgba(16,32,120,.95) 0%,rgba(16,32,120,.9) 52%,rgba(16,32,120,0) 72%)}

.bands{position:absolute;inset:0}
.band{position:absolute;left:50%;top:calc(var(--nav-h) + 6vh);width:min(860px,66vw);transform:translateX(-50%);text-align:center;color:var(--ink);text-shadow:0 0 1px rgba(233,227,211,.9),0 0 22px rgba(233,227,211,.95);opacity:0;visibility:hidden;isolation:isolate}
.band.b1{opacity:1;visibility:visible}
.band::before{content:"";position:absolute;inset:-26% -18%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7*var(--k,1));background:radial-gradient(ellipse 66% 60% at 50% 50%,rgba(233,227,211,.9) 0%,rgba(233,227,211,.74) 48%,rgba(233,227,211,0) 76%)}
.band.night{color:var(--paper);text-shadow:0 0 1px rgba(14,26,82,.9),0 2px 18px rgba(14,26,82,.85)}
.band.night::before{background:radial-gradient(ellipse 66% 60% at 50% 50%,rgba(16,32,120,.84) 0%,rgba(16,32,120,.62) 48%,rgba(16,32,120,0) 76%)}
.kick{display:inline-block;margin-bottom:20px;padding:9px 14px;border-radius:999px;font:700 12px/1 var(--f);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(245,241,231,.92);box-shadow:inset 0 0 0 1.5px var(--ink);text-shadow:none}
.t{font-size:clamp(52px,7.4vw,124px)}
.l{margin:20px auto 0;font:500 clamp(17px,1.45vw,21px)/1.45 var(--f);max-width:36ch}
.band .vis .w{display:inline-block;padding:.06em 0 .1em}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.cta-row .btn{text-shadow:none}

/* Faixa 1: deriva para baixo */
.b1 .kick{--th:0}
.b1 .l{--th:.5}
.b1 .kick,.b1 .w,.b1 .l{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}

/* Faixa 2: a pergunta chega com soco */
.b2 .l{margin:0 auto 16px;opacity:clamp(0,var(--k,0)*3,1)}
.b2 .w{--th2:calc(.2 + var(--th,0)*.6);--kc:clamp(0,(var(--k,0) - var(--th2))*3,1);--ks:clamp(0,(var(--k,0) - var(--th2) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.b2 .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--ink-deep)}
.scribble{width:min(440px,70%);height:26px;margin:6px auto 0;overflow:visible}
.scribble path{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--k,0) - .62)*2.6,1));filter:url(#chalky)}

/* Faixa 3: desfoque para nítido, como os refletores acendendo */
.b3 .t{font-size:clamp(46px,5.8vw,96px)}
.stack{position:relative;display:block}
.stack .sharp{display:block;opacity:var(--k,0)}
.stack .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.b3 .l{opacity:clamp(0,(var(--k,0) - .4)*2.5,1)}

/* Faixa 4: assentamento em etapas */
.b4 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*34px))}
.b4 .l{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.b4 .cta-row{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

.cue{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(245,241,231,.85);font:700 11px/1 var(--f);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:opacity .5s var(--ease-out)}
.cue svg{width:24px;height:24px;animation:bounce 1.9s var(--ease-io) -.4s infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(90deg)}}
.hero.off .cue svg{animation-play-state:paused}
@media (max-height:560px){.cue{display:none}}

/* Topo estático: movimento reduzido e sem JavaScript */
.no-js .hero,.hero.is-static{height:auto}
.no-js .stage,.hero.is-static .stage{position:relative;height:100vh;height:100svh;min-height:600px}
.no-js .ph-a,.no-js .ph-b,.hero.is-static .ph-a,.hero.is-static .ph-b{display:none}
.no-js .ph-c,.hero.is-static .ph-c{opacity:1}
.no-js .scrim-day,.hero.is-static .scrim-day{opacity:0}
.no-js .scrim-night,.hero.is-static .scrim-night{opacity:1}
.no-js .b1,.no-js .b2,.no-js .b3,.hero.is-static .b1,.hero.is-static .b2,.hero.is-static .b3,.no-js .cue,.hero.is-static .cue{display:none}
.no-js .b4,.hero.is-static .b4{--k:1;opacity:1;visibility:visible}

@media (max-width:720px){
  .hero{height:560vh}
  .scrim-day{background:linear-gradient(180deg,rgba(233,227,211,.96) 0%,rgba(233,227,211,.93) 54%,rgba(233,227,211,0) 72%)}
  .scrim-night{background:linear-gradient(180deg,rgba(16,32,120,.95) 0%,rgba(16,32,120,.9) 64%,rgba(16,32,120,0) 82%)}
  .ph{object-position:30% 50%}
  .cam{transform-origin:40% 74%}
  .band{left:18px;right:18px;width:auto;top:calc(var(--nav-h) + 4vh);transform:none}
  .band::before{inset:-20% -8%}
  .t{font-size:clamp(46px,14vw,72px)}
  .b3 .t{font-size:clamp(40px,11.5vw,58px)}
  .cue{bottom:72px}
}

/* ===== Seções ===== */
.sec{position:relative;padding:clamp(96px,12vw,170px) max(20px,6vw)}
.wrap{max-width:1200px;margin:0 auto}
.kicker,.lbl,.passo .n{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--f);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.kicker{margin-bottom:18px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.h2{margin:0;font-size:clamp(48px,6.2vw,100px);color:var(--ink);max-width:14ch}
.lede{margin-top:22px;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-text);max-width:50ch}
.fine{margin-top:16px;font:700 11px/1.4 var(--f);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.fine.center{text-align:center}

/* Folha de papel com borda rasgada */
.sheet{position:relative;isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:var(--sheet);filter:url(#deckle) drop-shadow(0 18px 28px rgba(20,42,134,.14))}

/* Entradas coreografadas */
.js [data-reveal] .r{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*var(--step,90ms))}
.js [data-reveal].in .r{opacity:1;transform:none}
.js [data-reveal].done .r{transition-delay:0s}

/* Traço de pincel */
.chalk{overflow:visible}
.chalk path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d,0));opacity:calc(min(1,var(--d,0)*12)*.92);filter:url(#chalky)}
.chalk-note{font:400 clamp(26px,2.4vw,34px)/1.05 var(--f-chalk);color:var(--ink);transform:rotate(-3deg)}

/* S1: o grupo do zap */
.dor-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);align-items:center}
.chat-col{position:relative;max-width:440px}
.chat{padding-bottom:18px}
.chat-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1.5px solid var(--line)}
.chat-h .av{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--ink);color:var(--paper)}
.chat-h .av svg{width:26px;height:26px}
.chat-h b{display:block;font:700 15px/1.25 var(--f);color:var(--ink)}
.chat-h small{font:600 12px/1.3 var(--f);font-stretch:112%;color:var(--ink-soft)}
.msgs{display:flex;flex-direction:column;gap:9px;padding:18px 18px 0}
.msg{position:relative;max-width:84%;padding:9px 13px 8px;border-radius:15px 15px 15px 4px;background:var(--tint);font-size:15px;line-height:1.4;color:var(--ink-text)}
.msg .who{display:block;margin-bottom:2px;font:800 12px/1.3 var(--f);font-stretch:110%;color:var(--ink)}
.msg.me{align-self:flex-end;border-radius:15px 15px 4px 15px;background:var(--ink);color:var(--paper)}
.msg .ring{position:absolute;left:-24px;top:-16px;width:calc(100% + 48px);height:calc(100% + 32px);max-width:none;pointer-events:none}
.typing{display:flex;gap:4px;align-self:flex-start;padding:12px 14px;border-radius:15px;background:var(--tint)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:typing 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.seen{align-self:flex-end;font:700 11px/1 var(--f);font-stretch:118%;letter-spacing:.06em;color:var(--ink-soft)}
.note-wrap{display:flex;align-items:flex-end;gap:8px;margin:16px 0 0 auto;width:max-content;max-width:100%}
.note-wrap .arrow-up{width:44px;height:52px;flex:none}
.note-wrap .chalk-note{opacity:clamp(0,var(--d,0)*2.2 - .6,1);padding-bottom:4px}
.dor-text .h2{max-width:11ch}

/* S2: como funciona, com celulares no estilo do app */
.como-head{text-align:center}
.como-head .h2{margin:0 auto;max-width:16ch}
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin:clamp(48px,6vw,80px) 0 0;padding:0;list-style:none}
.passo{position:relative;text-align:center}
.passo h3{margin:12px 0 10px;font-family:var(--f);font-weight:850;font-stretch:72%;text-transform:uppercase;font-size:clamp(30px,2.6vw,38px);line-height:.95;color:var(--ink)}
.passo p{margin:0 auto;color:var(--ink-text);font-size:16px;max-width:32ch}
.phone{position:relative;width:min(290px,100%);aspect-ratio:9/17.2;margin:0 auto 26px;padding:12px;border-radius:46px;background:#1c1f2c;box-shadow:inset 0 0 0 2px #3a3f57,0 34px 60px -30px rgba(20,42,134,.55);overflow:hidden}
.phone::before{content:"";position:absolute;inset:10px;border-radius:36px;background:linear-gradient(rgba(233,227,211,.58),rgba(233,227,211,.58)),url("img/hero-a.webp") 32% 60%/cover}
.phone>*{position:relative}
.isl{width:84px;height:24px;margin:8px auto 16px;border-radius:14px;background:#0c0e16}
.passo .phone .ls-date{text-align:center;font:600 12px/1 var(--f);font-stretch:108%;color:var(--ink)}
.passo .phone .ls-time{margin:6px 0 16px;text-align:center;font:800 54px/1 var(--f);font-stretch:88%;color:var(--ink);letter-spacing:-.01em}
.notifs{display:grid;gap:8px;padding:0 10px}
.notif{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px;border-radius:14px;background:rgba(250,248,242,.95);box-shadow:0 6px 16px -8px rgba(20,42,134,.35);text-align:left;font-size:11px;line-height:1.3;color:var(--ink-text)}
.notif .ic{width:30px;height:30px;border-radius:8px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15.5 13.5C7 15 3.2 26 6.4 36.5C8 41.5 13.6 41.6 15.4 36.6L19 21Z' fill='%23c3cbee'/%3E%3Cpath d='M48.5 13.5C57 15 60.8 26 57.6 36.5C56 41.5 50.4 41.6 48.6 36.6L45 21Z' fill='%23c3cbee'/%3E%3Cpath d='M32 7.5C44.5 7.5 51.5 15.5 50.5 27.5C49.8 36.5 45 42.5 43 49C41.2 55 37 58.8 32 58.8C27 58.8 22.8 55 21 49C19 42.5 14.2 36.5 13.5 27.5C12.5 15.5 19.5 7.5 32 7.5Z' fill='%23e9e3d3'/%3E%3Cpath d='M32 33.5C39.2 33.5 43 38.6 42.2 45.4C41.4 52.2 37.2 56.4 32 56.4C26.8 56.4 22.6 52.2 21.8 45.4C21 38.6 24.8 33.5 32 33.5Z' fill='%23fbf9f3'/%3E%3Cpath d='M27.4 41.2C27.4 38.9 36.6 38.9 36.6 41.2C36.6 43.8 33.6 45.9 32 45.9C30.4 45.9 27.4 43.8 27.4 41.2Z' fill='%230e1a52'/%3E%3Cpath d='M32 45.9L32 49.2M28.3 50.2C30 51.8 34 51.8 35.7 50.2' fill='none' stroke='%230e1a52' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M13.2 23.6L50.8 23.6' stroke='%230e1a52' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15.6 23.2C18 22.4 28.4 22.2 29.8 24.2C30.6 28.4 27.4 33.4 22.8 33.4C18 33.4 15 28.6 15.6 23.2Z' fill='%230e1a52'/%3E%3Cpath d='M48.4 23.2C46 22.4 35.6 22.2 34.2 24.2C33.4 28.4 36.6 33.4 41.2 33.4C46 33.4 49 28.6 48.4 23.2Z' fill='%230e1a52'/%3E%3Cpath d='M18.6 25.6L22.4 25.4M37.6 25.4L41.4 25.6' stroke='%238fa0e6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat}
.notif.zap .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.5l1.2-3.6A7.5 7.5 0 1 1 8.4 19z' fill='none' stroke='%23e9e3d3' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.notif small{display:block;font:700 9px/1.2 var(--f);font-stretch:118%;letter-spacing:.08em;color:var(--ink-soft)}
.notif b{display:block;margin:1px 0;font:700 12px/1.25 var(--f);color:var(--ink)}
.notif span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif time{font:600 10px/1.2 var(--f);color:var(--ink-soft)}

/* S3: painel interativo */
.painel-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 60px}
.painel-top .lede{max-width:38ch;margin:0 0 6px}
.painel{position:relative;margin-top:clamp(40px,5vw,64px);background:var(--sheet);border:1.5px solid var(--line-strong);border-radius:22px;box-shadow:0 30px 70px -40px rgba(20,42,134,.45)}
.painel-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding:20px 24px;border-bottom:1.5px solid var(--line)}
.ph-team{display:flex;align-items:center;gap:12px}
.ph-team b{display:block;font:700 16px/1.25 var(--f);color:var(--ink)}
.ph-team small{font:600 12px/1.3 var(--f);font-stretch:112%;color:var(--ink-soft)}
.crest{width:30px;height:30px;flex:none;border-radius:8px;background:conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%,var(--ink) 0 75%,var(--paper) 0);box-shadow:inset 0 0 0 1.5px var(--ink)}
.caixa-box{display:grid;justify-items:end;gap:4px}
.caixa-box small{font:700 11px/1 var(--f);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.caixa-box b{font:850 52px/1 var(--f);font-stretch:72%;color:var(--ink);font-variant-numeric:tabular-nums}
.pagos{font:600 13px/1.2 var(--f);color:var(--ink-text)}
.tbl-wrap{padding:6px 12px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;color:var(--ink-text)}
.tbl th,.tbl td{padding:14px 12px;text-align:left;vertical-align:middle}
.tbl thead th{font:700 11px/1.2 var(--f);font-stretch:122%;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tbl tbody tr{border-top:1.5px solid var(--line);transition:background-color .6s var(--ease-out)}
.tbl tbody th{font-weight:800;color:var(--ink)}
.tbl tbody tr.flash{background:var(--tint)}
.tbl td.act{text-align:right}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font:700 13px/1 var(--f);transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.pill.dev{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pill.env{color:var(--ink);background:rgba(33,67,196,.16)}
.pill.ok{color:var(--paper);background:var(--ink)}
.cobrar{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);font:700 14px/1 var(--f);cursor:pointer;white-space:nowrap;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background-color .2s var(--ease-out),transform .2s var(--ease-out)}
.cobrar svg{width:15px;height:15px}
.cobrar:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cobrar:active:not(:disabled){transform:scale(.97)}
.cobrar:disabled{cursor:default;opacity:.6}
@media (pointer:coarse){.cobrar{min-height:44px}}
.painel-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:18px 24px;border-top:1.5px solid var(--line)}
.lastmsg{display:grid;gap:6px;max-width:72ch;font-size:14px;color:var(--ink-text)}
.painel-btns{display:flex;gap:10px}
.win{position:absolute;right:clamp(16px,4vw,48px);top:-40px;display:grid;justify-items:center;pointer-events:none}
.win .chalk-note{font-size:clamp(32px,3vw,42px);opacity:0;transform:rotate(-4deg) translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.win svg{order:2;width:200px;height:40px;margin-top:-10px}
.win .chalk path{--d:0;transition:stroke-dashoffset 1s var(--ease-out) .2s,opacity .2s}
.painel.won .win .chalk path{--d:1}
.painel.won .win .chalk-note{opacity:1;transform:rotate(-4deg)}

@media (max-width:820px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:16px 4px}
  .tbl tbody th,.tbl tbody td{padding:0}
  .tbl tbody th{grid-column:1/-1;font:850 28px/1 var(--f);font-stretch:72%;text-transform:uppercase}
  .tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font:700 10px/1.2 var(--f);font-stretch:122%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
  .tbl td.act{grid-column:1/-1;text-align:left;margin-top:6px}
  .tbl td.act .cobrar{width:100%}
  .caixa-box{justify-items:start}
  .win{top:-34px;right:12px}
}

/* S4: caixa */
.caixa-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,7vw,110px);align-items:end}
.nums{margin:clamp(36px,4vw,52px) 0 0}
.num{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1.5px solid var(--line)}
.num dt{font:700 12px/1 var(--f);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.num dd{margin:0;font:850 clamp(52px,6vw,92px)/1 var(--f);font-stretch:72%;color:var(--ink);font-variant-numeric:tabular-nums}
.num.sobra{border-bottom:0}
.num .under{position:absolute;right:0;bottom:-4px;width:min(300px,60%);height:22px}
.extrato{padding:24px 26px 12px}
.extrato ul{margin:14px 0 0;padding:0;list-style:none}
.extrato li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1.5px dashed var(--line);font-size:15px;color:var(--ink-text)}
.extrato b{font:800 15px/1 var(--f);font-stretch:108%;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* S5: uniforme */
.uni-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,100px);align-items:center}
.grade{display:grid;gap:12px;max-width:440px;margin-top:clamp(32px,4vw,44px)}
.g-row{display:grid;grid-template-columns:40px 1fr 28px;align-items:center;gap:14px;font:800 14px/1 var(--f);font-stretch:110%;color:var(--ink)}
.g-row b{text-align:right}
.g-bar{height:12px;border-radius:6px;background:var(--tint);overflow:hidden}
.g-bar i{display:block;height:100%;border-radius:6px;background:var(--ink);transform-origin:left;transform:scaleX(calc(var(--v,0)*var(--on,0)));transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0)*90ms + 300ms)}
.uni-sec.in .g-bar i{--on:1}
.no-js .g-bar i{--on:1}
.csv{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 16px;border-radius:12px;border:1.5px dashed var(--line-strong);font:700 12px/1 var(--f);font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.csv svg{width:16px;height:16px}
.jersey{display:grid;place-items:center}
.jersey-svg{width:min(440px,100%);height:auto;filter:drop-shadow(0 30px 40px rgba(20,42,134,.22))}
.jname{font:900 34px var(--f);font-stretch:80%;letter-spacing:3px;fill:var(--ink)}
.jnum{font:900 150px var(--f);font-stretch:75%;fill:var(--ink)}
.jtext{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);transform-box:fill-box;transform-origin:center}
.jersey.swap .jtext{opacity:0;transform:translateY(10px)}

/* S6: perguntas com o campo pintado a pincel */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,100px);align-items:center}
.ink-art{margin:0}
.ink-pitch{width:100%;height:auto;overflow:visible}
.ink-pitch .ink-fill{fill:var(--ink);opacity:calc(clamp(0,var(--d,0)*1.6 - .2,1)*.94);transition:opacity .2s linear}
.ink-pitch .ink-lines path{stroke-width:3.6;filter:none}
.faq .h2{max-width:12ch}
.faq-list{margin-top:clamp(28px,4vw,44px);border-top:1.5px solid var(--line)}
.faq-list details{border-bottom:1.5px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font:700 clamp(17px,1.5vw,20px)/1.3 var(--f);color:var(--ink);transition:color .2s var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--ink-deep)}
.pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:transform .35s var(--ease-out),background-color .25s var(--ease-out)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink)}
.pm::after{transform:rotate(90deg)}
details[open] .pm{transform:rotate(45deg);background:var(--tint)}
.faq-list details p{padding:0 0 22px;color:var(--ink-text);max-width:62ch}
details[open] p{animation:faqIn .45s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* S7: chamada final */
.final{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:clamp(110px,12vw,160px) max(20px,6vw);overflow:hidden}
.final-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--paper),#3b55c4 40%,#1d3399)}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--paper) 0%,rgba(233,227,211,0) 20%,rgba(233,227,211,0) 82%,var(--paper) 100%)}
.form-card{width:min(580px,100%);padding:clamp(30px,4vw,48px)}
.form-card .h2{max-width:11ch;font-size:clamp(46px,5vw,76px)}
.form-card .lede{margin-bottom:10px}
.field{display:grid;gap:8px;margin-top:16px}
.field label{font:700 14px/1.2 var(--f);color:var(--ink)}
.field input,.field select{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink-text);font:500 16px/1 var(--f);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%232143c4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field input::placeholder{color:rgba(74,90,158,.75)}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,67,196,.2)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
#form-entrar .btn{margin-top:26px}
.form-err{margin-top:14px;font-size:14px;font-weight:600;color:#b3261e}
.form-ok{padding-top:8px}
.form-ok:focus{outline:none}
.ok-t{margin-top:18px;font:850 clamp(34px,3.4vw,46px)/.95 var(--f);font-stretch:72%;text-transform:uppercase;color:var(--ink)}

/* Rodapé */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding:48px max(20px,6vw) calc(84px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line);font-size:14px;color:var(--ink-text)}
.foot .brand{font-size:19px}
.foot-chalk{font:400 22px/1.1 var(--f-chalk);color:var(--ink)}

/* Assinatura: o caramelo de tinta trota pelo trilho */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:40;height:44px;margin-bottom:env(safe-area-inset-bottom);pointer-events:none}
.rail::before{content:"";position:absolute;inset:-18px 0 0;background:linear-gradient(rgba(233,227,211,0),rgba(233,227,211,.82))}
.rail .line,.rail .trail{position:absolute;left:0;right:0;bottom:8px;height:2px}
.rail .line{background:rgba(33,67,196,.14)}
.rail .trail{background:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 22px);opacity:.75;transform-origin:left;transform:scaleX(var(--p,0))}
.dog{position:absolute;left:0;bottom:9px;width:54px;height:34px;will-change:transform}
.dog svg{width:100%;height:100%;overflow:visible}
.dog .flip{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease-out)}
.dog.back .flip{transform:scaleX(-1)}
.dog .leg{transform-box:fill-box;transform-origin:50% 6%}
.dog .tail{transform-box:fill-box;transform-origin:100% 100%}
.dog.walk .leg.a{animation:legA .3s linear infinite alternate}
.dog.walk .leg.b{animation:legA .3s linear -.3s infinite alternate-reverse}
.dog.walk .body-g{animation:bob .15s ease-in-out infinite alternate}
.dog.walk .tail,.dog.wag .tail{animation:wag .16s ease-in-out infinite alternate}
.dog .lying{opacity:0;transition:opacity .4s var(--ease-out)}
.dog .stand{transition:opacity .4s var(--ease-out)}
.dog.lie .stand{opacity:0}
.dog.lie .lying{opacity:1}
@keyframes legA{from{transform:rotate(24deg)}to{transform:rotate(-24deg)}}
@keyframes bob{to{transform:translateY(-1.2px)}}
@keyframes wag{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
@media (max-height:560px){.rail{display:none}}

/* Pausa em aba escondida */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Layout de celular e tablet */
@media (max-width:900px){
  .dor-grid,.caixa-grid,.uni-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .dor-text{order:-1}
  .chat-col{margin:0 auto;width:100%}
  .passos{grid-template-columns:minmax(0,1fr);gap:64px}
  .jersey{order:-1}
  .jersey-svg{width:min(320px,80%)}
  .ink-art{max-width:520px;margin:0 auto}
}

/* Movimento reduzido: tudo no estado final, nada se mexe */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js [data-reveal] .r{opacity:1;transform:none}
  .g-bar i{--on:1}
  .chalk path{--d:1}
  .note-wrap,.ink-pitch{--d:1}
}

/* Contratação no fim da página */
.form-card .kicker{margin-bottom:14px}
.preco{display:flex;align-items:flex-end;gap:12px;margin-top:22px}
/* Pacotes da contratação: cada um leva para /assinar com o pacote marcado */
.planos-t{margin:22px 0 10px;font:800 12px/1.2 var(--f);font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.planos{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.plano{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:2px solid var(--line-strong);border-radius:14px;background:#fffdf7;color:var(--ink-deep);text-decoration:none;transition:border-color .15s,transform .15s var(--ease-out),box-shadow .15s}
.plano:hover,.plano:focus-visible{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(20,42,134,.6)}
.plano-top{border-color:var(--ink);background:var(--tint)}
.plano-tag{position:absolute;top:-10px;right:14px;padding:2px 8px;border-radius:6px;background:var(--ink);color:var(--sheet);font:800 11px/1.4 var(--f);letter-spacing:.06em;text-transform:uppercase}
.plano-n{display:flex;flex-direction:column;font:850 26px/1 var(--f);font-stretch:72%;text-transform:uppercase;color:var(--ink)}
.plano-n small{margin-top:4px;font:600 13px/1.2 var(--f);font-stretch:100%;text-transform:none;color:var(--ink-soft)}
.plano-v{flex:none;font:850 34px/1 var(--f);font-stretch:72%;color:var(--ink-deep);white-space:nowrap}
.plano-v small{margin-left:2px;font:700 13px/1 var(--f);font-stretch:100%;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.plano{transition:none}}
.preco-v{font:850 clamp(64px,7vw,96px)/.85 var(--f);font-stretch:72%;color:var(--ink)}
.preco-m{padding-bottom:6px;font:700 13px/1.2 var(--f);font-stretch:118%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.incluso{margin:22px 0 26px;padding:0;list-style:none;display:grid;gap:10px}
.incluso li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-text)}
.incluso li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23e9e3d3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ajuda{margin-top:16px;text-align:center;font-size:14px;color:var(--ink-soft)}
.ajuda a{color:var(--ink);font-weight:700;text-underline-offset:3px}

/* Divulgação do NEXO SPORT (produto irmão, sistema separado): card discreto antes do rodapé */
.familia{display:flex;justify-content:center;padding:clamp(40px,6vw,64px) max(20px,6vw) clamp(40px,5vw,56px)}
.familia-card{display:flex;align-items:center;gap:22px;width:100%;max-width:780px;padding:18px 22px;border:1.5px solid var(--line);border-radius:16px;background:var(--sheet);color:var(--ink-text);text-decoration:none;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.familia-card:hover{border-color:var(--line-strong);box-shadow:0 14px 26px -18px rgba(20,42,134,.45)}
.familia-card:focus-visible{border-radius:16px}
.familia-logo{flex:none;display:grid;place-items:center;padding:15px 18px;border-radius:12px;background:#111a2e}
.familia-logo img{display:block;width:auto;height:20px}
.familia-txt{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:15px;line-height:1.45}
.familia-kick{font:700 11px/1.2 var(--f);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.familia-txt strong{font-size:17px;font-weight:800;line-height:1.25;color:var(--ink-deep)}
.familia-go{margin-top:4px;font-weight:700;color:var(--ink)}
.familia-card:hover .familia-go{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){.familia-card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}}