/* ==========================================================================
   LOTAÇÃO MÁXIMA · camada visual do infoproduto (não é o design system DEBRITTO)
   Fonte canônica dos tokens: assets/figma-source/identidade_lotacao-maxima_set-2026_debritto.css
   Direção "Bilheteria": base quase preta, off-white, um laranja de alta voltagem
   reservado a número, CTA e urgência. Título em Archivo pesado com tracking
   fechado. Corpo em Inter. Número sempre tabular.
   Modo claro (.claro) existe para o PDF: mesmo sistema, papel branco, laranja
   rebaixado para passar AA como texto. Nenhum valor literal fora deste arquivo.
   ========================================================================== */

:root {
  /* --- tinta escura (base) --- */
  --preto:      #0B0B0C;
  --preto-2:    #141416;   /* card sobre a base */
  --preto-3:    #1D1D20;   /* recesso, input, linha alternada */
  --off:        #F4F3F0;   /* texto principal sobre escuro */
  --off-2:      #B9B9B4;   /* corpo sobre escuro (9,9:1) */
  --off-3:      #92928D;   /* rótulo, legenda (6,3:1 sobre o preto) */
  --linha:      rgba(244, 243, 240, .16);
  --linha-fraca:rgba(244, 243, 240, .08);

  /* --- papel (PDF) --- */
  --papel:      #F4F3F0;
  --papel-2:    #E5E2DC;
  --tinta:      #111113;   /* texto principal sobre papel (17,5:1) */
  --tinta-2:    #45454A;   /* corpo sobre papel (8,6:1) */
  --tinta-3:    #6E6E74;   /* rótulo sobre papel (4,6:1) */

  /* --- acento --- */
  --laranja:      #FF4D1C;  /* sobre escuro: 5,9:1, vale como texto */
  --laranja-esc:  #C43A10;  /* sobre papel: 4,8:1, vale como texto */
  --laranja-wash: rgba(255, 77, 28, .13);
  --verde:        #2BD576;  /* resultado positivo sobre escuro, uso raro */
  --verde-esc:    #12794A;  /* sobre papel */

  /* --- semânticos, reapontados por modo --- */
  --bg:        var(--preto);
  --bg-2:      var(--preto-2);
  --bg-3:      var(--preto-3);
  --fg:        var(--off);
  --fg-2:      var(--off-2);
  --fg-3:      var(--off-3);
  --acento:    var(--laranja);
  --ok:        var(--verde);

  /* --- tipografia --- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --corpo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --t-micro: 12px;
  --t-label: 13px;
  --t-sm:    15px;
  --t-base:  17px;
  --t-lg:    19px;
  --t-h3:    23px;
  --t-h2:    clamp(28px, 3.4vw, 40px);
  --t-h1:    clamp(38px, 6.4vw, 78px);
  --t-num:   clamp(30px, 4.4vw, 52px);

  --tr-tight: -.025em;   /* display pesado: tracking fecha */
  --tr-caps:  .10em;     /* rótulo em caixa alta */

  /* --- espaço, grade de 4 --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 104px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --sombra: 0 24px 60px -32px rgba(0, 0, 0, .85);
  --curva: cubic-bezier(.16, 1, .3, 1);
  --dur: 220ms;
}

/* modo claro: mesmo sistema, papel. Usado no PDF e em qualquer bloco claro. */
.claro {
  --bg:     var(--papel);
  --bg-2:   #FFFFFF;
  --bg-3:   var(--papel-2);
  --fg:     var(--tinta);
  --fg-2:   var(--tinta-2);
  --fg-3:   var(--tinta-3);
  --acento: var(--laranja-esc);
  --ok:     var(--verde-esc);
  --linha:       rgba(11, 11, 12, .15);
  --linha-fraca: rgba(11, 11, 12, .08);
  --sombra: 0 18px 40px -28px rgba(17, 17, 19, .35);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--corpo);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- tipografia ---------- */
.h1, .h2, .h3 {
  font-family: var(--display);
  letter-spacing: var(--tr-tight);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fg);
}
.h1 { font-size: var(--t-h1); font-weight: 800; }
.h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.05; }
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }

.rotulo {
  font-family: var(--corpo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.rotulo-acento { color: var(--acento); }

.texto  { color: var(--fg-2); text-wrap: pretty; }
.texto strong, .forte { color: var(--fg); font-weight: 600; }
.texto em { font-style: italic; color: var(--fg); }
.miudo  { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.5; }

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.destaque { color: var(--acento); }

a { color: inherit; }

/* ---------- número grande (a prova) ---------- */
.dado { display: flex; flex-direction: column; gap: var(--e1); }
.dado .v {
  font-family: var(--display); font-weight: 800; font-size: var(--t-num);
  letter-spacing: var(--tr-tight); line-height: 1; color: var(--fg);
  font-variant-numeric: tabular-nums lining-nums;
}
.dado .v.acento { color: var(--acento); }
.dado .l { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.dado .p { font-size: var(--t-micro); color: var(--fg-3); }

/* ---------- barra de acento ---------- */
.fio { display: block; width: 56px; height: 4px; background: var(--acento); border: 0; }

/* ---------- botão ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 54px; padding: 0 var(--e6);
  font-family: var(--display); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--acento); color: #FFFFFF;
  transition: transform var(--dur) var(--curva), filter var(--dur) var(--curva);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: scale(.99); }
.btn:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.btn.fantasma { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--linha); }
.btn.fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento); filter: none; }
.btn.grande { min-height: 64px; font-size: var(--t-lg); padding: 0 var(--e7); }
.btn.cheio { width: 100%; }

/* ---------- caixa ---------- */
.caixa {
  background: var(--bg-2); border-radius: var(--r-lg); padding: var(--e6);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.caixa.marcada { box-shadow: inset 0 0 0 1.5px var(--acento); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   MARCA · lockup oficial (assets/exportados/identidade/)
   O selo é um ingresso com as barras do 20/20/60 dentro: as duas primeiras fases
   baixas e a de escassez cheia. Vai em SVG e não em PNG porque ele precisa ficar
   nítido em qualquer tamanho e herdar a cor da superfície onde cai.
   ========================================================================== */

.marca-lockup { display: inline-flex; align-items: center; gap: var(--e4); text-decoration: none; color: inherit; }
.marca-selo { flex: none; width: 46px; height: 46px; display: block; }
.marca-selo .ticket { fill: var(--acento); }
.marca-selo .perf { stroke: rgba(11, 11, 12, .42); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7.5; }
.marca-selo .barra { fill: var(--preto); }
.marca-selo .barra-cheia { fill: var(--papel); }
.marca-texto { display: grid; gap: 2px; min-width: 0; }
.marca-sobrancelha { font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); line-height: 1; }
.marca-nome { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: .86; letter-spacing: -.05em; text-transform: uppercase; color: var(--fg); }
.marca-nome span { display: block; color: var(--acento); }
.marca-lockup.sm .marca-selo { width: 34px; height: 34px; }
.marca-lockup.sm .marca-nome { font-size: 16px; }
.marca-lockup.sm .marca-sobrancelha { display: none; }
/* numa linha só, para rodapé e barra estreita */
.marca-lockup.linha .marca-nome { display: flex; gap: .3em; line-height: 1; }
.marca-lockup.linha .marca-nome span { display: inline; }