/* GERADO por design-system/build.mjs a partir de design-system/tokens.json. Não edite aqui. */
/* header */
.top{border-bottom:var(--line) solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:.7rem}
.brand{display:inline-flex;align-items:center;gap:.4rem;font:800 1.55rem/1 var(--font-display);color:var(--ink);text-decoration:none;letter-spacing:-.05em}
.brand:hover{background:none;color:var(--ink)}
.brand svg{width:36px;height:36px;flex:none}
.brand i{font:500 .6rem/1 var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--on-ink);padding:.28rem .45rem;border-radius:5px;margin-left:.1rem}
.nav{display:flex;gap:var(--s5);align-items:center;font:600 .92rem var(--font-body)}
.nav a{color:var(--ink);text-decoration:none}.nav a:hover{background:none;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;color:var(--ink)}
@media(max-width:640px){.nav a:not(.btn){display:none}}
/* buttons: primário coral, .ink escuro, .ghost vazado */
.btn{display:inline-block;font:700 .95rem/1 var(--font-body);padding:.95rem 1.5rem;border-radius:var(--pill);background:var(--accent);color:var(--on-accent);text-decoration:none;border:var(--line) solid var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:var(--ink);color:var(--on-ink)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.btn.ink{background:var(--ink);color:var(--on-ink)}.btn.ink:hover{background:var(--accent);color:var(--on-accent)}
.btn.sm{padding:.6rem 1.05rem;font-size:.9rem}
.nav a.btn{background:var(--ink);color:var(--on-ink)}.nav a.btn:hover{background:var(--accent);color:var(--on-accent);text-decoration:none}
/* sections */
.sec{padding-block:var(--s7)} .sec.alt{background:var(--paper-2);--notch-bg:var(--paper-2)}
.sec.ink{background:var(--ink);color:var(--on-ink);--notch-bg:var(--ink)} .sec.ink .eyebrow{color:var(--rule)} .sec.ink a{color:var(--on-ink)} .sec.ink a:hover{color:var(--on-accent)}
.sec.accent{background:var(--accent);color:var(--on-accent)} .sec.accent .eyebrow{color:var(--on-accent)}
/* marcador (destaque de frase) */
.hl{background:var(--accent);color:var(--on-accent);padding:0 .1em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* card, ticket, callout, tag */
.card{background:var(--surface);border:var(--line) solid var(--ink);border-radius:var(--radius-lg);padding:var(--s5)}
.grid{display:grid;gap:var(--s5)} .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.callout{border:var(--line) solid var(--ink);border-left:8px solid var(--accent);background:var(--surface);padding:var(--s4) var(--s5);margin:var(--s5) 0;border-radius:var(--radius)}
.callout.warn{border-left-color:var(--sun)} .callout.risk{border-left-color:var(--bad)}
.callout>strong:first-child{display:block;font:500 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.tag{display:inline-block;font:500 .7rem/1 var(--font-mono);padding:.32rem .55rem;border:var(--line) solid var(--ink);border-radius:var(--pill);color:var(--ink)}
.tag.accent{background:var(--accent);color:var(--on-accent)} .tag.lagoon{background:var(--lagoon);color:var(--on-accent);border-color:var(--ink)}
/* ASSINATURA 1: o bilhete. Card com recortes laterais e picote tracejado. Os campos mostram dados reais do produto (moeda, fuso, nível). */
.ticket{position:relative;background:var(--surface);border:var(--line) solid var(--ink);border-radius:var(--radius-lg);padding:var(--s5);box-shadow:var(--shadow)}
.ticket .perf{position:relative;margin:var(--s5) calc(var(--s5) * -1)}
.ticket .perf::before,.ticket .perf::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--notch-bg,var(--paper));border:var(--line) solid var(--ink)}
.ticket .perf::before{left:calc(-14px - var(--line));clip-path:inset(0 0 0 50%)} .ticket .perf::after{right:calc(-14px - var(--line));clip-path:inset(0 50% 0 0)}
.ticket .k{font:500 .68rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ticket .v{font:800 clamp(2.4rem,6vw,4rem)/1 var(--font-display);letter-spacing:-.05em}
.ticket .v.acc{color:var(--accent);-webkit-text-stroke:var(--line) var(--ink)}
.ticket .route{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0}
.ticket .route .arr{flex:1;border-top:3px dotted var(--ink);position:relative;margin-inline:var(--s2)}
.ticket .route .arr::after{content:"";position:absolute;right:-2px;top:-8px;width:12px;height:12px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);transform:rotate(45deg)}
.ticket .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:0}
.ticket .fields dt{font:500 .66rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ticket .fields dd{margin:.2rem 0 0;font:700 1.05rem/1.15 var(--font-display);letter-spacing:-.03em}
.ticket .stub{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.ticket .code{flex:1;height:44px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 13px,transparent 13px 15px)}
.tilt{transform:rotate(-2.5deg)}
/* ASSINATURA 2: o picote. Linha tracejada de separação (substitui hr decorativo e faixas). */
.perf,.graticule,.guilloche{height:0;border:0;border-top:2px dashed var(--ink);margin-block:var(--s6)}
/* linhagem: a cadeia por onde o dólar passa. Último elo (você) em coral. */
.lineage{list-style:none;margin:var(--s5) 0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.lineage li{flex:1 1 150px;position:relative;padding:var(--s4);background:var(--surface);border:var(--line) solid var(--ink);margin-right:-1.5px}
.lineage li::after{content:"";position:absolute;right:-9px;top:50%;width:16px;height:16px;background:var(--surface);border-top:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink);transform:translateY(-50%) rotate(45deg);z-index:2}
.lineage li:last-child::after{display:none}
.lineage .who{font:500 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.lineage .amt{font:800 1.8rem/1.1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:.25rem 0}
.lineage .cut{font:500 .78rem var(--font-mono);color:var(--mute)}
.lineage li.last{background:var(--accent);color:var(--on-accent)} .lineage li.last::after{background:var(--accent)} .lineage li.last .who,.lineage li.last .cut{color:var(--on-accent)}
@media(max-width:640px){.lineage{flex-direction:column}.lineage li::after{right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(135deg)}}
/* forms / tool */
label{display:block;font:700 .95rem var(--font-body);margin-bottom:.4rem}
input[type=text],input[type=number],input[type=email],select,textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;border:var(--line) solid var(--ink);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--accent)}
.opt{display:block;border:var(--line) solid var(--ink);background:var(--surface);padding:.85rem 1rem;border-radius:var(--radius);margin-bottom:.5rem;cursor:pointer;font:400 1rem var(--font-body)}
.opt:hover{background:var(--paper-2)} .opt input{margin-right:.6rem;accent-color:var(--accent)}
.opt:has(input:checked){background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.bar{height:12px;background:var(--surface);border:var(--line) solid var(--ink);border-radius:var(--pill);overflow:hidden}.bar>i{display:block;height:100%;background:var(--accent)}
.bar.low>i{background:var(--sun)}
footer{border-top:var(--line) solid var(--ink);padding-block:var(--s6);color:var(--ink-2);font-size:var(--step--1)}
.grid.cen{display:flex;flex-wrap:wrap;justify-content:center}.grid.cen>.card{flex:1 1 300px;max-width:360px}
.g3w{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}