/* =========================================================
   PLANO DE VOO — design system de Mateus Paes · Gestor Autorizado Ademicon
   Fonte única de tokens: site, simulador, vitrine, deck e peças (render.py, editar.py e endcard.py leem este arquivo).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@500;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* --- cor: grafite e vermelho conversam com a Ademicon; âmbar e céu vêm das fotos do Mateus --- */
  --grafite:#14161B;     /* fundo escuro principal */
  --grafite-2:#0C0D10;   /* noite: fundo das peças com foto */
  --aco:#262A32;         /* superfícies sobre o grafite */
  --nevoa:#8B919C;       /* texto secundário */
  --papel:#F4F1EB;       /* fundo claro */
  --papel-2:#E8E3D9;
  --tinta:#1A1C21;       /* texto sobre claro */
  --rubi:#E1262C;        /* AÇÃO: CTA, número-chave, aviso */
  --rubi-2:#B81B21;
  --ambar:#FFB23F;       /* marca-texto sobre escuro (máx. 1 por título) */
  --ceu:#9CC3E8;         /* rota, destino, detalhe frio */
  --ok:#2FA36B;          /* confirmação */
  --zap:#25D366;

  /* --- tipo --- */
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;  /* títulos: firmes, humanos */
  --f-texto:'Manrope',system-ui,sans-serif;                /* leitura e botões */
  --f-mono:'JetBrains Mono',ui-monospace,monospace;        /* números, rótulos de embarque, eyebrow */
  --f-voz:'Instrument Serif',Georgia,serif;                /* a voz do Mateus: frase pessoal em itálico */

  /* --- forma --- */
  --r-s:10px; --r-m:16px; --r-l:26px; --r-pill:999px;
  --sombra:0 18px 50px rgba(12,13,16,.28);
  --sombra-rubi:0 16px 40px rgba(225,38,44,.32);
  --grao:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}

[hidden]{display:none!important}

/* ---------- utilitários de marca ---------- */
.hl{background:linear-gradient(180deg,transparent 58%,rgba(225,38,44,.28) 58% 92%,transparent 92%);padding:0 .06em;color:inherit}
.s-escuro .hl,.s-grafite .hl,.s-noite .hl,.hl-ambar{background:none;color:var(--ambar)}
.eyebrow{font:700 .74rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rubi);display:inline-flex;align-items:center;gap:.8em}
.eyebrow::before{content:"";width:2.2em;height:0;border-top:2px dashed currentColor}
.s-escuro .eyebrow,.s-grafite .eyebrow,.s-noite .eyebrow{color:var(--ceu)}
.t-display{font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:-.025em}
.voz{font-family:var(--f-voz);font-style:italic;font-weight:400;line-height:1.05;color:var(--rubi)}
.s-escuro .voz,.s-grafite .voz,.s-noite .voz{color:var(--ambar)}
.mono{font-family:var(--f-mono)}
.grao{position:absolute;inset:0;background-image:var(--grao);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.perfura{height:0;border-top:2px dashed currentColor;opacity:.35}
.rota{stroke:var(--ceu);stroke-width:2.5;stroke-dasharray:2 10;stroke-linecap:round;fill:none}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:800 1rem/1 var(--f-texto);letter-spacing:.01em;
  padding:1.05em 1.6em;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;
  background:var(--rubi);color:#fff;box-shadow:var(--sombra-rubi);position:relative}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-zap{background:var(--zap);color:#073b1d;box-shadow:0 14px 34px rgba(37,211,102,.3)}
.btn-claro{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}
.btn-linha{background:transparent;color:inherit;box-shadow:none;outline:2px solid currentColor;outline-offset:-2px}

/* ---------- ticket (cartão de embarque): a assinatura da marca ---------- */
.ticket{position:relative;background:var(--papel);color:var(--tinta);border-radius:var(--r-l);padding:26px 28px;
  -webkit-mask:radial-gradient(circle 14px at 0 var(--corte,62%),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% var(--corte,62%),#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 var(--corte,62%),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% var(--corte,62%),#0000 98%,#000) right/51% 100% no-repeat}
.ticket-escuro{background:var(--aco);color:var(--papel)}
.rotulo{font:700 .68rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.valor{font:700 1.5rem/1.1 var(--f-mono);letter-spacing:-.02em}

/* ---------- carimbo (destaque numérico) ---------- */
.selo{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;position:relative;
  background:var(--rubi);color:#fff;box-shadow:var(--sombra);transform:rotate(-8deg)}
.selo::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.55)}
.selo b{display:block;font:800 2rem/1 var(--f-display);letter-spacing:-.02em}
.selo small{display:block;font:700 .58rem/1.25 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:.35em}
.selo-claro{background:var(--papel);color:var(--tinta)}
.selo-claro::before{border-color:rgba(26,28,33,.35)}

/* ---------- cartões, números ---------- */
.card{background:#fff;border-radius:var(--r-l);padding:28px;box-shadow:0 1px 0 rgba(26,28,33,.06),0 18px 40px rgba(26,28,33,.07);position:relative}
.card-papel{background:var(--papel);outline:1.5px dashed rgba(26,28,33,.18);outline-offset:-10px}
.preco{font:700 1.25rem/1 var(--f-mono);color:var(--rubi);letter-spacing:-.01em}
.preco small{font:600 .7em var(--f-texto);color:var(--nevoa)}
.etiqueta{display:inline-block;font:700 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:.55em .85em;border-radius:var(--r-pill);background:var(--papel-2);color:var(--tinta)}
.etiqueta-rubi{background:var(--rubi);color:#fff}
.etiqueta-ambar{background:var(--ambar);color:var(--grafite)}
.aviso{font:500 .78rem/1.5 var(--f-texto);color:var(--nevoa)}

/* ---------- seções ---------- */
.s-claro{background:var(--papel);color:var(--tinta)}
.s-escuro,.s-grafite{background:var(--grafite);color:var(--papel)}
.s-noite{background:var(--grafite-2);color:var(--papel)}
.s-rubi{background:var(--rubi);color:#fff}

/* ---------- marca vetorial (monograma MP + rota até o destino) ---------- */
.marca{display:block}
.marca .fundo{fill:var(--grafite)}
.marca .letras{font-family:var(--f-display);font-weight:800;fill:var(--papel)}
.marca .rota-m{stroke:var(--ceu);stroke-width:3.2;stroke-dasharray:.5 7.5;stroke-linecap:round;fill:none}
.marca .destino{fill:var(--rubi)}
.marca-claro .fundo{fill:var(--papel)}
.marca-claro .letras{fill:var(--tinta)}
.marca-claro .rota-m{stroke:var(--rubi)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}