/* ============================================================
   BEL TATTOO INK · v3 "BEL.SYS"
   Ficha de personagem + HUD de app + drop de streetwear.
   Mobile-first. Paleta de 3 cores: PRETO, BRANCO e AMARELO.
   Os painéis alternam preto e branco. Contorno de adesivo, sombra dura.
   ============================================================ */

:root{
  /* PRETO */
  --void:      #000000;
  --carvao:    #0D0D0D;
  --fumaca:    #141414;
  --linha:     #262626;
  --linha-2:   #3A3A3A;
  --cinza:     #9A9A9A;
  --cinza-2:   #6C6C6C;
  --tinta:     #0A0A0A;
  --tinta-2:   #4A4A4A;

  /* BRANCO */
  --branco:    #FFFFFF;
  --papel:     #FFFFFF;   /* superfícies internas: barra, input, cartão */
  --osso:      #F4F4F2;   /* fundo dos painéis claros */
  --osso-2:    #E4E4E0;
  --risco:     #BDBDBD;   /* pontilhado do resumo */

  /* AMARELO */
  --amarelo:   #FFD400;
  --acido:     #FFEA00;

  /* contexto: repintado por bloco */
  --fundo:     var(--void);
  --texto:     var(--branco);
  --fraco:     var(--cinza);
  --borda:     var(--linha);
  --ink:       var(--branco);

  --gut: 16px;
  --max: 1220px;
  --pad: max(var(--gut), calc((100% - var(--max)) / 2));

  --f-disp: "Archivo", "Arial Narrow", Helvetica, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--void);-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--void);
  color:var(--branco);
  font-family:var(--f-disp);
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* o HUD é sticky: headings de âncora não podem ficar embaixo dele */
section[id]{scroll-margin-top:64px}

img{max-width:100%;display:block}
h1,h2{margin:0;font-weight:900;text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--amarelo);color:var(--void)}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px}

/* ============================================================
   BOOT: abre uma vez por sessão, some sozinho
   ============================================================ */
.boot{
  position:fixed;inset:0;z-index:300;
  display:grid;place-content:center;justify-items:center;gap:18px;
  background:var(--void);
  transition:opacity .45s ease,visibility .45s ease;
}
.boot[hidden]{display:none}
.boot.is-off{opacity:0;visibility:hidden;pointer-events:none}
.boot__mascote{width:120px;height:auto;animation:pulaBoot .7s ease-in-out infinite alternate}
@keyframes pulaBoot{to{transform:translateY(-10px)}}
.boot__barra{width:min(58vw,230px);height:5px;background:var(--carvao);border:1px solid var(--linha-2);overflow:hidden}
.boot__barra i{display:block;height:100%;width:0;background:var(--amarelo);animation:carrega 1s cubic-bezier(.5,0,.2,1) forwards}
@keyframes carrega{to{width:100%}}
.boot__txt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.3em;color:var(--cinza-2)}

/* ============================================================
   GRÃO / SCANLINE: a camada "tecnológica" por cima de tudo
   ============================================================ */
.grao{
  position:fixed;inset:0;z-index:250;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.55;
}

/* ============================================================
   HUD
   ============================================================ */
.hud{
  position:sticky;top:0;z-index:120;
  display:flex;align-items:center;gap:10px;
  padding:11px var(--gut);
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.hud__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--amarelo);box-shadow:0 0 12px rgba(255,212,0,.7);
}
.hud__marca{
  display:flex;align-items:center;gap:7px;
  font-weight:900;font-size:18px;letter-spacing:.04em;
  font-variation-settings:"wdth" 122;
}
.hud__marca i{
  font-style:normal;font-family:var(--f-mono);font-size:9px;
  color:var(--amarelo);letter-spacing:0;transform:translateY(-1px);
}
.hud__losango{
  width:11px;height:11px;background:var(--amarelo);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:gira 6s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.hud__status{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;color:var(--cinza);
  white-space:nowrap;
}
.pulso{
  width:6px;height:6px;border-radius:50%;background:var(--amarelo);
  box-shadow:0 0 0 0 rgba(255,212,0,.55);animation:pulso 2.2s infinite;
}
@keyframes pulso{
  70%{box-shadow:0 0 0 7px rgba(255,212,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}
}
.hud__wpp{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--linha-2);border-radius:50%;color:var(--amarelo);
  transition:background .15s ease,color .15s ease;
}
.hud__wpp:hover{background:var(--amarelo);color:var(--void);border-color:var(--amarelo)}

/* ============================================================
   CAPA
   ============================================================ */
.capa{position:relative;overflow:hidden;padding:4px var(--gut) 30px;isolation:isolate}
.capa__grade{
  position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size:42px 42px;opacity:.55;
  -webkit-mask-image:radial-gradient(125% 76% at 50% 28%, #000 22%, transparent 76%);
          mask-image:radial-gradient(125% 76% at 50% 28%, #000 22%, transparent 76%);
}
.capa__brilho{
  position:absolute;left:50%;top:23%;z-index:-2;
  width:min(150vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,212,0,.32) 0%, rgba(255,234,0,.10) 38%, transparent 66%);
}
/* linhas de velocidade */
.capa__risco{
  position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(96deg,
    rgba(255,212,0,.24) 0 2px, transparent 2px 9px);
  -webkit-mask-image:linear-gradient(96deg, #000 0 12%, transparent 42%);
          mask-image:linear-gradient(96deg, #000 0 12%, transparent 42%);
  opacity:.6;
}

.capa__palco{position:relative;display:grid;place-items:center;padding-top:10px}
.capa__nome{
  position:absolute;top:12%;left:50%;transform:translateX(-50%);
  width:100%;display:grid;place-items:center;pointer-events:none;user-select:none;
}
.capa__nome span{
  font-weight:900;font-size:min(42vw,300px);line-height:.76;
  font-variation-settings:"wdth" 125;
  color:rgba(255,212,0,.055);
  -webkit-text-stroke:2px rgba(255,212,0,.32);
  white-space:nowrap;
}
.capa__mascote{
  position:relative;width:min(90%,430px);height:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.8));
  animation:flutua 6s ease-in-out infinite;
  transform:translate3d(calc(var(--mx,0) * 12px), calc(var(--my,0) * 10px), 0);
}
@keyframes flutua{50%{transform:translate3d(calc(var(--mx,0) * 12px), calc(var(--my,0) * 10px - 9px), 0)}}

/* selos flutuantes */
.selo{
  position:absolute;z-index:2;
  border:1px solid var(--linha-2);background:rgba(13,13,13,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:7px 10px;text-align:center;line-height:1;
}
.selo b{display:block;font-weight:900;font-size:19px;font-variation-settings:"wdth" 120}
.selo span{display:block;margin-top:5px;font-family:var(--f-mono);font-size:7.5px;color:var(--cinza)}
.selo--sp{right:0;top:14px}
.selo--n{left:0;bottom:16px;border-color:var(--amarelo)}
.selo--n b{color:var(--amarelo)}

.capa__base{position:relative;margin-top:-4px;display:grid;gap:15px;justify-items:start}
.sobre{
  margin:0;font-family:var(--f-mono);font-size:9px;letter-spacing:.24em;color:var(--amarelo);
}
/* Titulo longo em 3 linhas. O limite e "TRANSFORMANDO", a maior palavra.
   Por isso este e o unico bloco que usa o eixo CONDENSADO do Archivo:
   no expandido a palavra estoura a coluna em qualquer tamanho legivel. */
.capa__titulo{
  font-size:clamp(28px,10vw,56px);line-height:.92;letter-spacing:-.01em;
  font-variation-settings:"wdth" 82;
}
.capa__titulo em{font-style:normal;color:var(--amarelo)}

.ficha{
  margin:2px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;border:1px solid var(--linha);background:var(--carvao);
}
.ficha div{padding:10px 9px;border-right:1px solid var(--linha)}
.ficha div:last-child{border-right:0}
.ficha dt{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.14em;color:var(--cinza-2)}
.ficha dd{margin:5px 0 0;font-size:11px;font-weight:900;letter-spacing:.01em;line-height:1.2}

/* ============================================================
   CHIPS
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip,.chips--fixo li{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;
  padding:8px 11px;border:1px solid var(--borda);color:var(--fraco);
  background:transparent;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
.chip:hover{color:var(--texto);border-color:var(--fraco)}
.chip:active{transform:translateY(1px)}
.chip.is-on{background:var(--amarelo);border-color:var(--amarelo);color:var(--void);font-weight:800}

/* ============================================================
   AÇÃO: botão adesivo
   ============================================================ */
.acao{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 22px;background:var(--amarelo);color:var(--void);
  border:2px solid var(--tinta);box-shadow:5px 5px 0 var(--tinta);
  font-weight:900;font-size:14px;letter-spacing:.04em;
  font-variation-settings:"wdth" 110;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.acao:hover{background:var(--branco)}
.acao:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--tinta)}
.acao--full{width:100%;justify-content:center;padding:18px;font-size:15px}
.acao--preto{background:var(--tinta);color:var(--osso);box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.acao--preto:hover{background:var(--void);color:var(--amarelo)}
/* no escuro o contorno preto some: usa contorno claro */
.bloco--escuro .acao,.capa .acao{border-color:var(--branco);box-shadow:5px 5px 0 var(--branco)}
.bloco--escuro .acao:active,.capa .acao:active{box-shadow:1px 1px 0 var(--branco)}

/* ============================================================
   FITA: dois marquees em direções opostas
   ============================================================ */
.fita{
  overflow:hidden;border-block:1px solid var(--linha);background:var(--carvao);
  padding:8px 0;display:grid;gap:5px;
}
.fita__linha{display:flex;width:max-content;animation:desliza 30s linear infinite}
.fita__linha--inv{animation-direction:reverse;animation-duration:38s}
.fita span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--cinza);
  white-space:nowrap;
}
.fita__linha--inv span{color:var(--amarelo);opacity:.65}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ============================================================
   BLOCO: o painel. Alterna preto e osso.
   ============================================================ */
.bloco{padding:42px var(--pad) 34px;background:var(--fundo);color:var(--texto)}
.bloco--escuro{
  --fundo:var(--void);--texto:var(--branco);--fraco:var(--cinza);
  --borda:var(--linha);--ink:var(--branco);
}
.bloco--claro{
  --fundo:var(--osso);--texto:var(--tinta);--fraco:var(--tinta-2);
  --borda:var(--tinta);--ink:var(--tinta);
  color-scheme:light;
  position:relative;
}
/* retícula de mangá no painel claro */
.bloco--claro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--tinta) 1px, transparent 1.2px);
  background-size:9px 9px;opacity:.07;
}
.bloco > *{position:relative}

.cab{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cab__n{
  font-family:var(--f-mono);font-size:10.5px;color:var(--amarelo);font-weight:800;
  border:1px solid currentColor;padding:4px 6px;line-height:1;
}
.bloco--claro .cab__n{color:var(--tinta);background:var(--amarelo);border-color:var(--tinta)}
.cab__t{
  font-size:clamp(30px,10vw,54px);line-height:.92;letter-spacing:-.025em;
  font-variation-settings:"wdth" 122;
}
.cab__c{
  margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--fraco);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cab__c b{color:var(--amarelo)}

/* ============================================================
   01 · ACERVO
   ============================================================ */
.ferramentas{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.filtros{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  flex:1 1 auto;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
}
.filtros::-webkit-scrollbar{display:none}
.visao{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--borda);padding:8px 10px;color:var(--fraco);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;
}
.visao b{font-weight:600}
.visao:hover{color:var(--texto);border-color:var(--fraco)}

.galeria{list-style:none}
/* modo FITA: filmstrip que arrasta */
.galeria.is-fita{
  display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 8px;
}
.galeria.is-fita::-webkit-scrollbar{display:none}
.galeria.is-fita .peca{flex:0 0 76%;max-width:330px;scroll-snap-align:center}
/* modo GRADE */
.galeria.is-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.peca{
  margin:0;position:relative;background:var(--carvao);
  border:1px solid var(--linha);overflow:hidden;
}
.bloco--claro .peca{border-color:var(--tinta)}
/* height:auto é obrigatório: sem ele o atributo height do <img> vence o aspect-ratio */
.peca img{aspect-ratio:409/726;object-fit:cover;width:100%;height:auto;transition:transform .55s ease}
.peca:hover img{transform:scale(1.05)}
.peca figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 10px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.94) 60%);
  display:flex;flex-direction:column;gap:3px;color:var(--branco);
}
.peca figcaption b{font-size:12px;font-weight:900;letter-spacing:.01em;line-height:1.15}
.peca figcaption span{font-family:var(--f-mono);font-size:8px;color:var(--amarelo)}
.peca[hidden]{display:none}

.vazio{
  margin:26px 0;text-align:center;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.2em;color:var(--fraco);
}

.pos-galeria{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.dica{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:var(--cinza-2);
  animation:cutuca 2.4s ease-in-out infinite;
}
@keyframes cutuca{50%{transform:translateX(6px);opacity:.55}}
.dica.is-off{display:none}
.link-ig{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-family:var(--f-mono);font-size:10px;color:var(--fraco);
  border-bottom:1px solid var(--borda);padding-bottom:5px;
}
.link-ig:hover{color:var(--amarelo);border-color:var(--amarelo)}

/* ============================================================
   02 · TRAÇO: ficha de personagem. Tinta preta sobre osso.
   ============================================================ */
.stats{display:grid;gap:16px}
.stat{
  border:2px solid var(--tinta);background:var(--osso);
  box-shadow:5px 5px 0 var(--tinta);padding:12px 13px 13px;
}
.stat__topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.stat__topo b{font-size:15px;font-weight:900;letter-spacing:.01em;font-variation-settings:"wdth" 112}
.stat__topo i{
  font-style:normal;font-family:var(--f-mono);font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.stat__pista{
  height:34px;border:1px solid var(--tinta);background:var(--papel);overflow:hidden;
}
.stat__barra{
  display:block;height:100%;width:0;
  transition:width 1.1s cubic-bezier(.4,0,.2,1);
}
.stats.is-on .stat__barra{width:var(--v)}
.stat p{margin:9px 0 0;font-family:var(--f-mono);font-size:9px;line-height:1.6;color:var(--tinta-2)}

/* as quatro técnicas, desenhadas: não são imagens */
.am--black{background:var(--tinta)}
.am--whip{
  background-color:transparent;
  background-image:radial-gradient(var(--tinta) 1.5px, transparent 1.7px);
  background-size:6px 6px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 20%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.18) 82%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0 20%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.18) 82%,transparent 100%);
}
.am--fine{background-image:repeating-linear-gradient(78deg, var(--tinta) 0 1px, transparent 1px 8px)}
.am--dark{
  background-image:
    radial-gradient(circle at 22% 50%, var(--tinta) 0 46%, transparent 47%),
    radial-gradient(var(--tinta) 2px, transparent 2.2px);
  background-size:auto, 7px 7px;
}

/* ============================================================
   03 · ROTA: as etapas
   ============================================================ */
.rota{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.marco{
  position:relative;padding:0 0 26px 30px;
  display:grid;gap:3px;
}
.marco::before{                 /* trilho */
  content:"";position:absolute;left:6px;top:6px;bottom:-6px;width:2px;
  background:var(--linha-2);
}
.marco:last-child::before{display:none}
.marco::after{                  /* nó */
  content:"";position:absolute;left:0;top:2px;width:14px;height:14px;
  background:var(--carvao);border:2px solid var(--linha-2);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.marco.is-on::after{background:var(--amarelo);border-color:var(--amarelo);transform:scale(1.18)}
.marco.is-on::before{background:linear-gradient(var(--amarelo),var(--linha-2))}
.marco b{
  font-family:var(--f-mono);font-size:9.5px;color:var(--amarelo);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
}
.marco strong{font-size:19px;font-weight:900;letter-spacing:.01em;font-variation-settings:"wdth" 114;line-height:1.05}
.marco span{font-family:var(--f-mono);font-size:9px;line-height:1.6;color:var(--cinza-2)}

/* ============================================================
   04 · MONTAR
   ============================================================ */
.config{display:grid;gap:24px}
.config__campos{display:grid;gap:20px}
.grupo{border:0;margin:0;padding:0;display:grid;gap:9px}
.grupo legend{
  padding:0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  font-weight:800;color:var(--tinta);
  background:var(--amarelo);border:1px solid var(--tinta);padding:4px 8px;
}
.chips--sel{gap:6px}
.bloco--claro .chip{background:var(--papel)}
.bloco--claro .chip:hover{border-color:var(--tinta);color:var(--tinta)}
.bloco--claro .chip.is-on{background:var(--tinta);border-color:var(--tinta);color:var(--osso)}

.entradas{display:grid;gap:13px}
.entrada{display:grid;gap:7px}
.entrada span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;font-weight:800;
  color:var(--tinta);background:var(--amarelo);border:1px solid var(--tinta);padding:4px 8px;justify-self:start;
}
.entrada input{
  width:100%;padding:14px;background:var(--papel);border:2px solid var(--tinta);
  color:var(--tinta);font-family:var(--f-disp);font-size:15px;border-radius:0;
}
.entrada input::placeholder{color:var(--cinza)}
.entrada input:focus{outline:none;box-shadow:4px 4px 0 var(--amarelo)}

/* o cartão de resumo do orçamento */
.bib{
  border:2px solid var(--tinta);background:var(--papel);
  box-shadow:6px 6px 0 var(--tinta);
  display:grid;
}
.bib__topo{
  display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
  background:var(--tinta);color:var(--osso);
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.18em;
}
.bib__dl{margin:0;padding:16px 14px 14px;display:grid;gap:10px}
.bib__dl div{display:flex;align-items:baseline;gap:8px}
.bib__dl dt{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--tinta-2);
  flex:0 0 auto;
}
.bib__dl .leader{flex:1 1 auto;border-bottom:1px dotted var(--risco);transform:translateY(-3px)}
.bib__dl dd{
  margin:0;font-size:13px;font-weight:900;text-align:right;letter-spacing:.01em;
  flex:0 0 auto;max-width:62%;line-height:1.2;
}
.bib__serra{
  height:12px;
  background:radial-gradient(circle at 6px -2px, transparent 0 6px, var(--tinta) 6px 7px, transparent 7px);
  background-size:12px 12px;background-repeat:repeat-x;
  border-top:1px dashed var(--tinta);
}
.bib__pe{
  display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.18em;color:var(--tinta-2);
}

.config__saida{display:grid;gap:14px;align-content:start}
.nota{
  margin:0;font-family:var(--f-mono);font-size:9px;line-height:1.6;
  color:var(--fraco);text-align:center;
}

/* ============================================================
   05 · MANUAL
   ============================================================ */
.sanfona{display:grid;gap:6px}
.sanfona details{border:1px solid var(--linha);background:var(--carvao)}
.sanfona details[open]{border-color:var(--linha-2)}
.sanfona summary{
  list-style:none;cursor:pointer;padding:15px 14px;
  font-size:13.5px;font-weight:900;letter-spacing:.02em;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary::after{content:"+";color:var(--amarelo);font-size:19px;line-height:1;font-weight:400}
.sanfona details[open] summary::after{content:"\2212"}   /* sinal de menos, nao travessao */
.sanfona details[open] summary{border-bottom:1px solid var(--linha)}
.sanfona ul{margin:0;padding:13px 14px 16px;list-style:none;display:grid;gap:8px}
.sanfona li{
  font-family:var(--f-mono);font-size:9.5px;line-height:1.65;color:var(--cinza);
  padding-left:15px;position:relative;
}
.sanfona li::before{
  content:"";position:absolute;left:0;top:6px;width:6px;height:6px;background:var(--amarelo);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ============================================================
   RODAPÉ: o bloco amarelo
   ============================================================ */
.rodape{
  background:var(--amarelo);color:var(--tinta);
  padding:28px var(--pad) 116px;display:grid;gap:20px;  /* o extra cobre a barra fixa */
  border-top:2px solid var(--tinta);
}
.rodape__topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rodape__mascote{width:96px;height:auto;flex:0 0 auto}
.rodape__chamada{display:grid;gap:11px;justify-items:start}
.rodape__chamada b{
  font-size:clamp(32px,12vw,56px);line-height:.9;font-weight:900;
  font-variation-settings:"wdth" 124;letter-spacing:-.02em;
}
.rodape__links{display:flex;flex-wrap:wrap;gap:7px}
.rodape__links a{
  font-family:var(--f-mono);font-size:9.5px;padding:9px 12px;
  border:1px solid var(--tinta);color:var(--tinta);
}
.rodape__links a:hover{background:var(--tinta);color:var(--amarelo)}
.rodape__pe{
  display:grid;gap:5px;font-family:var(--f-mono);font-size:8.5px;
  color:rgba(0,0,0,.68);border-top:1px solid rgba(0,0,0,.25);padding-top:14px;
}
.rodape__pe i{font-style:normal}

/* ============================================================
   BARRA FIXA: só no celular
   ============================================================ */
.fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px var(--gut) calc(15px + env(safe-area-inset-bottom));
  background:var(--amarelo);color:var(--void);
  font-weight:900;font-size:14px;letter-spacing:.05em;
  font-variation-settings:"wdth" 112;
  border-top:2px solid var(--tinta);
}
.fixa:active{background:var(--acido)}

/* ============================================================
   REVELAR AO ROLAR
   ============================================================ */
.rev{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rev.is-in{opacity:1;transform:none}

/* ============================================================
   TABLET / DESKTOP
   ============================================================ */
@media (min-width:700px){
  :root{--gut:30px}
  .fixa{display:none}
  .rodape{padding-bottom:34px}

  .capa{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;gap:0 34px;
    padding:34px var(--pad) 58px;
  }
  .capa__base{grid-column:1;grid-row:1;margin-top:0;gap:20px}
  /* aqui o titulo vive numa coluna de ~metade da tela, entao a escala e outra.
     O -6px compensa o padding e o gap, que nao escalam com a vw. */
  .capa__titulo{font-size:clamp(28px,calc(5.6vw - 8px),64px)}
  .capa__palco{grid-column:2;grid-row:1;padding-top:0}
  .capa__mascote{width:min(94%,450px)}
  .capa__nome span{font-size:min(26vw,280px);-webkit-text-stroke-width:2.5px}
  .capa__brilho{left:70%;top:46%;width:min(72vw,780px)}
  .capa__grade{background-size:56px 56px}
  .selo--sp{right:8px;top:26px}
  .selo--n{left:8px;bottom:26px}
  .ficha{max-width:520px}

  .galeria.is-grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .galeria.is-fita .peca{flex:0 0 30%}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .stat__pista{height:44px}

  .rota{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .marco{padding:34px 8px 0 0}
  .marco::before{left:7px;top:7px;bottom:auto;right:-12px;width:auto;height:2px}
  .marco:last-child::before{display:none}
  .marco.is-on::before{background:linear-gradient(90deg,var(--amarelo),var(--linha-2))}
  .marco::after{top:0;left:0}

  .config{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:start}
  .entradas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .config__saida{position:sticky;top:78px}

  .sanfona{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}

  .rodape{grid-template-columns:1fr auto;align-items:end;gap:26px 34px}
  .rodape__topo{grid-column:1;grid-row:1}
  .rodape__links{grid-column:2;grid-row:1;justify-content:flex-end;align-self:center}
  .rodape__pe{grid-column:1 / -1;grid-row:2;grid-template-columns:1fr auto;gap:12px}
  .rodape__pe span:last-child{text-align:right}
  .rodape__mascote{width:120px}
}

@media (min-width:1000px){
  .bloco{padding-top:70px;padding-bottom:56px}
  .capa__mascote{width:min(88%,480px)}
  .cab{margin-bottom:26px}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .peca:hover img{transform:none}
  .rev{opacity:1;transform:none}
  .stats .stat__barra{width:var(--v)}
  .capa__mascote{transform:none}
}