/* ============================================================================
   ExpoImage Brasil 2027 · bits.css · vocabulário 8-BIT do sistema (Pablo, 07/09 · ref. trademania.io)
   Depende de tokens.css. A célula é o pixel do sistema (--bit = 8 px). Tudo por SUPERFÍCIE e PIXEL: nenhum contorno.
   Componentes:
     .cut            corte diagonal num canto (br padrão · .tr .tl .bl · .sm .lg .xl)
     .btn-bit        botão quadrado com célula de seta e corte
     .tab-bit        aba/etiqueta mono com corte na ponta (fica em cima de uma placa ou solta)
     .eyebrow-bit    célula de ícone colorida + rótulo em placa (kicker de seção)
     .box-bit        placa informativa (aba + corpo com corte)
     .hl             palavra em destaque: placa tonal com degraus de pixel nas bordas
     .bits-rule      divisória em quadradinhos (três fileiras, ritmo irregular, esmaece à direita)
     .bits-edge      borda de dissolução em pixel (foto → placa) para o pé de uma imagem
     .bg-grid        grade localizada (quadriculado fino, mascarado num ponto)
     .bg-checker     nuvem de quadradinhos localizada (xadrez em dois ritmos, mascarado)
   Cores: herdam currentColor / --ink; luz por --lit; fundo da placa da página por --bg.
   ========================================================================== */
:root{--bit:8px;--cut:14px;--bg:var(--noite);--lit:var(--mag)}

/* ---------- 1. corte diagonal ---------- */
.cut{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.cut.tr{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.cut.tl{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))}
.cut.bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.cut.sm{--cut:8px} .cut.lg{--cut:32px} .cut.xl{--cut:64px}

/* ---------- 2. botão quadrado ---------- */
.btn-bit{display:inline-flex;align-items:stretch;background:var(--off);color:var(--noite);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;cursor:pointer;border:0;padding:0;appearance:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background .25s,color .25s}
.btn-bit>span{display:flex;align-items:center;padding:17px 22px 17px 24px}
.btn-bit>i{display:flex;align-items:center;justify-content:center;width:56px;font-style:normal;background:rgba(7,10,43,.08)}
.btn-bit>i svg{width:16px;height:16px;display:block;fill:currentColor}
.btn-bit:hover{background:#fff}
.btn-bit.noite{background:var(--noite);color:var(--off)} .btn-bit.noite>i{background:rgba(244,243,232,.12)} .btn-bit.noite:hover{background:#111649}
.btn-bit.limao{background:var(--limao);color:var(--noite)} .btn-bit.limao>i{background:rgba(7,10,43,.10)} .btn-bit.limao:hover{background:#D6FF6E}
.btn-bit.ghost{background:rgba(244,243,232,.12);color:var(--off)} .btn-bit.ghost>i{background:rgba(244,243,232,.10)} .btn-bit.ghost:hover{background:rgba(244,243,232,.20)}
.btn-bit.lit{box-shadow:inset 6px 0 0 var(--lit)} .btn-bit.lit>span{padding-left:30px}   /* barra de luz na esquerda (é superfície, não contorno) */
.btn-bit.sm>span{padding:12px 16px 12px 18px;font-size:11px} .btn-bit.sm>i{width:44px}
.btn-bit.lg>span{padding:22px 28px 22px 30px;font-size:13px} .btn-bit.lg>i{width:66px}

/* ---------- 3. aba / etiqueta com corte ---------- */
.tab-bit{display:inline-flex;align-items:center;gap:10px;padding:10px 26px 10px 14px;background:var(--limao);color:var(--noite);font-family:var(--mono);font-weight:500;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.tab-bit>i{display:inline-flex;font-style:normal;width:16px;height:16px;align-items:center;justify-content:center}
.tab-bit>i svg{width:14px;height:14px;display:block;fill:currentColor}
.tab-bit.off{background:var(--off);color:var(--noite)} .tab-bit.noite{background:var(--noite);color:var(--off)} .tab-bit.papel2{background:var(--papel2);color:var(--noite)}
.tab-bit.mag{background:var(--mag);color:var(--noite)} .tab-bit.rosa{background:var(--rosa);color:var(--noite)} .tab-bit.azul{background:var(--azul);color:var(--off)} .tab-bit.ciano{background:var(--ciano);color:var(--noite)} .tab-bit.vermelho{background:var(--vermelho);color:var(--off)}
.tab-bit.ghost{background:rgba(244,243,232,.12);color:var(--off)}

/* kicker de seção: célula colorida com ícone + rótulo em placa */
.eyebrow-bit{display:inline-flex;align-items:stretch;font-family:var(--mono);font-weight:500;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--noite)}
.eyebrow-bit>i{display:grid;place-items:center;width:36px;background:var(--lit);color:var(--noite);font-style:normal}
.eyebrow-bit>i svg{width:14px;height:14px;display:block;fill:currentColor}
.eyebrow-bit>span{display:flex;align-items:center;padding:0 16px 0 14px;background:var(--off);min-height:36px}
.eyebrow-bit.noite>span{background:var(--noite);color:var(--off)}
.eyebrow-bit.limao>i{background:var(--limao)} .eyebrow-bit.mag>i{background:var(--mag)} .eyebrow-bit.ciano>i{background:var(--ciano)} .eyebrow-bit.rosa>i{background:var(--rosa)} .eyebrow-bit.azul>i{background:var(--azul);color:var(--off)} .eyebrow-bit.vermelho>i{background:var(--vermelho);color:var(--off)}

/* ---------- 4. placa informativa: aba + corpo com corte ---------- */
.box-bit{display:grid;justify-items:start;align-content:start}
.box-bit>.tab-bit{position:relative;z-index:1}
.box-bit>.body{width:100%;background:var(--off);color:var(--noite);padding:24px 28px 28px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.box-bit>.body p{color:inherit;max-width:none}
.box-bit.noite>.body{background:var(--noite);color:var(--off)} .box-bit.noite2>.body{background:#0A0E38;color:var(--off)} .box-bit.papel2>.body{background:var(--papel2)}
.box-bit.lit>.body{box-shadow:inset 0 6px 0 var(--lit)}  /* filete de luz no topo, abaixo da aba (superfície) */

/* ---------- 5. palavra em destaque: placa tonal com degraus de pixel ---------- */
/* <span class="hl">experiências.</span> · luz .mag .limao .ciano .rosa .azul .off · .solid = placa opaca com tinta noite · .ink = texto na cor do contexto
   --b é o pixel do destaque (1/8 da altura da placa). Mordidas para dentro = camadas de background na cor do fundo (--bg);
   degraus para fora = ::before (esquerda) e ::after (direita) com box-shadow em múltiplos de --b. */
.hl{--b:.125em;--hl:color-mix(in srgb,var(--lit) 26%,transparent);position:relative;display:inline-block;padding:0 .1em 0 .12em;margin:0 .3em 0 .28em;color:var(--lit);isolation:isolate;line-height:inherit;vertical-align:baseline;
  background-color:var(--hl);background-repeat:no-repeat;background-size:var(--b) var(--b);
  background-image:linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg))),linear-gradient(var(--hl-bg,var(--bg)),var(--hl-bg,var(--bg)));
  background-position:0 0,0 calc(3*var(--b)),0 calc(6*var(--b)),var(--b) calc(7*var(--b)),right 0 top calc(1*var(--b)),right var(--b) top calc(2*var(--b)),right 0 top calc(5*var(--b)),right 0 top calc(6*var(--b))}
.hl::before,.hl::after{content:"";position:absolute;width:var(--b);height:var(--b);pointer-events:none;background:var(--hl);z-index:-1}
.hl::before{left:calc(-1*var(--b));top:calc(1*var(--b));
  box-shadow:0 var(--b) 0 0 var(--hl),calc(-1*var(--b)) var(--b) 0 0 var(--hl),calc(-2*var(--b)) calc(2*var(--b)) 0 0 var(--hl),0 calc(3*var(--b)) 0 0 var(--hl),0 calc(4*var(--b)) 0 0 var(--hl),calc(-1*var(--b)) calc(4*var(--b)) 0 0 var(--hl),0 calc(5*var(--b)) 0 0 var(--hl)}
.hl::after{right:calc(-1*var(--b));top:0;
  box-shadow:var(--b) 0 0 0 var(--hl),0 calc(3*var(--b)) 0 0 var(--hl),var(--b) calc(3*var(--b)) 0 0 var(--hl),calc(2*var(--b)) calc(1*var(--b)) 0 0 var(--hl),0 calc(4*var(--b)) 0 0 var(--hl),0 calc(6*var(--b)) 0 0 var(--hl),var(--b) calc(6*var(--b)) 0 0 var(--hl)}
.hl.mag{--lit:var(--mag)} .hl.limao{--lit:var(--limao)} .hl.ciano{--lit:var(--ciano)} .hl.rosa{--lit:var(--rosa)} .hl.azul{--lit:var(--azul)} .hl.off{--lit:var(--off)} .hl.rosa-tinta{--lit:var(--rosa-tinta)}
.hl.solid{--hl:var(--lit);color:var(--noite)}
.hl.solid.azul{color:var(--off)}
.hl.ink{--hl:color-mix(in srgb,var(--lit) 34%,transparent);color:inherit}   /* mantém a cor do texto, só a placa acende */
.hl.quiet{--hl:color-mix(in srgb,var(--lit) 14%,transparent)}
.hl.plain{background-image:none} .hl.plain::before,.hl.plain::after{display:none}   /* só a placa, sem pixel (tamanhos pequenos) */


/* destaque que QUEBRA LINHA (.hl.wrap): o contêiner fica transparente e o deck.js (ou qualquer script) reparte o texto em
   uma placa .hl por linha. Sem script, mostra só a cor do texto. */
.hl.wrap{background:none;padding:0;margin:0;display:inline}
.hl.wrap::before,.hl.wrap::after{display:none}
.hl.wrap>.hl{margin:0 .28em}

/* ---------- 5b. faixa de informação (data · local · cidade): células mono em placa, primeira em destaque, ponta cortada ---------- */
/* <span class="info-bit"><b>30 e 31 de março de 2027</b><span>Frei Caneca</span><span>São Paulo</span></span> · .noite (sobre claro) · .limao · .sm */
.info-bit{display:inline-flex;max-width:none;margin:0;align-items:stretch;font-family:var(--mono);font-weight:500;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--off);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.info-bit>*{display:flex;align-items:center;padding:0 16px;min-height:40px;background:rgba(244,243,232,.12)}
.info-bit>*+*{box-shadow:inset 2px 0 0 var(--bg,var(--noite))}   /* fenda de 2 px entre células, na cor do fundo */
.info-bit>b,.info-bit.info-bit>b{font-weight:500;background:var(--off);color:var(--noite)}
.info-bit>*:last-child{padding-right:26px}
.info-bit.limao>b{background:var(--limao)} .info-bit.mag>b{background:var(--mag)} .info-bit.ciano>b{background:var(--ciano)}
.info-bit.noite{color:var(--noite)} .info-bit.noite>*{background:rgba(7,10,43,.08)} .info-bit.noite>b,.info-bit.info-bit.noite>b{background:var(--noite);color:var(--off)}
.info-bit.sm{font-size:10px} .info-bit.sm>*{min-height:32px;padding:0 12px} .info-bit.sm>*:last-child{padding-right:22px}
@media screen and (max-width:767px){.info-bit{flex-wrap:wrap;clip-path:none} .info-bit>*{min-height:34px;padding:0 12px} .info-bit>*:last-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);padding-right:22px}}

/* ---------- 6. divisória em quadradinhos ---------- */
/* três fileiras de células com períodos diferentes (16, 24 e 40 px): parece aleatório, é determinístico */
.bits-rule{--c:var(--lit);height:calc(var(--bit)*3);width:100%;opacity:1;background-repeat:repeat-x;
  background-image:
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*5)),
    repeating-linear-gradient(90deg,transparent 0 var(--bit),var(--c) var(--bit) calc(var(--bit)*2),transparent calc(var(--bit)*2) calc(var(--bit)*3)),
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*2));
  background-size:calc(var(--bit)*5) var(--bit),calc(var(--bit)*3) var(--bit),calc(var(--bit)*2) var(--bit);
  background-position:calc(var(--bit)*2) 0,0 var(--bit),var(--bit) calc(var(--bit)*2)}
.bits-rule.fade{-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 100%);mask-image:linear-gradient(90deg,#000 30%,transparent 100%)}
.bits-rule.fade-l{-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 100%);mask-image:linear-gradient(270deg,#000 30%,transparent 100%)}
.bits-rule.solid{opacity:1} .bits-rule.ink{--c:currentColor;opacity:.55}
.bits-rule.short{width:40px;height:calc(var(--bit)*2);background-position:0 0,var(--bit) var(--bit),0 0;background-image:
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*2)),
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*2));background-size:calc(var(--bit)*2) var(--bit),calc(var(--bit)*2) var(--bit)}
/* cabeçalho de seção: quadradinhos + rótulo */
.bits-label{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2,inherit)}
.bits-label .bits-rule{flex:none}

/* ---------- 7. borda de dissolução em pixel (pé de foto → placa) ---------- */
/* <div class="bits-edge" style="--c:var(--noite)"></div> no pé de um .ratio/.opener: quatro fileiras, de rala a cheia. --bit maior aqui (16 px) */
.bits-edge{--bit:16px;--c:var(--bg);position:absolute;left:0;right:0;bottom:0;height:calc(var(--bit)*5);z-index:3;pointer-events:none;background-repeat:repeat-x;
  background-image:
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*7)),
    repeating-linear-gradient(90deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*3),var(--c) calc(var(--bit)*3) calc(var(--bit)*4),transparent calc(var(--bit)*4) calc(var(--bit)*9)),
    repeating-linear-gradient(90deg,var(--c) 0 calc(var(--bit)*2),transparent calc(var(--bit)*2) calc(var(--bit)*3),var(--c) calc(var(--bit)*3) calc(var(--bit)*4),transparent calc(var(--bit)*4) calc(var(--bit)*6)),
    repeating-linear-gradient(90deg,var(--c) 0 calc(var(--bit)*3),transparent calc(var(--bit)*3) calc(var(--bit)*4),var(--c) calc(var(--bit)*4) calc(var(--bit)*7),transparent calc(var(--bit)*7) calc(var(--bit)*8)),
    linear-gradient(var(--c),var(--c));
  background-size:calc(var(--bit)*7) var(--bit),calc(var(--bit)*9) var(--bit),calc(var(--bit)*6) var(--bit),calc(var(--bit)*8) var(--bit),100% var(--bit);
  background-position:calc(var(--bit)*3) 0,var(--bit) var(--bit),0 calc(var(--bit)*2),calc(var(--bit)*2) calc(var(--bit)*3),0 calc(var(--bit)*4)}
.bits-edge.top{bottom:auto;top:0;transform:scaleY(-1)}
/* coluna vertical (lateral direita; .left espelha): mesmas fileiras, giradas */
.bits-edge.right,.bits-edge.left{left:auto;right:0;top:0;bottom:0;height:auto;width:calc(var(--bit)*5);background-repeat:repeat-y;
  background-image:
    repeating-linear-gradient(180deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*7)),
    repeating-linear-gradient(180deg,var(--c) 0 var(--bit),transparent var(--bit) calc(var(--bit)*3),var(--c) calc(var(--bit)*3) calc(var(--bit)*4),transparent calc(var(--bit)*4) calc(var(--bit)*9)),
    repeating-linear-gradient(180deg,var(--c) 0 calc(var(--bit)*2),transparent calc(var(--bit)*2) calc(var(--bit)*3),var(--c) calc(var(--bit)*3) calc(var(--bit)*4),transparent calc(var(--bit)*4) calc(var(--bit)*6)),
    repeating-linear-gradient(180deg,var(--c) 0 calc(var(--bit)*3),transparent calc(var(--bit)*3) calc(var(--bit)*4),var(--c) calc(var(--bit)*4) calc(var(--bit)*7),transparent calc(var(--bit)*7) calc(var(--bit)*8)),
    linear-gradient(var(--c),var(--c));
  background-size:var(--bit) calc(var(--bit)*7),var(--bit) calc(var(--bit)*9),var(--bit) calc(var(--bit)*6),var(--bit) calc(var(--bit)*8),var(--bit) 100%;
  background-position:0 calc(var(--bit)*3),var(--bit) var(--bit),calc(var(--bit)*2) 0,calc(var(--bit)*3) calc(var(--bit)*2),calc(var(--bit)*4) 0}
.bits-edge.left{right:auto;left:0;transform:scaleX(-1)}
.bits-edge.lit{--c:var(--lit)} .bits-edge.limao{--c:var(--limao)} .bits-edge.mag{--c:var(--mag)} .bits-edge.ciano{--c:var(--ciano)}
.bits-edge.sm{--bit:10px} .bits-edge.lg{--bit:24px}

/* ---------- 8. fundos localizados ---------- */
/* grade fina: linhas de 1 px em --gl, célula --g, mascarada num ponto (--gx/--gy) com raio --gr */
.bg-grid{position:absolute;inset:0;z-index:0;pointer-events:none;--g:48px;--gl:rgba(244,243,232,.075);--gx:70%;--gy:35%;--gw:960px;--gh:720px;
  background-image:linear-gradient(90deg,var(--gl) 1px,transparent 1px),linear-gradient(180deg,var(--gl) 1px,transparent 1px);background-size:var(--g) var(--g);
  -webkit-mask-image:radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy),#000 0,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy),#000 0,rgba(0,0,0,.55) 45%,transparent 100%)}
.bg-grid.papel,.plate-papel .bg-grid{--gl:rgba(7,10,43,.09)}
.bg-grid.fine{--g:24px}
/* nuvem de quadradinhos: dois xadrezes (16 e 24 px) sobrepostos, cada um com a própria máscara */
.bg-checker{position:absolute;inset:0;z-index:0;pointer-events:none;--ck:rgba(244,243,232,.055);--cx:85%;--cy:20%;--cw:640px;--ch:480px;
  background-image:repeating-conic-gradient(var(--ck) 0 25%,transparent 0 50%),repeating-conic-gradient(var(--ck) 0 25%,transparent 0 50%);
  background-size:calc(var(--bit)*3) calc(var(--bit)*3),calc(var(--bit)*5) calc(var(--bit)*5);background-position:0 0,calc(var(--bit)*2) var(--bit);
  -webkit-mask-image:radial-gradient(ellipse var(--cw) var(--ch) at var(--cx) var(--cy),#000 0,rgba(0,0,0,.45) 40%,transparent 100%);mask-image:radial-gradient(ellipse var(--cw) var(--ch) at var(--cx) var(--cy),#000 0,rgba(0,0,0,.45) 40%,transparent 100%)}
.bg-checker.papel,.plate-papel .bg-checker{--ck:rgba(7,10,43,.06)}
.bg-checker.limao{--ck:rgba(198,255,61,.09)} .bg-checker.mag{--ck:rgba(211,51,255,.10)} .bg-checker.ciano{--ck:rgba(51,230,255,.08)}
.bg-checker.bl{--cx:8%;--cy:88%} .bg-checker.tl{--cx:6%;--cy:10%} .bg-checker.br{--cx:92%;--cy:88%}
/* quadriculado que segue uma foto (pé) sem canvas: xadrez em screen, esmaecendo para cima */
.bg-checker.foot{--cy:100%;--cx:50%;-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 42%);mask-image:linear-gradient(0deg,#000 0,transparent 42%)}

/* ---------- 9. impressão ---------- */
@media print{.bits-rule,.bits-edge,.bg-grid,.bg-checker,.hl,.tab-bit,.btn-bit,.eyebrow-bit,.box-bit>.body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}