/* Blajeen Labs — documentos imprimíveis (contrato e catálogo). Fontes auto-hospedadas (SIL OFL, licenças em ./fonts). */
@font-face { font-family: 'Inter'; src: url('./fonts/inter-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono-latin-variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: block; }
/* Blajeen Labs — design system para documentos impressos (A4 / PDF) */
:root {
  --ink: #090A08;
  --ink-2: #10120E;
  --ink-3: #171A14;
  --ink-line: #2B2F26;
  --bone: #E7E7DF;
  --bone-dim: #9DA195;
  --lime: #C9F36B;
  --lime-2: #B2DE4C;
  --lime-deep: #4A690C;
  --lime-wash: #EEF7D6;
  --paper: #FFFFFF;
  --paper-2: #F5F4EE;
  --text: #13150F;
  --muted: #5E6257;
  --line: #DDDBD1;
  --sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* Assinatura visual: palavra em itálico serifado verde + ponto verde */
.em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -0.01em; }
.dot { color: var(--lime); }
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; }

/* Lockup da marca */
.lockup { display: flex; align-items: center; gap: 3.2mm; }
.lockup img { width: 11mm; height: 11mm; border-radius: 50%; display: block; }
.lockup .wm { font-weight: 800; letter-spacing: .06em; font-size: 10.5pt; line-height: 1; }
.lockup .wm small { font-family: var(--mono); font-weight: 500; font-size: 7pt; letter-spacing: .32em; margin-left: 1.6mm; opacity: .7; }

/* Blajeen Labs — catálogo de serviços (A4, páginas escuras) */
@page { size: A4; margin: 0; }

body { background: #050604; }
.pg {
  width: 210mm; height: 297mm; position: relative; overflow: hidden;
  background: var(--ink); color: var(--bone);
  padding: 15mm 17mm 13mm; display: flex; flex-direction: column;
  break-after: page; page-break-after: always;
}
.pg:last-child { break-after: auto; }
@media screen { .pg { margin: 0 auto 8mm; box-shadow: 0 10px 40px rgba(0,0,0,.6); zoom: var(--zoom-pagina, 1); } body { padding: 8mm 0; } }

.pg.grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(201,243,107,.05) .25mm, transparent .25mm), linear-gradient(90deg, rgba(201,243,107,.05) .25mm, transparent .25mm);
  background-size: 11mm 11mm;
  -webkit-mask-image: radial-gradient(ellipse at 75% 30%, #000 0%, rgba(0,0,0,.4) 50%, transparent 80%);
          mask-image: radial-gradient(ellipse at 75% 30%, #000 0%, rgba(0,0,0,.4) 50%, transparent 80%);
}
.pg > * { position: relative; z-index: 1; }
.glow { position: absolute !important; z-index: 0 !important; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,243,107,.22) 0%, rgba(201,243,107,.06) 40%, transparent 68%); }
.rail { position: absolute !important; right: 7mm; top: 15mm; bottom: 13mm; width: .7mm; border-radius: 1mm; background: linear-gradient(var(--lime), rgba(201,243,107,.06)); }

/* cabeçalho e rodapé de página */
.ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11mm; }
.ph .lockup img { width: 8.5mm; height: 8.5mm; }
.ph .lockup .wm { font-size: 8.6pt; }
.ph .pn { font-family: var(--mono); font-size: 6.6pt; letter-spacing: .22em; color: var(--bone-dim); text-transform: uppercase; }
.ph .pn b { color: var(--lime); font-weight: 600; }
.pf { margin-top: auto; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 6.2pt; letter-spacing: .18em; color: #6F7368; text-transform: uppercase; border-top: .25mm solid var(--ink-line); padding-top: 3.2mm; }

.lbl { font-family: var(--mono); font-size: 7.2pt; letter-spacing: .22em; color: var(--lime); text-transform: uppercase; display: flex; align-items: center; gap: 2.6mm; margin-bottom: 5mm; }
.lbl::before { content: ""; width: 1.5mm; height: 1.5mm; border-radius: 50%; background: var(--lime); box-shadow: 0 0 2.6mm rgba(201,243,107,.9); }
h1, h2, h3 { margin: 0; font-weight: 500; }
.h2 { font-size: 34pt; line-height: 1; letter-spacing: -.045em; color: #F3F3EB; margin-bottom: 6mm; }
.p { font-size: 10pt; line-height: 1.6; color: var(--bone-dim); margin: 0 0 3mm; max-width: 150mm; }
.p b { color: var(--bone); font-weight: 500; }

/* ---------- capa ---------- */
.cover { padding-bottom: 14mm; }
.cover .ph .lockup img { width: 15mm; height: 15mm; }
.cover .ph .lockup .wm { font-size: 11.5pt; }
.cover .mascot { position: absolute; right: 12mm; top: 30mm; width: 86mm; z-index: 1; filter: drop-shadow(0 8mm 14mm rgba(0,0,0,.6)); }
.cover .c-mid { margin-top: auto; }
.cover .pf { margin-top: 0; }
.cover .kick { font-family: var(--mono); font-size: 7.4pt; letter-spacing: .22em; color: var(--lime); text-transform: uppercase; margin-bottom: 7mm; display: block; }
.cover h1 { font-size: 54pt; line-height: .96; letter-spacing: -.05em; color: #F4F4EC; margin-bottom: 7mm; }
.cover .lead { font-size: 12pt; line-height: 1.5; color: var(--bone-dim); max-width: 118mm; margin: 0 0 12mm; }
.cover .cat { display: inline-block; font-family: var(--mono); font-size: 7.4pt; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: 2mm 3.2mm; border-radius: 1mm; margin-bottom: 12mm; font-weight: 600; }
.nav5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3mm; margin-bottom: 9mm; }
.nav5 div { border-top: .35mm solid var(--ink-line); padding-top: 2.6mm; font-family: var(--mono); font-size: 6.8pt; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.nav5 div b { display: block; color: var(--lime); font-weight: 600; margin-bottom: .8mm; }
.nav5 div:first-child { border-top-color: var(--lime); }

/* ---------- estúdio ---------- */
.princ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 5mm 0 8mm; }
.princ div { border: .25mm solid var(--ink-line); border-radius: 2mm; padding: 4.5mm; background: rgba(255,255,255,.015); }
.princ .n { font-family: var(--mono); font-size: 6.6pt; color: var(--lime); letter-spacing: .18em; }
.princ h3 { font-size: 12.5pt; letter-spacing: -.02em; line-height: 1.15; margin: 2.5mm 0 2mm; color: #F3F3EB; }
.princ p { font-size: 8.4pt; line-height: 1.5; color: var(--bone-dim); margin: 0; }
.method { display: flex; align-items: center; justify-content: space-between; border-top: .25mm solid var(--ink-line); border-bottom: .25mm solid var(--ink-line); padding: 5mm 0; margin-bottom: 8mm; }
.method span { font-size: 17pt; letter-spacing: -.03em; color: #F3F3EB; }
.method i { font-style: normal; color: var(--lime); font-family: var(--mono); font-size: 10pt; }
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: .25mm solid var(--ink-line); border-radius: 2mm; overflow: hidden; }
.proc div { padding: 4mm 4mm 4.5mm; border-right: .25mm solid var(--ink-line); border-bottom: .25mm solid var(--ink-line); }
.proc div:nth-child(4n) { border-right: none; }
.proc div:nth-child(n+5) { border-bottom: none; }
.proc .n { font-family: var(--mono); font-size: 6.4pt; color: var(--lime); letter-spacing: .16em; }
.proc h4 { margin: 1.6mm 0 1.2mm; font-size: 10pt; font-weight: 600; color: #F3F3EB; }
.proc p { margin: 0; font-size: 7.6pt; line-height: 1.45; color: var(--bone-dim); }

/* ---------- menu de serviços ---------- */
.menu { border-top: .35mm solid var(--bone); margin-bottom: 9mm; }
.menu .row { display: grid; grid-template-columns: 14mm 1fr 34mm 18mm; align-items: center; gap: 4mm; padding: 4.2mm 0; border-bottom: .25mm solid var(--ink-line); }
.menu .n { font-family: var(--mono); font-size: 8pt; color: var(--lime); letter-spacing: .12em; }
.menu h3 { font-size: 17pt; letter-spacing: -.035em; color: #F3F3EB; line-height: 1.05; }
.menu h3 .dot { color: var(--lime); }
.menu .t { display: block; font-size: 8.6pt; color: var(--bone-dim); margin-top: 1mm; letter-spacing: 0; }
.menu .pr { text-align: right; font-size: 11.5pt; font-weight: 600; letter-spacing: -.02em; color: #F3F3EB; }
.menu .pr small { display: block; font-family: var(--mono); font-size: 5.8pt; letter-spacing: .16em; color: var(--bone-dim); font-weight: 400; text-transform: uppercase; }
.menu .go { font-family: var(--mono); font-size: 6.6pt; letter-spacing: .14em; color: var(--lime); text-align: right; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5mm; }
.trust div { border: .25mm solid var(--ink-line); border-radius: 2mm; padding: 4mm; background: rgba(255,255,255,.015); }
.trust b { display: block; font-size: 15pt; font-weight: 600; letter-spacing: -.03em; color: var(--lime); margin-bottom: 1.4mm; }
.trust span { display: block; font-size: 9pt; font-weight: 600; color: #F3F3EB; margin-bottom: 1mm; }
.trust p { margin: 0; font-size: 7.6pt; line-height: 1.45; color: var(--bone-dim); }

/* ---------- página de serviço ---------- */
.svc .ghost { position: absolute; right: 10mm; top: 18mm; z-index: 0; font-weight: 800; font-size: 190pt; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: .35mm rgba(201,243,107,.14); }
.svc .ph { margin-bottom: 8mm; }
.svc .lbl { margin-bottom: 4mm; }
.svc h2 { font-size: 46pt; line-height: .92; letter-spacing: -.055em; color: #F4F4EC; margin-bottom: 2.5mm; }
.svc .tag { font-size: 13.5pt; color: var(--bone); margin: 0 0 3mm; letter-spacing: -.015em; }
.svc .tag .em { font-size: 1.05em; }
.svc .intro { font-size: 9.2pt; line-height: 1.5; color: var(--bone-dim); max-width: 140mm; margin: 0 0 3mm; }
.chips { display: flex; flex-wrap: wrap; gap: 1.6mm; align-items: center; margin-bottom: 6mm; }
.chips em { font-style: normal; font-family: var(--mono); font-size: 6.2pt; letter-spacing: .18em; color: var(--bone-dim); text-transform: uppercase; margin-right: 1.5mm; }
.chips span { font-size: 7.4pt; border: .25mm solid var(--ink-line); border-radius: 10mm; padding: .9mm 2.8mm; color: var(--bone); }
.cards { display: grid; gap: 3.4mm; margin-bottom: 5mm; }
.cards.c4 { grid-template-columns: 1fr 1fr; }
.cards.c3 { grid-template-columns: 1fr 1fr 1fr; }
.card { position: relative; border: .3mm solid var(--ink-line); border-radius: 2.4mm; padding: 3.8mm 4.4mm 3.4mm; background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)); }
.card.hl { border-color: var(--lime); background: linear-gradient(180deg, rgba(201,243,107,.09), rgba(201,243,107,.015)); }
.card .badge { position: absolute; right: 4mm; top: -2.3mm; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: 5.8pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 1mm 2.2mm; border-radius: 1mm; }
.card .lvl { font-family: var(--mono); font-size: 6.2pt; letter-spacing: .2em; color: var(--lime); text-transform: uppercase; }
.card h3 { font-size: 12.2pt; font-weight: 600; letter-spacing: -.02em; color: #F4F4EC; margin: 1.2mm 0 2.2mm; line-height: 1.15; }
.card .price { font-size: 19.5pt; font-weight: 600; letter-spacing: -.04em; color: #F4F4EC; line-height: 1; }
.card .price small { display: block; font-family: var(--mono); font-size: 5.8pt; letter-spacing: .16em; color: var(--bone-dim); text-transform: uppercase; font-weight: 400; margin-bottom: 1.2mm; }
.card .price .u { font-size: 9pt; font-weight: 500; letter-spacing: 0; color: var(--bone-dim); margin-left: .6mm; }
.card .pz { display: block; font-family: var(--mono); font-size: 6.2pt; letter-spacing: .12em; color: var(--bone-dim); text-transform: uppercase; margin: 2mm 0 2.4mm; padding-bottom: 2.4mm; border-bottom: .25mm solid var(--ink-line); }
.card ul { list-style: none; margin: 0; padding: 0; }
.card li { font-size: 7.8pt; line-height: 1.38; color: #D3D4CB; padding-left: 4mm; position: relative; margin-bottom: .75mm; }
.card li::before { content: ""; position: absolute; left: 0; top: 1.35mm; width: 1.6mm; height: 1.6mm; border-radius: .35mm; background: var(--lime); }
.cards.c3 .card li { font-size: 7.6pt; }
.extras { display: grid; gap: 4mm; }
.extras.two { grid-template-columns: 1fr 1.25fr; }
.xbox { border-top: .35mm solid var(--bone); padding-top: 2.8mm; }
.xbox .xt { font-family: var(--mono); font-size: 6.4pt; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); font-weight: 600; margin-bottom: 2mm; display: block; }
.xrow { display: flex; justify-content: space-between; gap: 3mm; font-size: 7.8pt; padding: 1mm 0; border-bottom: .25mm dotted var(--ink-line); color: #D3D4CB; }
.xrow b { font-weight: 600; color: #F4F4EC; white-space: nowrap; }
.xrow b small { font-weight: 400; color: var(--bone-dim); font-size: 6.8pt; }
.xrow .d { display: block; color: var(--bone-dim); font-size: 7pt; margin-top: .4mm; }
.addgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5mm; }

.strip { display: grid; grid-template-columns: 52mm 1fr; gap: 6mm; align-items: center; margin-top: 7mm; border: .3mm solid rgba(201,243,107,.45); border-radius: 2.4mm; padding: 4.6mm 5mm; background: linear-gradient(90deg, rgba(201,243,107,.09), rgba(201,243,107,.01)); }
.strip .ty { font-family: var(--mono); font-size: 6.2pt; letter-spacing: .2em; color: var(--lime); text-transform: uppercase; }
.strip h4 { margin: 1.4mm 0 0; font-size: 14pt; font-weight: 600; letter-spacing: -.025em; color: #F4F4EC; line-height: 1.15; }
.strip p { margin: 0; font-size: 8.6pt; line-height: 1.5; color: var(--bone-dim); }

/* ---------- cases ---------- */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 3.6mm; margin-bottom: 7mm; }
.case { border: .25mm solid var(--ink-line); border-radius: 2.4mm; padding: 4.6mm; background: rgba(255,255,255,.018); }
.case.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.6fr; gap: 6mm; align-items: center; border-color: rgba(201,243,107,.45); }
.case .ty { font-family: var(--mono); font-size: 6.2pt; letter-spacing: .18em; color: var(--lime); text-transform: uppercase; }
.case h3 { font-size: 15pt; letter-spacing: -.03em; color: #F4F4EC; margin: 1.6mm 0 2mm; font-weight: 600; }
.case p { margin: 0; font-size: 8.4pt; line-height: 1.5; color: var(--bone-dim); }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.quote { border-top: .35mm solid var(--lime); padding-top: 3.5mm; }
.quote .qm { font-family: var(--serif); font-style: italic; font-size: 34pt; line-height: .5; color: var(--lime); display: block; height: 6mm; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 14pt; line-height: 1.4; color: #EDEDE5; margin: 0 0 3.5mm; }
.quote span { font-family: var(--mono); font-size: 6.4pt; letter-spacing: .16em; color: var(--bone-dim); text-transform: uppercase; }
.quote span b { color: var(--bone); font-weight: 600; }

/* ---------- como contratar ---------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.6mm; margin-bottom: 7mm; }
.flow div { border: .25mm solid var(--ink-line); border-radius: 2.4mm; padding: 4.2mm; position: relative; background: rgba(255,255,255,.015); }
.flow .n { font-family: var(--mono); font-size: 18pt; font-weight: 600; color: var(--lime); letter-spacing: -.02em; line-height: 1; }
.flow h4 { margin: 2.4mm 0 1.4mm; font-size: 10.4pt; font-weight: 600; color: #F4F4EC; }
.flow p { margin: 0; font-size: 7.8pt; line-height: 1.45; color: var(--bone-dim); }
.conds { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-bottom: 6mm; }
.conds ul { list-style: none; margin: 0; padding: 0; }
.conds li { font-size: 8.4pt; line-height: 1.45; color: #D3D4CB; padding: 1.6mm 0 1.6mm 5mm; border-bottom: .25mm dotted var(--ink-line); position: relative; }
.conds li::before { content: "→"; position: absolute; left: 0; color: var(--lime); font-family: var(--mono); font-size: 8pt; }
.conds li b { color: #F4F4EC; font-weight: 600; }
.fine { font-size: 7.2pt; line-height: 1.5; color: #7C8075; margin: 0; }

/* ---------- contracapa ---------- */
.back h2 { font-size: 46pt; line-height: .96; letter-spacing: -.05em; color: #F4F4EC; margin-bottom: 7mm; }
.back .mascot { position: absolute; right: 14mm; bottom: 34mm; width: 80mm; opacity: .96; z-index: 1; filter: drop-shadow(0 8mm 14mm rgba(0,0,0,.6)); }
.contact { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 108mm; margin: 6mm 0 0; border-top: .35mm solid var(--bone); }
.contact div { display: grid; grid-template-columns: 26mm 1fr; padding: 3.2mm 0; border-bottom: .25mm solid var(--ink-line); font-size: 11pt; color: #F4F4EC; }
.contact em { font-style: normal; font-family: var(--mono); font-size: 6.4pt; letter-spacing: .2em; color: var(--bone-dim); text-transform: uppercase; padding-top: 1.2mm; }
.qr { display: flex; gap: 5mm; align-items: center; margin-top: 10mm; }
.qr .code { width: 30mm; height: 30mm; background: var(--bone); border-radius: 2.4mm; padding: 1.6mm; }
.qr .code svg { width: 100%; height: 100%; display: block; }
.qr p { margin: 0; font-size: 9pt; line-height: 1.45; color: var(--bone-dim); max-width: 60mm; }
.qr p b { display: block; color: var(--lime); font-family: var(--mono); font-size: 6.6pt; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.4mm; }

/* ---------- Barra de impressão (só na tela) ---------- */
.barra-doc { position: sticky; top: 0; z-index: 99; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; margin-bottom: 8mm; background: rgba(9,10,8,.94); border-bottom: 1px solid #2B2F26; color: #9DA195; font: 13px var(--sans); }
.barra-doc a, .barra-doc button { font: 600 13px var(--sans); border-radius: 10px; padding: 9px 14px; border: 1px solid #3a3f33; background: #171A14; color: #E7E7DF; text-decoration: none; cursor: pointer; }
.barra-doc button { background: #C9F36B; color: #0B0C09; border-color: #C9F36B; }
.barra-doc b { color: #C9F36B; font-weight: 600; }
@media print { .barra-doc { display: none !important; } }