/* ==========================================================================
   Portfólio de Luís Antônio: "planta técnica"
   Tema claro: papel milimetrado com tinta azul-petróleo.
   Tema escuro: cópia heliográfica, traço claro sobre azul-da-prússia.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('/fonts/azeret-mono.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papel: #f3eedc;
  --papel-ficha: #f8f4e7;
  --tinta: #0f3d4a;
  --tinta-suave: #3f5f66;
  --traco: #0f3d4a;
  --traco-leve: rgb(15 61 74 / 0.28);
  --grade-fina: rgb(214 120 52 / 0.1);
  --grade-grossa: rgb(214 120 52 / 0.22);
  --marca: #f4d94a;
  --marca-tinta: #0f3d4a;
  --carimbo: #b3362c;
  /* Linha de especificação aberta pela vista explodida */
  --realce: color-mix(in srgb, var(--marca) 30%, var(--papel-ficha));
  --realce-titulo: var(--tinta);

  --fonte: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --fonte-cota: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-cota: 0.75rem;
  --t-pequeno: 0.875rem;
  --t-corpo: 1.0625rem;
  --t-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
  --t-h3: 1.5rem;
  --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-h1: clamp(2.75rem, 1.6rem + 6vw, 6.5rem);
  --t-nome: clamp(3.25rem, 1rem + 11vw, 11rem);

  --moldura: 12px;
  --margem: clamp(20px, 5vw, 64px);
  --largura: 1240px;
  --traco-w: 1.5px;
  --curva: cubic-bezier(0.22, 0.8, 0.24, 1);
}

:root[data-tema='heliografica'] {
  color-scheme: dark;
  --papel: #103c5c;
  --papel-ficha: #0d3452;
  --tinta: #eef5f9;
  --tinta-suave: #b4cddd;
  --traco: #eef5f9;
  --traco-leve: rgb(238 245 249 / 0.3);
  --grade-fina: rgb(255 255 255 / 0.055);
  --grade-grossa: rgb(255 255 255 / 0.12);
  --marca: #f4d94a;
  --marca-tinta: #0f3d4a;
  --carimbo: #ff9a8c;
  --realce: color-mix(in srgb, var(--tinta) 10%, var(--papel-ficha));
  --realce-titulo: var(--marca);
}

@media (min-width: 720px) {
  :root {
    --moldura: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--grade-grossa) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-grossa) 1px, transparent 1px),
    linear-gradient(var(--grade-fina) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-fina) 1px, transparent 1px);
  background-size:
    60px 60px,
    60px 60px,
    12px 12px,
    12px 12px;
  background-position: -1px -1px;
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--marca);
  color: var(--marca-tinta);
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.cota-texto {
  font-family: var(--fonte-cota);
  font-size: var(--t-cota);
  letter-spacing: 0;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  top: calc(var(--moldura) + 8px);
  left: calc(var(--moldura) + 8px);
  z-index: 100;
  padding: 10px 16px;
  background: var(--marca);
  color: var(--marca-tinta);
  font-weight: 600;
  transform: translateY(-200%);
}
.pular:focus {
  transform: none;
}

.conteudo {
  width: min(100% - 2 * var(--margem) - 2 * var(--moldura), var(--largura));
  margin-inline: auto;
}

/* -------------------------------------------------------------------------- */
/* Moldura da prancha: fixa nas bordas da tela, com a referência de zonas      */
/* -------------------------------------------------------------------------- */

.moldura {
  position: fixed;
  inset: var(--moldura);
  z-index: 40;
  border: var(--traco-w) solid var(--traco);
  pointer-events: none;
}
.moldura__zonas {
  position: absolute;
  display: none;
  font-family: var(--fonte-cota);
  font-size: 10px;
  color: var(--tinta-suave);
}
.moldura__zonas--topo {
  inset: calc(-1 * var(--moldura)) 0 auto 0;
  height: var(--moldura);
  justify-content: space-around;
  align-items: center;
}
.moldura__zonas--lado {
  inset: 0 auto 0 calc(-1 * var(--moldura));
  width: var(--moldura);
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
@media (min-width: 720px) {
  .moldura__zonas {
    display: flex;
  }
}
/* Faixas que cobrem a grade fora da moldura */
.moldura::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--moldura) - var(--traco-w));
  border: var(--moldura) solid var(--papel);
  z-index: -1;
}

/* -------------------------------------------------------------------------- */
/* Cabeçalho                                                                  */
/* -------------------------------------------------------------------------- */

.topo {
  position: sticky;
  top: var(--moldura);
  z-index: 30;
  margin-top: var(--moldura);
  background: var(--papel);
  border-bottom: var(--traco-w) solid var(--traco);
}
.topo__linha {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.topo__nome {
  font-weight: 750;
  font-stretch: 118%;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.topo__nav {
  display: none;
  gap: 4px;
  margin-left: auto;
}
.topo__nav a {
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 500;
}
.topo__nav a:hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.topo__acoes {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 900px) {
  .topo__nav {
    display: flex;
  }
  .topo__acoes {
    margin-left: 8px;
  }
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
  cursor: pointer;
  font-size: var(--t-pequeno);
  font-weight: 500;
}
.botao-icone:hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.botao-icone svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.botao-icone kbd {
  font-family: var(--fonte-cota);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--traco-leve);
}
.botao-icone .rotulo-largo {
  display: none;
}
@media (min-width: 560px) {
  .botao-icone .rotulo-largo {
    display: inline;
  }
}

/* -------------------------------------------------------------------------- */
/* Botões                                                                      */
/* -------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: var(--traco-w) solid var(--traco);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    transform 0.15s var(--curva);
}
.botao:active {
  transform: translateY(1px);
}
.botao--cheio {
  background: var(--tinta);
  color: var(--papel);
}
.botao--cheio:hover {
  background: var(--marca);
  color: var(--marca-tinta);
  border-color: var(--marca-tinta);
}
.botao--vazio {
  background: var(--papel-ficha);
}
.botao--vazio:hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.botao svg {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------------------------- */
/* Folha de rosto (hero)                                                      */
/* -------------------------------------------------------------------------- */

.rosto {
  position: relative;
  padding-block: clamp(40px, 8vw, 96px) clamp(48px, 7vw, 88px);
  overflow: hidden;
  cursor: crosshair;
}
.rosto__grade {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .rosto__grade {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: end;
  }
}

.rosto__titulo {
  position: relative;
  display: inline-block;
  padding-top: 40px;
}
.rosto__nome {
  display: block;
  font-size: var(--t-nome);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.rosto__nome span {
  display: block;
}

/* Cota: linha de dimensão que mede o nome, ao vivo */
.cota {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  color: var(--tinta-suave);
}
.cota__linha {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
}
.cota__linha::before,
.cota__linha::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 1px;
  height: 13px;
  background: currentColor;
}
.cota__linha::before {
  left: 0;
}
.cota__linha::after {
  right: 0;
}
.cota__seta {
  position: absolute;
  top: 10px;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.cota__seta--inicio {
  left: 1px;
  transform: rotate(-45deg);
}
.cota__seta--fim {
  right: 1px;
  transform: rotate(135deg);
}
.cota__valor {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  padding: 0 10px;
  background: var(--papel);
  white-space: nowrap;
}

.rosto__sub {
  margin-top: clamp(24px, 4vw, 40px);
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.rosto__sub strong {
  display: block;
  font-weight: 700;
  font-stretch: 112%;
}
.rosto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.rosto__lado {
  display: grid;
  gap: 24px;
}

/* Vista explodida das camadas */
.pilha {
  display: none;
  margin: 0;
}
@media (min-width: 1000px) {
  .pilha {
    display: block;
  }
}
.pilha svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pilha figcaption {
  margin-top: 4px;
  color: var(--tinta-suave);
}
.pilha__face,
.pilha__detalhe,
.pilha__chamada,
.pilha__balao,
.pilha__projecao,
.pilha__eixo,
.pilha__cadeado {
  stroke: var(--traco);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pilha__face--topo {
  fill: var(--papel-ficha);
  transition: fill 0.2s;
}
.pilha__face--frente,
.pilha__face--lado {
  fill: url(#hachura);
}
.pilha__hachura {
  stroke: var(--traco);
  stroke-width: 1;
  opacity: 0.55;
}
.pilha__detalhe {
  fill: none;
  stroke-width: 1;
  opacity: 0.75;
}
.pilha__chamada {
  fill: none;
  stroke-width: 1;
}
.pilha__projecao {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.6;
}
.pilha__eixo {
  stroke-width: 1.4;
  stroke-dasharray: 10 3 2 3;
}
.pilha__cadeado {
  fill: var(--papel-ficha);
}
.pilha__balao {
  fill: var(--papel-ficha);
  transition: fill 0.2s;
}
.pilha__numero {
  fill: var(--tinta);
  font: 700 12px var(--fonte);
}
.pilha__rotulo {
  fill: var(--tinta);
  font: 500 13px var(--fonte);
}
.pilha__camada {
  cursor: pointer;
  outline: none;
}
.pilha__camada:hover .pilha__face--topo,
.pilha__camada:focus-visible .pilha__face--topo,
.pilha__camada:hover .pilha__balao,
.pilha__camada:focus-visible .pilha__balao,
.pilha__camada:hover .pilha__cadeado,
.pilha__camada:focus-visible .pilha__cadeado {
  fill: var(--marca);
}
.pilha__camada:hover .pilha__numero,
.pilha__camada:focus-visible .pilha__numero {
  fill: var(--marca-tinta);
}
.pilha__camada:focus-visible .pilha__rotulo {
  text-decoration: underline;
}

/* Mira de CAD que acompanha o ponteiro na folha de rosto */
.mira {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.rosto:hover .mira {
  opacity: 1;
}
.mira__h,
.mira__v {
  position: absolute;
  background: var(--traco-leve);
}
.mira__h {
  left: 0;
  right: 0;
  height: 1px;
  top: var(--y, -10px);
}
.mira__v {
  top: 0;
  bottom: 0;
  width: 1px;
  left: var(--x, -10px);
}
.mira__ponto {
  position: absolute;
  left: var(--x, -10px);
  top: var(--y, -10px);
  width: 11px;
  height: 11px;
  translate: -5px -5px;
  border: 1px solid var(--tinta);
}
.mira__xy {
  position: absolute;
  left: var(--x, -10px);
  top: var(--y, -10px);
  translate: 12px 10px;
  padding: 2px 6px;
  background: var(--papel);
  color: var(--tinta-suave);
  white-space: nowrap;
}
@media (pointer: coarse) {
  .rosto {
    cursor: auto;
  }
  .mira {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Carimbo (legenda da prancha)                                               */
/* -------------------------------------------------------------------------- */

.carimbo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  border: var(--traco-w) solid var(--traco);
  background: var(--traco);
}
.carimbo__campo {
  min-width: 0;
  padding: 8px 12px 10px;
  background: var(--papel-ficha);
}
.carimbo__campo--inteiro {
  grid-column: 1 / -1;
}
.carimbo dt {
  color: var(--tinta-suave);
}
.carimbo dd {
  margin: 2px 0 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.carimbo__nome {
  font-size: 1.375rem;
  font-stretch: 118%;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.carimbo__whats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
}
.carimbo__whats:hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.carimbo__whats svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.carimbo__campo:has(.carimbo__whats) {
  padding: 0;
}
.carimbo__campo:has(.carimbo__whats) .carimbo__whats {
  padding: 8px 12px 10px;
}

/* -------------------------------------------------------------------------- */
/* Seções                                                                     */
/* -------------------------------------------------------------------------- */

.secao {
  padding-block: clamp(64px, 9vw, 120px);
  border-top: var(--traco-w) solid var(--traco);
}
.secao__cabeca {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.secao__titulo {
  font-size: var(--t-h2);
  font-stretch: 118%;
}
.secao__intro {
  max-width: 56ch;
  color: var(--tinta-suave);
  font-size: var(--t-lead);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* Índice de folhas: filtro                                                   */
/* -------------------------------------------------------------------------- */

.filtro {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}
/* "Todos" no alto e as categorias abaixo, ligadas por linhas de desenho
   técnico. No celular, um tronco central com galhos para os dois lados;
   no computador, um barramento com uma descida para cada categoria. */
.filtro__arvore {
  --vao: 36px; /* espaço entre as colunas, por onde passa o tronco */
  --ramo-h: 54px; /* altura fixa dos ramos: o tronco termina no meio da última linha */
  --queda: 20px; /* distância entre o "Todos" e a primeira linha */
  --no: 7px;
  display: grid;
  justify-items: center;
}
.filtro__opcao {
  position: relative;
  min-height: 46px;
  padding: 6px 12px;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
  cursor: pointer;
  font-weight: 500;
  line-height: 1.2;
}
.filtro__opcao:hover {
  background: var(--realce);
}
.filtro__opcao[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--papel);
}
.filtro__opcao sup {
  margin-left: 4px;
  font-family: var(--fonte-cota);
  font-size: 10px;
  opacity: 0.8;
}
.filtro__raiz {
  min-width: min(240px, 62%);
}
.filtro__ramos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--ramo-h);
  column-gap: var(--vao);
  row-gap: 14px;
  width: min(100%, 580px);
  padding-top: var(--queda);
}
/* Tronco: do "Todos" até o meio da última linha */
.filtro__ramos::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(var(--ramo-h) / 2);
  left: 50%;
  width: var(--traco-w);
  translate: -50% 0;
  background: var(--traco);
}
.filtro__ramo {
  width: 100%;
  height: 100%;
}
/* Galho: da borda do botão até o tronco */
.filtro__ramo::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--vao) / 2 + var(--traco-w));
  height: var(--traco-w);
  translate: 0 -50%;
  background: var(--traco);
}
.filtro__ramo:nth-child(odd)::after {
  left: 100%;
}
.filtro__ramo:nth-child(even)::after {
  right: 100%;
}
/* Nó onde os galhos de cada linha encontram o tronco */
.filtro__ramo:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + var(--traco-w) + var(--vao) / 2);
  width: var(--no);
  height: var(--no);
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--traco);
}
/* O galho da categoria escolhida fica mais grosso */
.filtro__ramo[aria-pressed='true']::after {
  height: calc(var(--traco-w) * 2.4);
}
@media (min-width: 960px) {
  .filtro__arvore {
    --queda: 36px;
  }
  .filtro__raiz {
    min-width: 220px;
  }
  .filtro__ramos {
    --vao-h: 12px;
    grid-template-columns: repeat(var(--ramos), minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: var(--vao-h);
    row-gap: 0;
    width: 100%;
  }
  /* Tronco curto até o barramento */
  .filtro__ramos::before {
    bottom: auto;
    height: calc(var(--queda) / 2);
  }
  /* Barramento: do meio do primeiro ramo até o meio do último */
  .filtro__ramos::after {
    content: '';
    position: absolute;
    top: calc(var(--queda) / 2);
    left: calc((100% - (var(--ramos) - 1) * var(--vao-h)) / (2 * var(--ramos)));
    right: calc((100% - (var(--ramos) - 1) * var(--vao-h)) / (2 * var(--ramos)));
    height: var(--traco-w);
    translate: 0 -50%;
    background: var(--traco);
  }
  /* Cada ramo desce do barramento */
  .filtro__ramo:nth-child(n)::after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    width: var(--traco-w);
    height: calc(var(--queda) / 2 + var(--traco-w));
    translate: -50% 0;
  }
  .filtro__ramo:nth-child(n)[aria-pressed='true']::after {
    width: calc(var(--traco-w) * 2.4);
    height: calc(var(--queda) / 2 + var(--traco-w));
  }
  .filtro__ramo:nth-child(odd)::before {
    display: none;
  }
}

.filtro__contagem {
  justify-self: end;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------------------- */
/* Folha (card de projeto)                                                    */
/* -------------------------------------------------------------------------- */

.folhas {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .folhas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .folhas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.folhas > li[hidden] {
  display: none;
}

.folha {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
  text-decoration: none;
}
.folha__vista {
  position: relative;
  margin: 8px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--traco);
  background: var(--papel);
}
.folha__vista picture {
  display: contents;
}
/* No celular, a folha mostra o topo da versão de celular do projeto */
@media (max-width: 639px) {
  .folha__vista {
    aspect-ratio: 4 / 5;
  }
}
.folha__vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--curva);
}
.folha:hover .folha__vista img,
.folha:focus-visible .folha__vista img {
  transform: scale(1.03);
}
.folha__legenda {
  display: grid;
  grid-template-columns: auto 1fr;
  border-top: 1px solid var(--traco);
  flex: 1;
}
.folha__numero {
  display: grid;
  place-items: center;
  min-width: 64px;
  padding: 10px;
  border-right: 1px solid var(--traco);
  text-align: center;
}
.folha__numero b {
  display: block;
  font-family: var(--fonte);
  font-size: 1.75rem;
  font-stretch: 112%;
  font-weight: 750;
  line-height: 1;
}
.folha__texto {
  padding: 12px 14px 14px;
}
.folha__titulo {
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 700;
}
.folha__resumo {
  margin-top: 6px;
  color: var(--tinta-suave);
  font-size: var(--t-pequeno);
  line-height: 1.5;
}
.folha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  color: var(--tinta-suave);
}

/* Marcas de registro que aparecem nos cantos ao focar a folha */
.folha::before,
.folha::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transition:
    opacity 0.2s,
    translate 0.25s var(--curva);
  pointer-events: none;
}
.folha::before {
  top: -10px;
  left: -10px;
  border-top: 1px solid var(--tinta);
  border-left: 1px solid var(--tinta);
  translate: 4px 4px;
}
.folha::after {
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid var(--tinta);
  border-right: 1px solid var(--tinta);
  translate: -4px -4px;
}
.folha:hover::before,
.folha:hover::after,
.folha:focus-visible::before,
.folha:focus-visible::after {
  opacity: 1;
  translate: 0 0;
}
.folha:focus-visible {
  outline-offset: 6px;
}

/* Carimbo vermelho dos projetos conceito */
.selo {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 12px;
  padding: 5px 10px 4px;
  border: 2px solid var(--carimbo);
  outline: 1px solid var(--carimbo);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--papel-ficha) 88%, transparent);
  color: var(--carimbo);
  font-family: var(--fonte-cota);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  rotate: -4deg;
}
.selo--grande {
  position: static;
  display: inline-block;
  font-size: 13px;
  padding: 7px 14px 6px;
}

/* -------------------------------------------------------------------------- */
/* Especificações                                                             */
/* -------------------------------------------------------------------------- */

.quadro {
  margin: 0;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
}
.quadro__linha {
  display: grid;
  gap: 8px 32px;
  padding: 20px clamp(16px, 2.5vw, 28px);
  border-bottom: 1px solid var(--traco);
}
.quadro__linha:last-child {
  border-bottom: 0;
}
@media (min-width: 760px) {
  .quadro__linha {
    grid-template-columns: 220px 1fr;
    align-items: baseline;
  }
}
.quadro dt {
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 700;
}
.quadro dd {
  display: grid;
  gap: 14px;
  margin: 0;
}
.quadro__grupo {
  display: grid;
  gap: 6px;
}
@media (min-width: 1000px) {
  .quadro__grupo {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}
.quadro__rotulo {
  color: var(--tinta-suave);
}
/* O texto mantém as cores do tema; só o fundo e a barra lateral mudam,
   para continuar legível no papel claro e na cópia heliográfica. */
.quadro__linha:target {
  background: var(--realce);
  box-shadow: inset 6px 0 0 var(--marca);
  animation: realcar 0.6s var(--curva);
}
.quadro__linha:target dt {
  color: var(--realce-titulo);
}
@keyframes realcar {
  from {
    background: var(--papel-ficha);
    box-shadow: inset 0 0 0 var(--marca);
  }
}
.quadro ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quadro li {
  padding: 4px 10px;
  border: 1px solid var(--traco-leve);
  background: var(--papel);
  font-size: var(--t-pequeno);
}

/* -------------------------------------------------------------------------- */
/* Como trabalho: fluxograma                                                  */
/* -------------------------------------------------------------------------- */

.etapas {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
@media (min-width: 900px) {
  .etapas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.etapa {
  position: relative;
  padding: 0 24px 40px 64px;
  counter-increment: etapa;
}
.etapa::before {
  content: counter(etapa);
  position: absolute;
  left: 0;
  top: -6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--traco-w) solid var(--traco);
  border-radius: 50%;
  background: var(--papel-ficha);
  font-weight: 750;
  font-stretch: 112%;
  font-size: 1.125rem;
}
.etapa::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 38px;
  bottom: 0;
  width: 1px;
  background: var(--traco);
}
.etapa:last-child::after {
  display: none;
}
@media (min-width: 900px) {
  .etapa {
    padding: 64px 28px 0 0;
  }
  .etapa::before {
    top: 0;
  }
  .etapa::after {
    left: 44px;
    right: 0;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .etapa:last-child::after {
    display: none;
  }
}
.etapa h3 {
  font-size: var(--t-h3);
  font-stretch: 112%;
}
.etapa p {
  margin-top: 10px;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------------------- */
/* Contato                                                                    */
/* -------------------------------------------------------------------------- */

.contato {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .contato {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: end;
  }
}
.contato__titulo {
  font-size: var(--t-h1);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.contato__texto {
  margin-top: 24px;
  max-width: 44ch;
  font-size: var(--t-lead);
  color: var(--tinta-suave);
}

.rodape {
  padding-block: 28px calc(28px + var(--moldura));
  border-top: var(--traco-w) solid var(--traco);
  color: var(--tinta-suave);
}
.rodape__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

/* -------------------------------------------------------------------------- */
/* Página de projeto                                                          */
/* -------------------------------------------------------------------------- */

.projeto-topo {
  padding-block: clamp(32px, 6vw, 72px) clamp(28px, 4vw, 48px);
}
.projeto-topo__voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 48px);
  font-weight: 500;
}
.projeto-topo__voltar svg {
  width: 18px;
  height: 18px;
}
.projeto-topo__folha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 18px;
  color: var(--tinta-suave);
}
.projeto-topo__titulo {
  /* Em telas estreitas, o tamanho acompanha a largura para que palavras
     longas como "Odontologia" caibam numa linha */
  font-size: min(var(--t-h1), 10.5vw);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.projeto-topo__resumo {
  margin-top: 20px;
  max-width: 52ch;
  font-size: var(--t-lead);
  line-height: 1.45;
}

/* Visualizador com moldura de aparelho */
.visor {
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
}
.visor__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--traco);
}
.visor__aparelhos {
  display: flex;
  border: 1px solid var(--traco);
}
.visor__aparelho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--traco);
  background: var(--papel);
  cursor: pointer;
  font-size: var(--t-pequeno);
  font-weight: 500;
}
.visor__aparelho:last-child {
  border-right: 0;
}
.visor__aparelho svg {
  width: 18px;
  height: 18px;
}
.visor__aparelho[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--papel);
}
.visor__aparelho:not([aria-pressed='true']):hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.visor__aparelho .rotulo-largo {
  display: none;
}
@media (min-width: 560px) {
  .visor__aparelho .rotulo-largo {
    display: inline;
  }
}
.visor__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.visor__palco {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 64px clamp(8px, 2vw, 32px) clamp(24px, 3vw, 40px);
  overflow: hidden;
}
.visor__aparelho-moldura {
  position: relative;
  width: var(--w-vis, 100%);
  height: var(--h-vis, 480px);
  transition:
    width 0.5s var(--curva),
    height 0.5s var(--curva),
    border-radius 0.5s var(--curva);
  background: #e9e6dc;
  border: 1px solid var(--traco);
  overflow: hidden;
}
.visor[data-aparelho='celular'] .visor__aparelho-moldura,
.visor[data-aparelho='tablet'] .visor__aparelho-moldura {
  border: 10px solid #172a30;
  border-radius: 34px;
  box-sizing: content-box;
}
.visor[data-aparelho='tablet'] .visor__aparelho-moldura {
  border-width: 14px;
  border-radius: 28px;
}
.visor__navegador {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: #dcd8cb;
  border-bottom: 1px solid rgb(0 0 0 / 0.15);
  color: #2b3b3f;
}
.visor__navegador i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.18);
}
.visor__endereco {
  flex: 1;
  margin-left: 8px;
  padding: 3px 10px;
  background: #f4f2ea;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visor[data-aparelho='celular'] .visor__navegador,
.visor[data-aparelho='tablet'] .visor__navegador {
  display: none;
}
.visor__tela {
  position: absolute;
  left: 0;
  top: var(--topo-tela, 34px);
  width: var(--w-real, 1440px);
  height: var(--h-real, 900px);
  max-width: none;
  border: 0;
  transform: scale(var(--escala, 1));
  transform-origin: 0 0;
  background: #fff;
}
.visor[data-aparelho='celular'] .visor__tela,
.visor[data-aparelho='tablet'] .visor__tela {
  --topo-tela: 0px;
}
.visor__cota {
  position: absolute;
  left: 50%;
  top: 22px;
  width: var(--w-vis, 100%);
  translate: -50% 0;
  height: 28px;
  color: var(--tinta-suave);
  transition: width 0.5s var(--curva);
}
.visor__aviso {
  padding: 10px 14px;
  border-top: 1px solid var(--traco);
  color: var(--tinta-suave);
}

/* Memorial descritivo + carimbo lateral */
.memorial {
  display: grid;
  gap: 48px;
  padding-block: clamp(48px, 7vw, 96px);
}
@media (min-width: 1000px) {
  .memorial {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 72px;
    align-items: start;
  }
  .memorial__lado {
    position: sticky;
    top: 112px;
  }
}
.memorial__texto {
  display: grid;
  gap: 48px;
  max-width: 68ch;
}
.memorial__bloco h2 {
  font-size: 1.75rem;
  font-stretch: 118%;
  margin-bottom: 14px;
}
.memorial__bloco p {
  font-size: 1.125rem;
  line-height: 1.65;
}
.notas {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nota;
  border-top: 1px solid var(--traco);
}
.nota {
  position: relative;
  padding: 18px 0 20px 52px;
  border-bottom: 1px solid var(--traco);
  counter-increment: nota;
}
.nota::before {
  content: counter(nota);
  position: absolute;
  left: 0;
  top: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--traco);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9375rem;
}
.nota h3 {
  font-size: 1.1875rem;
  font-stretch: 108%;
  font-weight: 700;
  line-height: 1.3;
}
.nota p {
  margin-top: 6px;
  color: var(--tinta-suave);
}

.tecnologias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}
.tecnologias li {
  padding: 2px 8px;
  border: 1px solid var(--traco-leve);
  background: var(--papel);
  font-size: var(--t-pequeno);
}

/* Próxima e anterior */
.vizinhas {
  display: grid;
  gap: 16px;
  padding-bottom: clamp(48px, 7vw, 96px);
}
@media (min-width: 760px) {
  .vizinhas {
    grid-template-columns: 1fr 1fr;
  }
}
.vizinha {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
  text-decoration: none;
}
.vizinha:hover {
  background: var(--marca);
  color: var(--marca-tinta);
}
.vizinha--proxima {
  text-align: right;
}
.vizinha span {
  color: inherit;
  opacity: 0.75;
}
.vizinha b {
  font-size: 1.5rem;
  font-stretch: 112%;
  font-weight: 750;
}

/* -------------------------------------------------------------------------- */
/* Paleta de comandos (Ctrl+K)                                                */
/* -------------------------------------------------------------------------- */

.paleta {
  width: min(640px, 100% - 32px);
  max-height: min(560px, 100vh - 64px);
  margin: 12vh auto auto;
  padding: 0;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
  color: var(--tinta);
  box-shadow: 8px 8px 0 var(--traco-leve);
}
.paleta::backdrop {
  background: color-mix(in srgb, var(--papel) 70%, transparent);
  backdrop-filter: blur(2px);
}
.paleta[open] {
  display: flex;
  flex-direction: column;
}
.paleta__busca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--traco);
}
.paleta__busca svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.paleta__busca input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: transparent;
  font-size: 1.125rem;
  outline: none;
}
.paleta__lista {
  flex: 1;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
}
.paleta__grupo {
  padding: 10px 10px 4px;
  color: var(--tinta-suave);
}
.paleta__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.paleta__item[aria-selected='true'] {
  background: var(--marca);
  color: var(--marca-tinta);
}
.paleta__item small {
  margin-left: auto;
  opacity: 0.75;
}
.paleta__vazio {
  padding: 24px 12px;
  color: var(--tinta-suave);
}
.paleta__rodape {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--traco);
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------------------- */
/* Movimento                                                                  */
/* -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* Sequência de abertura: a única animação que não depende de ação */
@media (prefers-reduced-motion: no-preference) {
  .js .rosto .cota__linha {
    animation: tracar 0.9s 0.25s var(--curva) both;
  }
  .js .rosto .cota__valor,
  .js .rosto .cota__seta {
    animation: surgir 0.4s 1s both;
  }
  .js .rosto__nome span {
    animation: subir 0.8s var(--curva) both;
  }
  .js .rosto__nome span + span {
    animation-delay: 0.08s;
  }
  .js .rosto__sub,
  .js .rosto__acoes {
    animation: surgir 0.6s 0.45s both;
  }
  .js .rosto .carimbo__campo {
    animation: surgir 0.35s calc(0.7s + var(--i, 0) * 0.07s) both;
  }
  .js .moldura {
    animation: surgir 0.6s both;
  }
  .js .pilha__camada [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenhar 0.9s calc(0.35s + var(--ordem) * 0.18s) var(--curva) forwards;
  }
  .js .pilha__camada .pilha__face--topo,
  .js .pilha__camada .pilha__face--frente,
  .js .pilha__camada .pilha__face--lado,
  .js .pilha__camada .pilha__balao,
  .js .pilha__camada .pilha__cadeado {
    fill-opacity: 0;
    animation:
      desenhar 0.9s calc(0.35s + var(--ordem) * 0.18s) var(--curva) forwards,
      preencher 0.5s calc(0.9s + var(--ordem) * 0.18s) forwards;
  }
  .js .pilha__camada text,
  .js .pilha__eixo,
  .js .pilha__projecao {
    animation: surgir 0.5s 1.3s both;
  }
}

@keyframes tracar {
  from {
    transform: scaleX(0);
  }
}
@keyframes desenhar {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes preencher {
  to {
    fill-opacity: 1;
  }
}
@keyframes surgir {
  from {
    opacity: 0;
  }
}
@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(0.25em);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  @view-transition {
    navigation: none;
  }
}

/* Troca de tema: a cópia nova se revela em círculo a partir do botão */
html.trocando-tema::view-transition-old(root),
html.trocando-tema::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Créditos das fotos */
.creditos__corpo {
  display: grid;
  gap: 36px;
  padding-block: 8px 72px;
}
.creditos__projeto {
  scroll-margin-top: 96px;
}
.creditos__titulo {
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-stretch: 112%;
  font-weight: 700;
}
.creditos__titulo a {
  text-decoration: none;
}
.creditos__titulo a:hover {
  text-decoration: underline;
}
.creditos__lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .creditos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.credito {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 8px;
  border: var(--traco-w) solid var(--traco);
  background: var(--papel-ficha);
}
.credito img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--traco);
}
.credito div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.credito div > a {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credito span {
  color: var(--tinta-suave);
  font-size: var(--t-pequeno);
  overflow-wrap: anywhere; /* nomes de autor sem espaço, como @perfis e hashtags */
}