/* =========================================================
   BLOCOS DE MARCA DAS PÁGINAS DE PROJETO
   Tipografia · Paleta de cores · Logo (abas interativas)
   O conteúdo vem dos dados de cada projeto (veja js/brand.js
   e o bloco <script id="brand-data"> em cada página).
   ========================================================= */

/* Cabeçalho de cada seção: número + título, linha embaixo */
.block { margin-top: calc(140 * var(--u)); }
.block--full { margin-top: calc(140 * var(--u)); }
.block__head {
  display: flex;
  align-items: baseline;
  gap: calc(24 * var(--u));
  padding-bottom: calc(22 * var(--u));
  margin-bottom: calc(48 * var(--u));
  border-bottom: 2px solid var(--black);
}
.block__num {
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .26em;
  font-size: clamp(16px, 1.3vw, 25px);
}
.block__title {
  font-weight: 600;
  font-size: clamp(32px, 2.59vw, 49.6px);
  line-height: 1;
}
.block__lead {
  max-width: calc(860 * var(--u));
  margin: calc(-16 * var(--u)) 0 calc(48 * var(--u));
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 26px);
  line-height: 1.15;
}
.block__note {
  margin-left: auto;
  color: var(--muted);
  font-size: clamp(14px, 1vw, 19px);
  max-width: calc(420 * var(--u));
  text-align: right;
  line-height: 1.15;
}

/* Etiqueta em pílula (mesmo estilo dos botões, não clicável) */
.pill {
  display: inline-block;
  border: 2px solid var(--black);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--black);
  background: var(--white);
  color: var(--black);
  padding: calc(6 * var(--u)) calc(18 * var(--u));
  font-family: var(--font-button);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: max(10px, calc(12 * var(--u)));
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------- TIPOGRAFIA ---------- */
.type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: calc(34 * var(--u));
}
.type__card {
  min-width: 0;
  border: 2px solid var(--black);
  border-radius: calc(36 * var(--u));
  box-shadow: 10px 10px 0 var(--black);
  padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.type__card--dark { background: var(--black); color: var(--white); }
.type__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.type__name { font-size: clamp(26px, 2.2vw, 42px); line-height: 1; }
.type__use {
  margin-top: 6px;
  font-family: var(--font-display);
  color: var(--muted);
  font-size: clamp(14px, 1vw, 19px);
}
.type__card--name { justify-content: space-between; min-height: calc(260 * var(--u)); }
.type__name--big { font-weight: 800; font-size: clamp(34px, 3.4vw, 64px); line-height: .95; }
.type__source {
  border-top: 2px solid currentColor;
  padding-top: calc(16 * var(--u));
  color: var(--muted);
  font-size: clamp(13px, .95vw, 18px);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.type__aa { font-size: clamp(110px, 11vw, 210px); line-height: .8; letter-spacing: -.02em; }
.type__weights { display: flex; flex-wrap: wrap; gap: 10px; }
.type__weights span {
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: calc(5 * var(--u)) calc(16 * var(--u));
  font-size: clamp(13px, .95vw, 18px);
}
.type__glyphs {
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.3;
  overflow-wrap: anywhere;
  border-top: 2px solid currentColor;
  padding-top: calc(20 * var(--u));
}

/* ---------- PALETA (faixas de ponta a ponta) ---------- */
.palette-strip {
  --n: 5; /* número de cores (o JS preenche); com muitas cores, nomes e margens diminuem */
  display: flex;
  min-height: calc(560 * var(--u));
  border-block: 2px solid var(--black);
}
.palette-strip__c {
  flex: var(--w, 1);
  min-width: 0;
  background: var(--c);
  color: var(--t, var(--black));
  padding: calc(34 * var(--u)) calc(150 * var(--u) / max(5, var(--n)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: flex .5s cubic-bezier(.2, .7, .2, 1);
}
.palette-strip__c + .palette-strip__c { border-left: 2px solid var(--black); }
.palette-strip__c:hover { flex: calc(var(--w, 1) * 1.35); }
.palette-strip__name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  font-size: clamp(15px, calc(12vw / max(5, var(--n))), 46px);
  line-height: .95;
  hyphens: manual;
}
.palette-strip__codes {
  display: grid;
  gap: 4px;
  font-size: clamp(11px, calc(4.75vw / max(5, var(--n))), 18px);
  letter-spacing: .06em;
  line-height: 1.2;
}
.palette-strip__codes b { font-size: clamp(16px, 1.25vw, 24px); letter-spacing: .1em; }

/* ---------- LOGO: abas + troca de fundo + logo que reage ---------- */
.lab {
  border: 2px solid var(--black);
  border-radius: calc(36 * var(--u));
  box-shadow: 10px 10px 0 var(--black);
  overflow: hidden;
  background: var(--white);
}
.lab__tabs {
  position: relative;
  display: flex;
  gap: 6px;
  padding: calc(16 * var(--u));
  border-bottom: 2px solid var(--black);
  overflow-x: auto;
  scrollbar-width: none;
}
.lab__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  padding: calc(12 * var(--u)) calc(26 * var(--u));
  font-family: var(--font-button);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: max(10px, calc(13 * var(--u)));
  white-space: nowrap;
  color: var(--black);
}
.lab__ink {
  position: absolute;
  z-index: 0;
  top: calc(16 * var(--u));
  height: calc(100% - 32 * var(--u));
  left: 0;
  width: 0;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--black);
  transition: left .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.lab__short { display: none; }

.lab__stage {
  --grid: rgba(0, 0, 0, .09);
  position: relative;
  min-height: calc(600 * var(--u));
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--stage, #f4f4f4);
  transition: background-color .5s ease;
  perspective: 900px;
  touch-action: pan-y;
}
.lab__stage.is-dark { --grid: rgba(255, 255, 255, .14); }
.lab__stage.has-image { --grid: rgba(255, 255, 255, .28); }
.lab__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: calc(40 * var(--u)) calc(40 * var(--u));
  background-position: center;
}
.lab__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 38%);
  opacity: 0;
  transition: opacity .4s ease;
}
.lab__stage:hover .lab__glow { opacity: 1; }

.lab__panel {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.97);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s;
}
.lab__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .1s, transform .6s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s;
}

/* cor do logo: o JS liga "logo escuro" ou "logo claro" conforme o fundo */
.lab__stage.logo-to-dark .lab__art { filter: brightness(0); }
.lab__stage.logo-to-light .lab__art { filter: brightness(0) invert(1); }
.lab__art { transition: filter .4s ease; }

.lab__logo {
  width: min(56%, 640px);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform .25s ease-out;
  cursor: grab;
  user-select: none;
}
.lab__logo img { width: 100%; pointer-events: none; }
.lab__logo.is-pop { animation: lab-pop .65s cubic-bezier(.34, 1.56, .64, 1); }
.lab__logo.is-squash { animation: lab-squash .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lab-pop {
  0% { scale: 1; }
  30% { scale: .86; rotate: -4deg; }
  65% { scale: 1.08; rotate: 2deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes lab-squash {
  0% { scale: 1 1; }
  20% { scale: 1.18 .82; }
  45% { scale: .9 1.12; translate: 0 -18px; }
  70% { scale: 1.04 .96; translate: 0 0; }
  100% { scale: 1 1; }
}

/* Área de proteção */
.lab__logo--guide { width: min(64%, 720px); }
.lab__guide { position: relative; width: 100%; padding: calc(60 * var(--u)); }
.lab__guide img { width: 100%; }
.lab__guide::before,
.lab__guide::after { content: ""; position: absolute; pointer-events: none; }
.lab__guide::before { inset: 0; border: 2px dashed var(--pink); }
.lab__guide::after { inset: calc(60 * var(--u)); border: 1px solid var(--blue); }
.lab__panel.is-active .lab__guide::before { animation: lab-draw .9s cubic-bezier(.2, .7, .2, 1) both .2s; }
.lab__panel.is-active .lab__guide::after { animation: lab-draw .9s cubic-bezier(.2, .7, .2, 1) both .45s; }
@keyframes lab-draw { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
.lab__x {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  min-width: 26px;
  min-height: 26px;
  font-weight: 800;
  color: var(--pink);
  font-size: clamp(14px, 1.2vw, 22px);
  opacity: 0;
  transform: scale(.4);
}
.lab__panel.is-active .lab__x { animation: lab-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.lab__x--t { top: 0; left: 50%; translate: -50% 0; animation-delay: .7s !important; }
.lab__x--r { right: 0; top: 50%; translate: 0 -50%; animation-delay: .8s !important; }
.lab__x--b { bottom: 0; left: 50%; translate: -50% 0; animation-delay: .9s !important; }
.lab__x--l { left: 0; top: 50%; translate: 0 -50%; animation-delay: 1s !important; }
@keyframes lab-in { to { opacity: 1; transform: none; } }
.lab__caption {
  position: absolute;
  left: 50%;
  bottom: calc(26 * var(--u));
  translate: -50% 0;
  max-width: 90%;
  text-align: center;
  white-space: normal;
}

/* Tamanho mínimo */
.lab__sizes { display: flex; align-items: flex-end; gap: calc(70 * var(--u)); flex-wrap: wrap; justify-content: center; padding: 30px; }
.lab__sizes figure { margin: 0; display: grid; gap: 14px; justify-items: center; opacity: 0; transform: translateY(30px); }
.lab__panel.is-active .lab__sizes figure { animation: lab-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.lab__panel.is-active .lab__sizes figure:nth-child(2) { animation-delay: .12s; }
.lab__panel.is-active .lab__sizes figure:nth-child(3) { animation-delay: .24s; }
.lab__panel.is-active .lab__sizes figure:nth-child(4) { animation-delay: .36s; }
.lab__sizes figure:hover img { animation: lab-squash .7s cubic-bezier(.34, 1.56, .64, 1); }

/* Barra de baixo: dica + cores */
.lab__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: calc(20 * var(--u)) calc(26 * var(--u));
  border-top: 2px solid var(--black);
}
.lab__hint { margin-right: auto; color: var(--muted); font-size: clamp(14px, 1vw, 18px); }
.lab__hint b { color: var(--black); }
.lab__colors { display: flex; gap: 10px; flex-wrap: wrap; }
.lab__color {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--c);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.lab__color:hover { transform: translate(-2px, -2px) scale(1.08); box-shadow: 5px 5px 0 var(--black); }
.lab__color[aria-pressed="true"] { transform: scale(1.15); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--black); }
.lab__tab:focus-visible, .lab__color:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* ---------- Responsivo ---------- */
@media (max-width: 800px) {
  .block__head { flex-wrap: wrap; }
  .block__note { margin-left: 0; text-align: left; max-width: none; }
  .palette-strip { flex-direction: column; min-height: 0; }
  .palette-strip__c { min-height: 150px; padding: 26px var(--gutter); }
  .palette-strip__name { font-size: clamp(22px, 6.5vw, 34px); }
  .palette-strip__codes { font-size: 14px; }
  .palette-strip__c + .palette-strip__c { border-left: 0; border-top: 2px solid var(--black); }
  .lab__stage { min-height: 360px; }
  .lab__logo { width: 76%; }
  .lab__logo--guide { width: 88%; }
  .lab__guide { padding: 34px; }
  .lab__guide::after { inset: 34px; }
  .lab__x { width: 34px; height: 34px; }
  .lab__tab { padding: 10px 14px; }
  .lab__long { display: none; }
  .lab__short { display: inline; }
  .lab__hint { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab *, .lab *::before, .lab *::after { animation: none !important; transition: none !important; }
  .lab__x, .lab__sizes figure { opacity: 1; transform: none; }
}

/* ---------- PALETA em faixas empilhadas (paletteStyle: "bands") ---------- */
.pal-bands { border-block: 2px solid var(--black); overflow: hidden; }
.pal-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: calc(28 * var(--u));
  width: 100%;
  min-height: calc(150 * var(--u));
  padding: calc(18 * var(--u)) var(--gutter);
  border: 0;
  background: var(--c);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: translateX(var(--from, -100%));
  transition: transform .9s cubic-bezier(.77, 0, .18, 1), min-height .45s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
  transition-delay: calc(var(--i) * .07s), 0s, 0s;
}
.pal-band--rev { --from: 100%; }
.pal-band.is-in { transform: none; }
.pal-band:hover { min-height: calc(200 * var(--u)); filter: saturate(1.08); }
.pal-band:focus-visible { outline: 4px solid var(--black); outline-offset: -6px; }
.pal-band > :first-child { justify-self: end; text-align: right; }
.pal-band > :last-child { justify-self: start; text-align: left; }
.pal-band__name {
  font-family: var(--pf, var(--font-display));
  text-transform: uppercase;
  line-height: .95;
  display: flex;
  flex-direction: column;
}
.pal-band > .pal-band__name:first-child { align-items: flex-end; }
.pal-band__name b { font-weight: 700; font-size: clamp(30px, 3.4vw, 64px); letter-spacing: .01em; }
.pal-band__name span { font-weight: 300; font-size: clamp(30px, 3.4vw, 64px); letter-spacing: .01em; }
.pal-band__codes {
  font-family: var(--pf, var(--font-display));
  display: grid;
  gap: 2px;
  font-size: clamp(12px, .95vw, 18px);
  letter-spacing: .04em;
  line-height: 1.2;
}
.pal-band__codes b { font-weight: 700; }
/* o nome "acende" logo depois que a faixa entra */
.pal-band__name, .pal-band__codes { opacity: 0; transition: opacity .6s ease calc(var(--i) * .07s + .55s); }
.pal-band.is-in .pal-band__name, .pal-band.is-in .pal-band__codes { opacity: 1; }
.pal-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 70;
  color: #fff;
  visibility: hidden;
  translate: -50% 140%;
  transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .45s;
}
.pal-toast.is-on { translate: -50% 0; visibility: visible; transition: translate .45s cubic-bezier(.34, 1.56, .64, 1); }
@media (max-width: 800px) {
  .pal-band { min-height: 120px; column-gap: 16px; }
  .pal-band:hover { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .pal-band { transform: none; transition: none; }
  .pal-band__name, .pal-band__codes { opacity: 1; transition: none; }
}