/* ==========================================================================
   temp2.css — folha independente da página /temp2.
   Não compartilha nada com style.css; o único arquivo em comum é fonts.css.

   Direção: DOSSIÊ. Um caderno técnico de campo — pauta rígida, fios de
   cabelo, numeração visível, serifa gigante e uma única cor de sinal
   (brasa laranja, a cor da obra e a cor do Orange Pi que hospeda tudo).
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */

:root,
:root[data-theme="dark"] {
  --brasa: #ff5c22;
  --brasa-alta: #ff8551;
  --brasa-fraca: rgba(255, 92, 34, .14);
  --brasa-fio: rgba(255, 92, 34, .38);

  --fundo: #0a0a0b;
  --fundo-2: #0e0f11;
  --papel: #141518;
  --papel-alto: #1a1c20;
  --linha: #26282d;
  --linha-forte: #34373d;

  --tinta: #eeebe4;
  --tinta-2: #a09c93;
  --tinta-3: #6d6a63;

  --grao: .42;
  --retrato: grayscale(1) contrast(1.08) brightness(.96);
  --sombra: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --realce: rgba(255, 255, 255, .04);
}

/* --- claro: papel quente, tinta quase preta, mesma brasa ---------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --brasa: #e8420a;
    --brasa-alta: #c53605;
    --brasa-fraca: rgba(232, 66, 10, .10);
    --brasa-fio: rgba(232, 66, 10, .34);

    --fundo: #f3f0e8;
    --fundo-2: #eae6dc;
    --papel: #fbf9f4;
    --papel-alto: #fffefb;
    --linha: #dbd5c8;
    --linha-forte: #c6bfae;

    --tinta: #16150f;
    --tinta-2: #6a6457;
    --tinta-3: #928c7d;

    --grao: .22;
    --retrato: grayscale(1) contrast(1.05);
    --sombra: 0 22px 50px -32px rgba(38, 32, 18, .48);
    --realce: rgba(20, 16, 8, .03);
  }
}

:root[data-theme="light"] {
  --brasa: #e8420a;
  --brasa-alta: #c53605;
  --brasa-fraca: rgba(232, 66, 10, .10);
  --brasa-fio: rgba(232, 66, 10, .34);

  --fundo: #f3f0e8;
  --fundo-2: #eae6dc;
  --papel: #fbf9f4;
  --papel-alto: #fffefb;
  --linha: #dbd5c8;
  --linha-forte: #c6bfae;

  --tinta: #16150f;
  --tinta-2: #6a6457;
  --tinta-3: #928c7d;

  --grao: .22;
  --retrato: grayscale(1) contrast(1.05);
  --sombra: 0 22px 50px -32px rgba(38, 32, 18, .48);
  --realce: rgba(20, 16, 8, .03);
}

:root {
  --serifa: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --eixo: 1180px;
  --fio: 1px solid var(--linha);
  --canto: 3px;
  --t: 260ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------- 2. Fundações */

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

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.travado { overflow: hidden; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grão fino por cima de tudo: tira o aspecto de tela lisa. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grao);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--brasa); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--brasa);
  color: #fff;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: .78rem;
}
.pular:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------- 3. Tipografia */

h1, h2, h3, h4 {
  font-family: var(--serifa);
  font-weight: 400;
  letter-spacing: -.012em;
  margin: 0;
  line-height: 1.02;
}

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.rotulo {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
}

.eixo {
  width: min(var(--eixo), 100% - 44px);
  margin-inline: auto;
}
.eixo--largo { width: min(1420px, 100% - 44px); }

/* --------------------------------------------------- 4. Topo e navegação */

.progresso {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--brasa);
  z-index: 55;
}

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fundo) 84%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--fio);
}

.topo .eixo--largo {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 58px;
}

.marca {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.marca b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--brasa);
  color: #fff;
  font-family: var(--serifa);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 2px;
}
.marca span { color: var(--tinta-3); letter-spacing: .12em; }

.nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.nav a {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--canto);
  transition: color var(--t), background var(--t);
}
.nav a:hover { color: var(--tinta); background: var(--realce); }
.nav a.atual { color: var(--brasa); }

.btn-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: none;
  border: var(--fio);
  border-radius: var(--canto);
  cursor: pointer;
  color: var(--tinta-2);
  transition: color var(--t), border-color var(--t);
}
.btn-icone:hover { color: var(--brasa); border-color: var(--brasa-fio); }
.btn-icone svg { width: 16px; height: 16px; }
.i-lua { display: none; }
:root[data-theme="dark"] .i-sol { display: none; }
:root[data-theme="dark"] .i-lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sol { display: none; }
  :root:not([data-theme="light"]) .i-lua { display: block; }
}

/* Trilho lateral de índice — só quando sobra margem de verdade. */
.trilho {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.trilho a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--tinta-3);
  text-decoration: none;
  transition: color var(--t);
}
.trilho a i {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width var(--t), background var(--t);
}
.trilho a span {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t), transform var(--t);
  white-space: nowrap;
  text-transform: uppercase;
}
.trilho a:hover { color: var(--tinta); }
.trilho a:hover span { opacity: 1; transform: none; }
.trilho a.atual { color: var(--brasa); }
.trilho a.atual i { width: 26px; }
.trilho a.atual span { opacity: 1; transform: none; }

@media (min-width: 1400px) { .trilho { display: flex; } }

/* -------------------------------------------------------------- 5. Hero */

.hero {
  position: relative;
  padding: clamp(46px, 9vh, 90px) 0 0;
  overflow: hidden;
}

/* Pauta milimetrada + brasa difusa atrás do nome. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 78% 8%, var(--brasa-fraca), transparent 68%),
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 88px 100%;
  opacity: .5;
  mask-image: linear-gradient(180deg, #000 4%, transparent 82%);
}

.hero__grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  padding-bottom: 44px;
}

.hero__lugar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.hero__lugar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha);
}

.titulo {
  font-size: clamp(64px, 13.5vw, 178px);
  line-height: .82;
  letter-spacing: -.035em;
  margin: 0 0 4px;
}
.titulo em {
  display: block;
  font-style: italic;
  margin-left: clamp(18px, 7vw, 108px);
  color: var(--brasa);
}

.hero__lede {
  max-width: 54ch;
  margin: 26px 0 0;
  color: var(--tinta-2);
  font-size: 1.04rem;
}
.hero__lede strong { color: var(--tinta); font-weight: 500; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: var(--fio);
  border-radius: var(--canto);
  background: none;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.btn:hover { border-color: var(--brasa-fio); color: var(--brasa); transform: translateY(-1px); }
.btn svg { width: 13px; height: 13px; }

.btn--cheio {
  background: var(--brasa);
  border-color: var(--brasa);
  color: #fff;
}
.btn--cheio:hover {
  background: var(--brasa-alta);
  border-color: var(--brasa-alta);
  color: #fff;
}

/* Retrato: recorte fica sem moldura, foto quadrada ganha fio e trama. */
.hero__lado { display: grid; gap: 20px; }

.retrato {
  position: relative;
  margin: 0;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--retrato);
  transition: filter 420ms ease;
}
.retrato:hover img { filter: none; }

.retrato--recorte {
  border: 0;
  background: none;
  overflow: visible;
  aspect-ratio: auto;
  display: grid;
  justify-items: center;
}
.retrato--recorte::before {
  content: "";
  position: absolute;
  inset: 12% -6% -4%;
  background: radial-gradient(60% 50% at 50% 70%, var(--brasa-fraca), transparent 72%);
  pointer-events: none;
}
.retrato--recorte img {
  position: relative;
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  object-position: bottom;
  filter: var(--retrato);
  /* O recorte do PNG tem uma faixa opaca no rodape (sobra do fundo
     original); a mascara dissolve o retrato antes de chegar nela. */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 96%);
}
.retrato--recorte:hover img { filter: none; }

.ficha-pessoal { margin: 0; border-top: 1px solid var(--linha-forte); }
.ficha-pessoal > div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: var(--fio);
}
.ficha-pessoal dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-top: 2px;
}
.ficha-pessoal dd {
  margin: 0;
  font-size: .9rem;
  color: var(--tinta);
}

/* ------------------------------------------------------ 6. Faixa rolante */

.faixa {
  border-top: var(--fio);
  border-bottom: var(--fio);
  background: var(--fundo-2);
  overflow: hidden;
  padding: 11px 0;
}
.faixa__trilho {
  display: flex;
  width: max-content;
  animation: desliza 46s linear infinite;
}
.faixa__trilho b {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-inline: 16px;
  white-space: nowrap;
}
.faixa__trilho b::after {
  content: "·";
  margin-left: 32px;
  color: var(--brasa);
}
.faixa:hover .faixa__trilho { animation-play-state: paused; }

@keyframes desliza { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------- 7. Números */

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--fio);
}
.numeros li {
  padding: 26px 22px;
  border-right: var(--fio);
  position: relative;
}
.numeros li:last-child { border-right: 0; }
.numeros li::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 2px;
  background: var(--brasa);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms);
}
.numeros.is-in li::before { transform: scaleX(1); }
.numeros strong {
  display: block;
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1;
  letter-spacing: -.03em;
}
.numeros small {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

@media (max-width: 720px) {
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .numeros li:nth-child(2n) { border-right: 0; }
  .numeros li:nth-child(-n+2) { border-bottom: var(--fio); }
}

/* ------------------------------------------------- 8. Cabeça das seções */

.secao { padding: clamp(64px, 9vw, 112px) 0; }
/* o topo e grudado: o ancora precisa parar abaixo dele */
[id] { scroll-margin-top: 76px; }
@media (max-width: 900px) { [id] { scroll-margin-top: 104px; } }
.secao + .secao { border-top: var(--fio); }

.cabeca {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: clamp(16px, 4vw, 40px);
  align-items: start;
  margin-bottom: clamp(30px, 5vw, 52px);
}

.cabeca__n {
  font-family: var(--serifa);
  font-size: clamp(46px, 6vw, 76px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--linha-forte);
  letter-spacing: -.03em;
  user-select: none;
}

.cabeca h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.04;
  max-width: 19ch;
}
.cabeca h2 em { font-style: italic; color: var(--brasa); }

.cabeca__linha {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
}
.cabeca__linha::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha);
  transform: translateY(-3px);
}
.cabeca__nota {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--tinta-2);
  font-size: .95rem;
}

@media (max-width: 720px) {
  .cabeca { grid-template-columns: 1fr; gap: 10px; }
  .cabeca__n { font-size: 38px; }
}

/* ------------------------------------------------------------ 9. Sobre */

.prosa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 54px);
}
.prosa p { margin: 0 0 17px; color: var(--tinta-2); }
.prosa strong { color: var(--tinta); font-weight: 500; }
.prosa p.capitular::first-letter {
  float: left;
  font-family: var(--serifa);
  font-size: 3.5em;
  line-height: .78;
  padding: 6px 12px 0 0;
  color: var(--brasa);
}

.citacao {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--linha-forte);
  font-family: var(--serifa);
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--tinta);
}
.citacao span,
.citacao em { color: var(--brasa); font-style: italic; }

@media (max-width: 760px) { .prosa { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- 10. Parcerias */

.parcerias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  border-top: var(--fio);
}
.parceria {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 26px 28px 0;
  border-bottom: var(--fio);
  position: relative;
}
.parceria + .parceria { border-left: var(--fio); padding-left: 26px; }

.parceria__marca {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  overflow: hidden;
  position: relative;
}
.parceria__marca img { width: 100%; height: 100%; object-fit: cover; }
.sigla {
  position: absolute;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--tinta-3);
}
.parceria__marca img,
.presenca__marca img,
.lazer__foto img,
.proj__foto img { position: relative; }

.parceria h3 { font-size: 1.6rem; margin: 3px 0 6px; }
.parceria__area {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brasa);
  margin: 0;
}
.parceria__papel { margin: 0 0 8px; font-size: .95rem; }
.parceria__texto { margin: 0 0 14px; color: var(--tinta-2); font-size: .94rem; }
.parceria__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .parceria + .parceria { border-left: 0; padding-left: 0; }
  .parceria { padding-right: 0; }
}

/* ---------------------------------------------------- 11. Administração */

/* A régua expansível: uma linha por item, o resto atrás de um <details>.
   É a mesma gramática do índice de projetos — some a altura, não o conteúdo.
   Cada seção só define as colunas do seu summary. */

.regua { border-top: 1px solid var(--linha-forte); }

.regua > details { border-bottom: var(--fio); }

.regua summary {
  position: relative;
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 13px 10px 13px 4px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t), padding-left var(--t);
}
.regua summary::-webkit-details-marker { display: none; }
.regua summary::marker { content: ""; }

.regua summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brasa);
  transform: scaleY(0);
  transition: transform var(--t);
}
.regua summary:hover { background: var(--realce); padding-left: 12px; }
.regua summary:hover::before { transform: scaleY(1); }
.regua details[open] > summary { background: var(--realce); }
.regua details[open] > summary::before { transform: scaleY(1); }

.regua__n {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
}

.regua__sinal {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--tinta-3);
  transition: transform var(--t), color var(--t);
}
.regua__sinal svg { width: 12px; height: 12px; }
.regua summary:hover .regua__sinal { color: var(--brasa); }
.regua details[open] > summary .regua__sinal { transform: rotate(135deg); color: var(--brasa); }

.regua__mais {
  padding: 4px 10px 22px 18px;
  border-left: 2px solid var(--brasa-fio);
  margin-left: 4px;
}
.regua__mais > p {
  margin: 0 0 14px;
  max-width: 70ch;
  font-size: .9rem;
  color: var(--tinta-2);
}

/* --- 03 Administração --------------------------------------------------- */

.frentes summary {
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.9fr) 124px 22px;
}
.frente h3 { font-size: 1.32rem; }
.frente__resumo {
  margin: 0;
  font-size: .88rem;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frente__conta { text-align: right; font-size: .62rem; }

.frente__ia {
  margin: 0 0 16px;
  padding: 13px 15px;
  background: var(--brasa-fraca);
  border-left: 2px solid var(--brasa);
  font-size: .88rem;
  color: var(--tinta-2);
  max-width: 70ch;
}
.frente__ia b {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brasa);
  margin-bottom: 5px;
}
.frente__apoios .rotulo { margin-bottom: 8px; }

@media (max-width: 900px) {
  .frentes summary { grid-template-columns: 30px minmax(0, 1fr) 22px; }
  .frente__resumo, .frente__conta { display: none; }
}

/* -------------------------------------------------------- 12. Chips/tag */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: var(--fio);
  border-radius: 2px;
  background: none;
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .06em;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.tag i {
  font-style: normal;
  color: var(--tinta-3);
  font-size: .62rem;
}
a.tag, button.tag { cursor: pointer; transition: color var(--t), border-color var(--t), background var(--t); }
a.tag:hover, button.tag:hover { color: var(--brasa); border-color: var(--brasa-fio); }
button.tag[aria-pressed="true"] {
  background: var(--brasa);
  border-color: var(--brasa);
  color: #fff;
}
button.tag[aria-pressed="true"] i { color: rgba(255, 255, 255, .7); }
.tag--forte { border-color: var(--linha-forte); color: var(--tinta); }
.tag--vazia { border-style: dashed; color: var(--tinta-3); }

/* ------------------------------------------------------ 13. Competências */

/* Três blocos: o primeiro abre, os outros mostram uma prévia dos itens
   principais (montada no temp2.js a partir dos próprios chips em destaque). */

.habilidades { border-top: 1px solid var(--linha-forte); }

.hab-bloco { border-bottom: var(--fio); }
.hab-bloco > summary {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 20px;
  padding: 14px 10px 14px 4px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t), padding-left var(--t);
}
.hab-bloco > summary::-webkit-details-marker { display: none; }
.hab-bloco > summary::marker { content: ""; }
.hab-bloco > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brasa);
  transform: scaleY(0);
  transition: transform var(--t);
}
.hab-bloco > summary:hover { background: var(--realce); padding-left: 12px; }
.hab-bloco > summary:hover::before { transform: scaleY(1); }
.hab-bloco[open] > summary::before { transform: scaleY(1); }

.hab-bloco__nome {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brasa);
}
.hab-bloco__previa {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  color: var(--tinta-3);
}
.hab-bloco[open] .hab-bloco__previa { opacity: 0; }
.hab-bloco > summary .regua__sinal { justify-self: end; }
.hab-bloco[open] > summary .regua__sinal { transform: rotate(135deg); color: var(--brasa); }

.hab-bloco__corpo { padding-bottom: 10px; }
.hab-bloco__corpo .habilidade:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .hab-bloco > summary { grid-template-columns: minmax(0, 1fr) 30px; }
  .hab-bloco__previa { display: none; }
}
.habilidade {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 52px;
  gap: 20px;
  align-items: start;
  padding: 13px 0;
  border-bottom: var(--fio);
  transition: background var(--t);
}
.habilidade:hover { background: var(--realce); }
.habilidade h3 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.5;
  padding-top: 3px;
}
.habilidade h3 em {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
  margin-top: 2px;
}

/* Os chips ficam numa linha só; o botão abre o resto da linha. É daqui que
   vem a maior parte da altura que esta seção devolveu. */
.habilidade .chips {
  max-height: 28px;
  overflow: hidden;
}
/* "none" em vez de uma altura medida: dentro de um bloco fechado o Chrome
   pula o layout (content-visibility) e scrollHeight volta desatualizado. */
.habilidade.aberta .chips { max-height: none; }

.hab-mais {
  justify-self: end;
  align-self: start;
  padding: 3px 7px;
  border: var(--fio);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
  transition: color var(--t), border-color var(--t);
}
.hab-mais:hover { color: var(--brasa); border-color: var(--brasa-fio); }

@media (max-width: 720px) {
  .habilidade { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px 12px; }
  .habilidade h3 { grid-column: 1 / -1; }
}

/* ----------------------------------------------------- 14. Mídia digital */

.grupo + .grupo { margin-top: 30px; }
.grupo__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 6px;
}
.grupo__titulo::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.grupo__titulo b { font-weight: 400; color: var(--brasa); }

.presencas summary {
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.5fr) auto 22px;
}
.presenca--parado { opacity: .6; }

.presenca__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--fundo-2);
  overflow: hidden;
}
.presenca__marca img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presenca h4 {
  font-size: 1.22rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presenca__arroba {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--brasa);
}
.presenca__tema {
  margin: 0;
  font-size: .85rem;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.presenca__numeros {
  display: flex;
  align-items: baseline;
  gap: 14px;
  justify-self: end;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
.presenca__numeros b {
  font-family: var(--serifa);
  font-size: 1.24rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin-right: 3px;
}

.presenca__rodape {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.parado {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border: 1px dashed var(--linha-forte);
  padding: 2px 7px;
  border-radius: 2px;
}

.seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brasa);
  text-decoration: none;
}
.seta svg { width: 12px; height: 12px; transition: transform var(--t); }
.seta:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .presencas summary { grid-template-columns: 36px minmax(0, 1fr) 22px; }
  .presenca__tema, .presenca__numeros { display: none; }
}

/* --------------------------------------------------- 15. Fora do código */

.lazeres summary {
  grid-template-columns: 34px 44px minmax(0, 1fr) minmax(0, 1.5fr) 150px 22px;
}

.lazer__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--fundo-2);
  overflow: hidden;
}
.lazer__thumb img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 420ms ease;
}
.regua summary:hover .lazer__thumb img { filter: none; }

.lazer h3 { font-size: 1.32rem; }
.lazer__resumo {
  margin: 0;
  font-size: .88rem;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lazer__meta { text-align: right; font-size: .62rem; }

@media (max-width: 900px) {
  .lazeres summary { grid-template-columns: 30px 40px minmax(0, 1fr) 22px; }
  .lazer__resumo, .lazer__meta { display: none; }
}

/* ------------------------------------------------------------ 16. Abas */

.abas {
  display: flex;
  gap: 4px;
  border-bottom: var(--fio);
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  position: relative;
  background: none;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
  transition: color var(--t);
}
.aba::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brasa);
  transform: scaleX(0);
  transition: transform var(--t);
}
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] { color: var(--brasa); }
.aba[aria-selected="true"]::after { transform: scaleX(1); }
.aba b { font-weight: 400; color: var(--tinta-3); }

.painel:focus { outline: none; }
.painel__nota {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* -------------------------------------------------------- 17. Destaques */

.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.destaque {
  display: flex;
  flex-direction: column;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.destaque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brasa);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 340ms cubic-bezier(.22, .61, .36, 1);
  z-index: 2;
}
.destaque:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--linha-forte); }
.destaque:hover::before { transform: scaleX(1); }

.destaque__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fundo-2);
  display: grid;
  place-items: center;
  border-bottom: var(--fio);
  overflow: hidden;
}
.destaque__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.destaque__selo {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--brasa);
  color: #fff;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.destaque__corpo { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.destaque h3 { font-size: 1.45rem; }
.destaque__desc { margin: 0; font-size: .88rem; color: var(--tinta-2); }
.destaque .seta { margin-top: auto; padding-top: 10px; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.meta span { display: inline-flex; align-items: center; gap: 9px; }
.meta span + span::before { content: ""; width: 3px; height: 3px; background: var(--linha-forte); border-radius: 50%; }

/* ------------------------------------------------------ 18. Ferramentas */

.ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: var(--fio);
}

.busca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 260px;
  padding: 9px 12px;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  transition: border-color var(--t);
}
.busca:focus-within { border-color: var(--brasa-fio); }
.busca svg { width: 14px; height: 14px; color: var(--tinta-3); flex: none; }
.busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--mono);
  font-size: .76rem;
}
.busca input::placeholder { color: var(--tinta-3); }
.busca kbd {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--tinta-3);
  border: var(--fio);
  border-radius: 2px;
  padding: 1px 5px;
}

.escolha {
  position: relative;
  display: flex;
  align-items: center;
}
.escolha select {
  appearance: none;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  padding: 9px 30px 9px 12px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  cursor: pointer;
}
.escolha::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--tinta-3);
  border-bottom: 1.5px solid var(--tinta-3);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.modos {
  display: flex;
  border: var(--fio);
  border-radius: var(--canto);
  overflow: hidden;
}
.modos button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--papel);
  border: 0;
  padding: 9px 13px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  transition: color var(--t), background var(--t);
}
.modos button + button { border-left: var(--fio); }
.modos button svg { width: 13px; height: 13px; }
.modos button:hover { color: var(--tinta); }
.modos button[aria-pressed="true"] { background: var(--brasa); color: #fff; }

.contador {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  border-bottom: var(--fio);
}
.filtros .rotulo { flex: none; margin-right: 6px; }
.filtros--tags { padding-bottom: 20px; }
.tag.is-extra { display: none; }
.filtros.aberto .tag.is-extra { display: inline-flex; }

/* --------------------------------------------------------- 19. Projetos */

/* Um markup, dois layouts. "Indice" e a regua compacta; "fichas" e o
   carrossel horizontal. Nenhum dos dois estica a pagina pra baixo. */

.projs { margin-top: 20px; }

.proj { position: relative; }

.proj__foto {
  position: relative;
  background: var(--fundo-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.proj__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.proj__n {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--tinta-3);
}

.proj__cabeca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.proj__nome { font-size: 1.22rem; min-width: 0; }
.proj__nome a { text-decoration: none; }
/* O nome estende o alvo de clique para a ficha inteira; sem JS ainda e um link. */
.proj__nome a::after { content: ""; position: absolute; inset: 0; }

.proj__desc {
  margin: 0;
  color: var(--tinta-2);
  font-size: .86rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proj__meta { margin: 0; }
.proj__tags .tag { position: relative; z-index: 1; }

.proj__rodape { display: flex; align-items: center; gap: 12px; }
.proj__abrir {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
  transition: color var(--t), transform var(--t);
}
.proj:hover .proj__abrir { color: var(--brasa); transform: translateX(2px); }

.nivel { display: inline-flex; align-items: center; gap: 7px; }
.nivel i { display: inline-flex; gap: 2px; }
.nivel b { width: 4px; height: 4px; border-radius: 50%; background: var(--linha-forte); }
.nivel b.on { background: var(--brasa); }
.nivel > span {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.pino {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35c07a;
  box-shadow: 0 0 0 3px rgba(53, 192, 122, .15);
  flex: none;
}
.pino--off { background: var(--tinta-3); box-shadow: none; }

/* --- modo indice: regua de linhas -------------------------------------- */

.projs--indice {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linha-forte);
}
.projs--indice .proj {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.25fr) 126px 142px;
  align-items: center;
  gap: 16px;
  padding: 11px 10px 11px 4px;
  border-bottom: var(--fio);
  transition: background var(--t), padding-left var(--t);
}
.projs--indice .proj::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brasa);
  transform: scaleY(0);
  transition: transform var(--t);
}
.projs--indice .proj:hover { background: var(--realce); padding-left: 12px; }
.projs--indice .proj:hover::before { transform: scaleY(1); }

.projs--indice .proj__foto,
.projs--indice .proj__tags { display: none; }
.projs--indice .proj__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projs--indice .proj__desc { -webkit-line-clamp: 1; line-clamp: 1; }
.projs--indice .proj__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
.projs--indice .proj__meta span + span::before { display: none; }

@media (max-width: 1040px) {
  .projs--indice .proj { grid-template-columns: 32px minmax(0, 1fr) 130px; gap: 12px; }
  .projs--indice .proj__desc,
  .projs--indice .proj__meta { display: none; }
}
@media (max-width: 620px) {
  .projs--indice .proj { grid-template-columns: 28px minmax(0, 1fr) 76px; }
  .projs--indice .proj__rodape { display: none; }
  /* volta so a data, que cabe: a hospedagem fica pro modal */
  .projs--indice .proj__meta { display: flex; }
  .projs--indice .proj__meta span + span { display: none; }
}

/* --- modo fichas: carrossel horizontal --------------------------------- */

.projs--fichas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 286px;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.projs--fichas::-webkit-scrollbar { height: 7px; }
.projs--fichas::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 4px; }
.projs--fichas::-webkit-scrollbar-track { background: var(--linha); border-radius: 4px; }

.projs--fichas .proj {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.projs--fichas .proj:hover {
  transform: translateY(-3px);
  border-color: var(--linha-forte);
  box-shadow: var(--sombra);
}
.projs--fichas .proj__foto { order: 0; aspect-ratio: 16 / 10; border-bottom: var(--fio); }
.projs--fichas .proj__n {
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fundo) 74%, transparent);
  backdrop-filter: blur(5px);
}
.projs--fichas .proj__cabeca { order: 1; padding: 14px 15px 0; }
.projs--fichas .proj__nome { font-size: 1.34rem; }
.projs--fichas .proj__meta { order: 2; padding: 7px 15px 0; }
.projs--fichas .proj__desc { order: 3; padding: 10px 15px 0; -webkit-line-clamp: 3; line-clamp: 3; }
.projs--fichas .proj__tags { order: 4; padding: 12px 15px 16px; }
.projs--fichas .proj__rodape {
  order: 5;
  margin-top: auto;
  padding: 11px 15px;
  border-top: var(--fio);
}

.setas { display: flex; gap: 6px; }
.setas button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  cursor: pointer;
  color: var(--tinta-2);
  transition: color var(--t), border-color var(--t), opacity var(--t);
}
.setas button:hover:not(:disabled) { color: var(--brasa); border-color: var(--brasa-fio); }
.setas button:disabled { opacity: .3; cursor: default; }
.setas svg { width: 14px; height: 14px; }

.vazio {
  padding: 46px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* -------------------------------------------------------- 20. Princípios */

.metodos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: var(--fio);
  border-radius: var(--canto);
  overflow: hidden;
}
.metodo {
  background: var(--fundo);
  padding: 26px 24px;
  transition: background var(--t);
}
.metodo:hover { background: var(--papel); }
.metodo__n {
  display: block;
  font-family: var(--serifa);
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--brasa-fio);
  margin-bottom: 10px;
}
.metodo h3 { font-size: 1.36rem; margin-bottom: 10px; }
.metodo p { margin: 0 0 12px; font-size: .89rem; color: var(--tinta-2); }
.metodo__onde {
  margin: 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.metodo__onde b { color: var(--brasa); font-weight: 400; }

/* ------------------------------------------------------- 21. Diagrama */

.diagrama {
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.diagrama svg { min-width: 760px; width: 100%; height: auto; }

.d-faixa {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  fill: var(--brasa);
}
.d-no rect {
  fill: var(--papel);
  stroke: var(--linha-forte);
  stroke-width: 1;
}
.d-no--chave rect { stroke: var(--brasa); fill: var(--brasa-fraca); }
.d-nome {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  fill: var(--tinta);
  text-anchor: middle;
}
.d-papel {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--tinta-3);
  text-anchor: middle;
}
.d-ext rect { fill: none; stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3; }
.d-ext text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  fill: var(--tinta-2);
  text-anchor: middle;
}
.d-api rect { fill: var(--fundo-2); stroke: var(--linha); stroke-width: 1; }
.d-api text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--tinta-2);
  text-anchor: middle;
}
.d-liga { fill: none; stroke: var(--linha-forte); stroke-width: 1.2; }
.d-liga--fraca { stroke-dasharray: 3 4; stroke: var(--linha); }
.d-seta { fill: var(--linha-forte); }
.d-rotulo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--tinta-3);
  text-anchor: middle;
}
.d-base rect { fill: var(--papel); stroke: var(--brasa-fio); stroke-width: 1; }
.d-base text { text-anchor: start; }
.d-base text.d-papel--dir { text-anchor: end; fill: var(--brasa); }

/* -------------------------------------------------------- 22. Contato */

.contato { border-top: 1px solid var(--linha-forte); padding: clamp(60px, 8vw, 104px) 0 0; }
.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  padding-bottom: 46px;
}
.contato h2 {
  font-size: clamp(34px, 6vw, 74px);
  line-height: .98;
  letter-spacing: -.03em;
}
.contato h2 em { font-style: italic; color: var(--brasa); }
.contato__links { display: grid; gap: 8px; justify-items: start; }
.contato__links a {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--tinta-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.contato__links a:hover { color: var(--brasa); border-color: var(--brasa-fio); }

.rodape {
  border-top: var(--fio);
  padding: 20px 0 30px;
}
.rodape .eixo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.rodape .eixo > :last-child { margin-left: auto; }

@media (max-width: 760px) {
  .contato__grade { grid-template-columns: 1fr; align-items: start; }
}

/* ---------------------------------------------------------- 23. Modal */

.modal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(6, 6, 7, .62);
  backdrop-filter: blur(3px);
}
.modal[open] { display: flex; flex-direction: column; animation: sobeModal 220ms cubic-bezier(.22, .61, .36, 1); }

@keyframes sobeModal {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
}

.modal__topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: var(--fio);
  background: var(--papel-alto);
}
.modal__topo h3 { font-size: 1.6rem; }
.modal__topo .mono { display: block; margin-top: 4px; }
.modal__topo .btn-icone { margin-left: auto; flex: none; }

.modal__corpo { padding: 18px; overflow-y: auto; }

.modal__figura {
  display: block;
  position: relative;
  border: var(--fio);
  border-radius: var(--canto);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--fundo-2);
}
.modal__figura img { width: 100%; height: auto; }
.modal__lupa {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: color-mix(in srgb, var(--fundo) 80%, transparent);
  border: var(--fio);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  backdrop-filter: blur(4px);
}

.modal__especs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: var(--fio);
  border-radius: var(--canto);
  overflow: hidden;
  margin: 0 0 16px;
}
.modal__especs div { background: var(--papel); padding: 11px 13px; }
.modal__especs dt {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.modal__especs dd { margin: 4px 0 0; font-size: .86rem; }

.modal__corpo > p { margin: 0 0 16px; color: var(--tinta-2); font-size: .94rem; }
.modal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

@media (max-width: 520px) {
  .modal__especs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- 24. Animação */

.sobe {
  opacity: 0;
  transform: translateY(14px);
  animation: entra 700ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes entra { to { opacity: 1; transform: none; } }

.surge {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms cubic-bezier(.22, .61, .36, 1), transform 640ms cubic-bezier(.22, .61, .36, 1);
}
.surge.is-in { opacity: 1; transform: none; }

html:not(.js) .surge,
html:not(.js) .sobe { opacity: 1; transform: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .surge { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ 25. Responsivo */

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; align-items: start; }
  .hero__lado { grid-template-columns: 180px 1fr; align-items: start; }
  .retrato--recorte img { max-height: 260px; }

  /* No celular a navegacao desce pra uma faixa propria que rola de lado,
     em vez de sumir. */
  .topo .eixo--largo { flex-wrap: wrap; height: auto; gap: 10px; padding-top: 9px; }
  .marca { margin-right: auto; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding: 2px 0;
    border-top: var(--fio);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 9px; flex: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .eixo, .eixo--largo { width: calc(100% - 32px); }
  .hero__lado { grid-template-columns: 1fr; }
  .retrato { max-width: 260px; }
  .ferramentas { gap: 8px; }
  .contador { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------- 26. Lupa */

/* Visor da captura de tela. A largura manda — é ela que garante que cabe em
   qualquer tela; a altura sai da proporção da imagem e só encolhe o conjunto
   quando estouraria a janela. O JS calcula e escreve width/height aqui. */

.modal__figura { cursor: zoom-in; }
.modal__lupa { display: inline-flex; align-items: center; gap: 6px; }
.modal__lupa svg { width: 12px; height: 12px; }

.lupa {
  padding: 0;
  border: var(--fio);
  border-radius: var(--canto);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .8);
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  overflow: hidden;
}
.lupa::backdrop {
  background: rgba(4, 4, 5, .86);
  backdrop-filter: blur(6px);
}
.lupa[open] {
  display: flex;
  flex-direction: column;
  animation: abreLupa 180ms cubic-bezier(.22, .61, .36, 1);
}

@keyframes abreLupa {
  from { opacity: 0; transform: scale(.985); }
}

.lupa__barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 10px 0 14px;
  border-bottom: var(--fio);
  background: var(--papel-alto);
}

.lupa__nome {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.lupa__zoom {
  display: flex;
  align-items: center;
  border: var(--fio);
  border-radius: var(--canto);
  overflow: hidden;
  flex: none;
}
.lupa__zoom button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.lupa__zoom button:hover:not(:disabled) { color: var(--brasa); background: var(--realce); }
.lupa__zoom button:disabled { opacity: .3; cursor: default; }
.lupa__zoom svg { width: 13px; height: 13px; }

.lupa__nivel {
  min-width: 52px;
  text-align: center;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
  border-inline: var(--fio);
  line-height: 28px;
}

.lupa__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--fio);
  border-radius: var(--canto);
  background: none;
  color: var(--tinta-2);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.lupa__x:hover { color: var(--brasa); border-color: var(--brasa-fio); }
.lupa__x svg { width: 14px; height: 14px; }

.lupa__palco {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  background: var(--fundo-2);
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
  cursor: zoom-in;
}
.lupa__palco img {
  display: block;
  max-width: none;
  image-rendering: -webkit-optimize-contrast;
}
.lupa__palco.ampliado { cursor: grab; }
.lupa__palco.arrastando { cursor: grabbing; }

@media (max-width: 620px) {
  .lupa__barra { height: 44px; padding-left: 10px; gap: 8px; }
  .lupa__nome { font-size: .62rem; letter-spacing: .06em; }
}

/* Perfil de Instagram da parceria: chip com o glifo, ao lado do site. */
.tag--insta { gap: 5px; }
.tag--insta svg { width: 12px; height: 12px; flex: none; }
.tag--insta:hover { color: var(--brasa); border-color: var(--brasa-fio); }