/* Página /marca/ — a história do g·b. Só esta página; tudo sob .marca.
   Depende de tokens.css (cores, fontes, --max, --gutter, --raio, --pingo).
   Açafrão/ocre (--pingo) só em elementos gráficos, nunca em texto. */

.marca{
  --marca-texto:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --marca-coluna:40rem;
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(56px,8vw,112px);
  color:var(--tinta);font-family:var(--texto);font-size:var(--marca-texto);line-height:1.65;
}
.marca *{box-sizing:border-box}
.marca a{color:var(--bordo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.marca a:hover{text-decoration-thickness:2px}
.marca a:focus-visible{outline:2px solid var(--bordo);outline-offset:3px;border-radius:2px}
.marca cite{font-style:italic}
.marca b{font-weight:600;color:var(--bordo)}

/* rótulos (IBM Plex Mono) */
.marca-rotulo{margin:0 0 1rem;font-family:var(--mono);font-weight:500;font-size:.75rem;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}

/* ---------- topo */
.marca-topo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;
  padding:clamp(48px,8vw,112px) 0 clamp(40px,6vw,80px);border-bottom:1px solid var(--linha)}
.marca-topo .marca-rotulo::before{content:"";display:inline-block;width:.6em;height:.6em;margin:0 .7em .08em 0;
  border-radius:50%;background:var(--pingo);vertical-align:middle}
.marca h1{margin:0 0 .45em;font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,1.3rem + 4.4vw,5.25rem);
  line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.marca h1 em{display:block;font-style:normal;color:var(--bordo)}
.marca-lede{margin:0;max-width:34ch;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;text-wrap:pretty}

.marca-heroi{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(24px,4vw,48px);
  background:var(--marfim);border:1px solid var(--linha);border-radius:var(--raio);color:var(--bordo)}
.marca-heroi__simbolo{width:min(100%,300px);cursor:pointer}
.marca-heroi .marca-gb{display:block;width:100%;height:auto;overflow:visible}
.marca-heroi figcaption{font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.04em;color:var(--tinta-2);text-align:center;max-width:30ch}

/* ---------- índice */
.marca-indice{padding:24px 0 28px;border-bottom:1px solid var(--linha)}
.marca-indice .marca-rotulo{margin-bottom:.75rem}
.marca-indice ol{margin:0;padding:0;list-style:none;counter-reset:ind;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.marca-indice li{counter-increment:ind;font-family:var(--display);font-size:1rem;line-height:1.4}
.marca-indice li::before{content:counter(ind,decimal-leading-zero);margin-right:.5em;font-family:var(--mono);font-size:.75rem;color:var(--tinta-2)}
.marca-indice a{color:var(--tinta);text-decoration:none}
.marca-indice a:hover{color:var(--bordo);text-decoration:underline}

/* ---------- seções */
.marca-secao{display:grid;grid-template-columns:minmax(48px,140px) minmax(0,1fr);gap:var(--gutter);
  padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px);border-bottom:1px solid var(--linha);scroll-margin-top:24px}
.marca-num{position:sticky;top:96px;align-self:start;margin:.55rem 0 0;font-family:var(--mono);font-weight:500;
  font-size:.875rem;letter-spacing:.08em;color:var(--bordo)}
.marca-num::after{content:"";display:block;width:28px;height:2px;margin-top:.6rem;background:var(--bordo)}
.marca-secao__corpo{min-width:0}
.marca h2{margin:0 0 .8em;max-width:var(--marca-coluna);font-family:var(--display);font-weight:500;
  font-size:clamp(1.75rem,1.2rem + 1.8vw,2.625rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.marca-secao__corpo>p{max-width:var(--marca-coluna);margin:0 0 1.1em;text-wrap:pretty;hanging-punctuation:first}

/* ---------- figuras */
.marca-figura{margin:2rem 0 2.5rem}
.marca-figura img{display:block;width:100%;height:auto;border-radius:var(--raio)}
.marca-figura>img{border:1px solid var(--linha);background:var(--marfim)}
.marca-figura figcaption{max-width:var(--marca-coluna);margin-top:.7rem;text-wrap:pretty;font-size:.9375rem;line-height:1.5;color:var(--tinta-2)}
.marca-figura--quadrada{max-width:520px}
.marca-rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:var(--marfim);-webkit-overflow-scrolling:touch}
.marca-rolagem img{min-width:760px;border-radius:0}
.marca-rolagem:focus-visible{outline:2px solid var(--bordo);outline-offset:3px}
.marca-figura--media{max-width:860px}
.marca-figura--diagrama>img{padding:clamp(18px,3vw,36px);object-fit:contain}
.marca-figura--diagrama>img[src$="gb-rotacional.svg"]{max-width:560px}
.marca-figura--wordmark{padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px) clamp(20px,3vw,32px);
  background:var(--marfim);border:1px solid var(--linha);border-radius:var(--raio)}
.marca-wordmark{display:block;width:min(100%,480px);height:auto;color:var(--tinta)}
.marca-figura--wordmark figcaption{margin-top:1.25rem}

.marca-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.5vw,16px);max-width:720px}
.marca-cartao{margin:0}
.marca-cartao img{border:1px solid var(--linha)}
.marca-cartao figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--tinta-2);text-align:center}

/* ---------- regra de decisão */
.marca-regra{max-width:var(--marca-coluna);margin:1.5rem 0 2.5rem;padding:clamp(20px,3vw,32px);
  background:var(--marfim);border:1px solid var(--linha);border-left:4px solid var(--bordo);border-radius:var(--raio)}
.marca-regra ol{margin:0;padding:0;list-style:none;counter-reset:regra}
.marca-regra li{counter-increment:regra;position:relative;padding-left:2.4rem;margin:0 0 .75em;font-size:1.0625rem;line-height:1.55}
.marca-regra li:last-child{margin-bottom:0}
.marca-regra li::before{content:counter(regra);position:absolute;left:0;top:.05em;width:1.6rem;height:1.6rem;border-radius:50%;
  border:1.5px solid var(--bordo);color:var(--bordo);font-family:var(--mono);font-weight:500;font-size:.8rem;line-height:1.45rem;text-align:center}

/* ---------- placar */
.marca-placar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.5vw,32px);max-width:var(--marca-coluna);margin:0 0 2rem}
.marca-placar div{padding-top:.9rem;border-top:2px solid var(--tinta)}
.marca-placar dt{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,1.8rem + 2.6vw,3.75rem);line-height:1;letter-spacing:-.03em;color:var(--bordo)}
.marca-placar dd{margin:.5rem 0 0;font-family:var(--mono);font-size:.75rem;line-height:1.45;letter-spacing:.02em;color:var(--tinta-2)}

/* ---------- referências */
.marca-refs{display:grid;grid-template-columns:minmax(48px,140px) minmax(0,1fr);column-gap:var(--gutter);padding-top:clamp(40px,5vw,64px)}
.marca-refs h2.marca-rotulo{grid-row:span 2;margin:.2rem 0 0;font-size:.75rem;letter-spacing:.1em;line-height:1.4}
.marca-refs p{margin:0 0 .75rem;font-size:1rem;color:var(--tinta-2)}
.marca-refs ul{margin:0;padding:0;list-style:none;columns:2 18rem;column-gap:var(--gutter)}
.marca-refs li{break-inside:avoid;margin:0 0 .45rem;font-size:1rem;line-height:1.45}

/* ---------- telas estreitas */
@media (max-width:760px){
  .marca-topo{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .marca-heroi{flex-direction:row;justify-content:flex-start;gap:20px;padding:20px}
  .marca-heroi__simbolo{width:112px;flex:none}
  .marca-heroi figcaption{text-align:left}
  .marca-secao,.marca-refs{grid-template-columns:1fr;gap:0}
  .marca-num{position:static;margin:0 0 .75rem}
  .marca-num::after{display:none}
  .marca-refs h2.marca-rotulo{margin-bottom:.5rem}
  .marca-indice ol{gap:.4rem 1.25rem}
}
@media (max-width:520px){
  .marca-placar{grid-template-columns:1fr;gap:0}
  .marca-placar div{display:grid;grid-template-columns:4.5rem 1fr;align-items:baseline;gap:1rem;padding:.75rem 0;border-top:1px solid var(--linha)}
  .marca-placar div:first-child{border-top:2px solid var(--tinta)}
  .marca-placar dt{font-size:2.25rem}
  .marca-placar dd{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .marca-heroi__simbolo{cursor:default}
}
@media print{
  .marca-indice,.marca-heroi figcaption{display:none}
  .marca-num{position:static}
}