@charset "utf-8";

/* ArchBrew Arquitetura, identidade "Acervo".
   Galeria escura: o site inteiro corre em breu e a fotografia e a unica coisa
   que carrega cor. Exatamente uma virada de chao, para areia, na folha do
   escritorio. Um acento so, o latao, para acao, foco e estado corrente. Uma
   sombra so, a da bolha. Um elemento redondo so, a bolha. Todo o resto tem
   canto vivo e se separa por filete de 1px.

   Os valores numericos vem das pranchas em design-canvas/*.dc.html e sao
   copiados exatos: a coluna de 1440px e a de 390px sao os dois extremos
   calibrados, e o que corre entre elas e interpolacao. */

/* ---------------------------------------------------------------- fontes -- */
/* Familia unica, do rotulo de 9.5px a manchete de 60px. A hierarquia e
   carregada pelo eixo wdth antes de peso e antes de tamanho. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ chao -- */

:root {
  --breu:       #121211;   /* chao de todo o site */
  --breu-2:     #1a1a18;   /* campo elevado, fundo de ladrilho vazio */
  --breu-fio:   #26251f;   /* filete de 1px sobre breu */
  --fio:        #33322e;   /* filete de contraste, fichas */
  --fio-marca:  #4a4842;   /* o filete vertical da marca */

  --cal:        #f4f1ea;   /* texto primario */
  --cal-2:      #a09a8e;   /* texto secundario */
  --cal-3:      #b6b0a4;   /* tipo de obra na legenda */
  --cal-4:      #d6d0c4;   /* corpo sobre fotografia */
  --cal-5:      #d9d3c6;   /* rotulo sobre fotografia */
  --cal-fraca:  #6f6a61;   /* nota de teclado, campo vazio */

  --areia:      #e9e4da;   /* a unica virada de chao, folha do escritorio */
  --areia-tinta:#211f1a;
  --areia-2:    #5c5548;
  --areia-3:    #3d382f;
  --areia-rot:  #6d6555;
  --areia-fio:  #cdc6b8;
  --areia-cifra:#8d8474;

  --latao:      #c8a173;   /* acento unico: acao, foco, estado corrente */
  --latao-2:    #e0bf95;   /* o mesmo latao aceso, so em hover */
  /* A chapa de acao corre um degrau acima do acento. O acento vive como filete,
     cifra e anel de foco, onde uma cor de meio-tom se sustenta; a chapa e campo
     cheio com tinta breu por cima, e no corpo de 11.5px em caixa alta espacada
     o #c8a173 nao separava o suficiente. 10.1:1 contra 7.9:1. */
  --latao-chapa:   #dcb88f;
  --latao-chapa-2: #eed3ae;   /* a mesma chapa acesa, so em hover */
  --zap:        #25d366;   /* NAO e da paleta: marca de terceiro, so na bolha */

  --veu:        color-mix(in srgb, #08070a 46%, transparent);
  --faixa:      color-mix(in srgb, #080807 78%, transparent);
  --faixa-viva: color-mix(in srgb, #080807 88%, transparent);

  --obra-chao:  #0b0b0a;   /* a vista de obra corre um degrau abaixo do breu */
  --obra-fio:   #21201c;
  --obra-fio-2: #2c2b27;
  --obra-cifra: #4d4a44;
  --obra-vazio: #1f1e1a;

  --goteira:    48px;
  /* A altura do cabecalho grudado, para que a rolagem ate uma secao pare abaixo
     dele em vez de enfiar o titulo por baixo. Segue os tres degraus. */
  --cabecalho:  74px;
  --medida:     1344px;    /* a coluna de conteudo da prancha de 1440 */
  --curva:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Tres degraus, e nao dois. A prancha de 1440 e a de 390 sao os extremos
   calibrados; entre elas a grade de 2 colunas vale ate 1023px, e a partir de
   640px o cabecalho volta a caber inteiro e a goteira abre. */
@media (max-width: 1023px) {
  :root { --goteira: 14px; --cabecalho: 58px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --goteira: 30px; --cabecalho: 66px; }
}

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

html {
  background: var(--breu);
  -webkit-text-size-adjust: 100%;
  /* O menu do cabecalho nao pula para a secao, ele corre ate ela. E o proprio
     navegador que anima; nao ha JS de rolagem no site. Quem pede menos
     movimento volta ao pulo, pelo bloco no fim deste arquivo. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho) + 20px);
  /* a goteira da barra fica reservada mesmo quando a prancha trava a rolagem,
     senao o campo inteiro pula 12px de lado ao abrir uma obra */
  scrollbar-gutter: stable;
}

/* ------------------------------------------------------------- rolagem -- */
/* A barra do navegador tambem e do site. Mesma lingua do resto: canto vivo,
   um filete de 1px separando do campo, e o latao aparecendo so quando a mao
   esta nela. Duas gramaticas porque as duas existem: `scrollbar-color` no
   Firefox, o pseudo-elemento no Chromium e no Safari.
   A fita de laminas continua sem barra nenhuma: ela tem os proprios botoes. */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--fio) var(--breu);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: var(--breu);
  border-left: 1px solid var(--breu-fio);
}
::-webkit-scrollbar-track:horizontal {
  border-left: 0; border-top: 1px solid var(--breu-fio);
}
/* a borda cheia de breu e a folga: ela come a caixa de 12px e deixa a barra
   com 6px de tinta, sem precisar de padding, que a barra nao aceita */
::-webkit-scrollbar-thumb {
  background: var(--fio);
  border: 3px solid var(--breu);
}
::-webkit-scrollbar-thumb:hover { background: var(--latao); }
::-webkit-scrollbar-thumb:active { background: var(--latao-2); }
::-webkit-scrollbar-corner { background: var(--breu); }

body {
  margin: 0;
  background: var(--breu);
  color: var(--cal);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  font-variation-settings: "wdth" 96;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

::selection { background: var(--latao); color: var(--breu); }

/* O latao marca foco, e o foco nunca some. */
:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.pular {
  position: fixed; z-index: 200; top: 8px; left: 8px;
  transform: translateY(-180%);
  background: var(--latao-chapa); color: var(--breu);
  padding: 13px 18px;
  font-size: 11px; font-weight: 700; font-variation-settings: "wdth" 80;
  text-transform: uppercase; letter-spacing: 0.16em;
  transition: transform 0.18s var(--curva);
}
.pular:focus-visible { transform: none; }

/* ------------------------------------------------------------ tipografia -- */

.rot {
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--cal-2);
}

.abre {
  font-size: 40px; font-weight: 700; font-variation-settings: "wdth" 112;
  letter-spacing: -0.034em; line-height: 1;
  color: inherit;
}

.secao-nota {
  margin-top: 12px; max-width: 62ch;
  font-size: 14.5px; font-weight: 380; font-variation-settings: "wdth" 96;
  line-height: 1.55; color: var(--cal-2); text-wrap: pretty;
}

/* A cifra, componente-assinatura: numeral em wdth 62 / wght 200, grande e
   discreto. Hoje so o folio da prancha a usa: a abertura de secao deixou de
   contar obra, e o tamanho abaixo e a base que o folio sobrescreve. */
.cifra-display {
  font-size: 76px; font-weight: 200; font-variation-settings: "wdth" 62;
  line-height: 0.78; letter-spacing: -0.02em;
  color: var(--latao);
  font-variant-numeric: tabular-nums;
}

.medida { width: 100%; max-width: var(--medida); margin-inline: auto; }

.glifo { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.glifo-volta { transform: rotate(180deg); }

/* ------------------------------------------------------------- cabecalho -- */

.cabecalho {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 74px;
  padding-inline: var(--goteira);
  background: var(--breu);
  border-bottom: 1px solid var(--breu-fio);
}

/* O wordmark: ArchBrew em wdth 122 / wght 800, filete vertical de 1px, e
   ARQUITETURA em wdth 72 / wght 620. Desenhado na propria Archivo. */
.marca { display: flex; align-items: center; gap: 13px; }
.marca-nome {
  font-size: 21px; font-weight: 800; font-variation-settings: "wdth" 122;
  letter-spacing: -0.04em; line-height: 1;
}
.marca-fio { width: 1px; height: 19px; background: var(--fio-marca); }
.marca-sub {
  font-size: 10px; font-weight: 620; font-variation-settings: "wdth" 72;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--cal-2);
}

.rotas { display: flex; align-items: center; gap: 34px; }
.rotas a {
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--cal-2);
  transition: color 0.18s var(--curva);
}
.rotas a:hover { color: var(--cal); }
.rotas a[aria-current] { color: var(--cal); border-bottom-color: var(--latao); }

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  color: var(--latao);
  cursor: pointer;
  margin-right: -10px;
}
.menu-btn .glifo { width: 24px; height: 24px; }

/* -------------------------------------------------------------- abertura -- */

.abertura {
  position: relative;
  height: clamp(566px, calc(44.5vw + 393px), 764px);
  overflow: hidden;
  background: var(--breu-2);
  isolation: isolate;
}
/* O arquivo do acervo tem 1000px de largura e a abertura o estica: 1,6x numa
   tela de 1440, 2,8x numa de 2560. O desfoque leve come a papa do
   redimensionamento e devolve a foto a condicao de campo, com o dizer nitido
   por cima, que e o que faz a falta de gramatura parar de ser lida como
   defeito. Ele cresce em vw porque a esticada cresce junto, e o piso de 1,4px
   e para o celular, onde a foto e esticada bem menos. A escala de 1,04 impede
   a borda desfocada de descolar do quadro. Arquivo maior no acervo, estas duas
   linhas saem. */
.abertura-foto {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(max(1.4px, 0.19vw));
  transform: scale(1.04);
}
.abertura::after {
  content: ""; position: absolute; inset: 0;
  background: var(--veu);
  pointer-events: none;
}

.abertura-dizer {
  position: absolute; z-index: 1;
  left: var(--goteira); right: 122px; bottom: 54px;
}
/* Sem o bloco "Em destaque" ao lado, a coluna do dizer cresce ate onde a
   manchete cabe em duas linhas cheias, uma frase por linha. */
.abertura-dizer > div { max-width: 940px; }
.abertura-rot { color: var(--cal-5); }

/* 60px e o teto, o valor da prancha de 1440. Abaixo dela a manchete encolhe
   pela largura que sobra, para que cada frase continue cabendo em uma linha:
   15.9 e a razao medida entre a largura da frase mais longa e o corpo. */
.enunciado {
  margin-top: 22px;
  font-size: min(60px, calc((100vw - var(--goteira) - 122px) / 15.9));
  font-weight: 700; font-variation-settings: "wdth" 112;
  letter-spacing: -0.036em; line-height: 1;
  text-wrap: balance;
}
.abertura-nota {
  margin-top: 22px; max-width: 58ch;
  font-size: 16.5px; font-weight: 380; font-variation-settings: "wdth" 96;
  line-height: 1.58; color: var(--cal-4); text-wrap: pretty;
}

.acoes { display: flex; gap: 8px; margin-top: 32px; }

/* ---------------------------------------------------------------- botoes -- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px;
  background: var(--latao-chapa); color: var(--breu);
  font-size: 11.5px; font-weight: 700; font-variation-settings: "wdth" 80;
  text-transform: uppercase; letter-spacing: 0.16em;
  transition: background 0.18s var(--curva);
}
.botao:hover { background: var(--latao-chapa-2); }

.botao-vazio {
  background: none; color: var(--cal);
  box-shadow: inset 0 0 0 1px rgb(244 241 234 / 0.34);
  transition: box-shadow 0.18s var(--curva), color 0.18s var(--curva);
}
.botao-vazio:hover {
  background: none;
  box-shadow: inset 0 0 0 1px var(--latao);
  color: var(--latao-2);
}

.elo {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--latao);
  font-size: 11.5px; font-weight: 620; font-variation-settings: "wdth" 80;
  text-transform: uppercase; letter-spacing: 0.16em;
  transition: color 0.18s var(--curva);
}
.elo:hover { color: var(--latao-2); }
.elo .glifo { transition: transform 0.24s var(--curva); }
.elo:hover .glifo { transform: translateX(4px); }

/* ---------------------------------------------------------------- acervo -- */

.acervo { padding: 76px var(--goteira) 0; }

.secao-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--breu-fio);
}
.secao-titulo { display: flex; align-items: baseline; gap: 26px; }

/* ------------------------------------------------------------ o ladrilho -- */
/* Foto ocupando 100% do quadro. Sobre ela, dois elementos absolutos: a cifra
   no canto superior esquerdo e a legenda colada no pe. A legenda nunca se
   esconde atras de hover. */

.grade {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.ladrilho {
  position: relative; overflow: hidden;
  background: var(--breu-2);
  display: block;
}
.ladrilho-foto { display: block; width: 100%; height: 100%; }
.ladrilho img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--curva);
}
.ladrilho:hover img { transform: scale(1.028); }
.ladrilho .faixa { transition: background 0.28s var(--curva); }
.ladrilho:hover .faixa { background: var(--faixa-viva); }

/* As alturas da prancha de 1440: 430, 300 e 344 sobre uma coluna de 1344. */
.l-alta  { grid-column: span 4; height: max(240px, 31.994cqw); }
.l-media { grid-column: span 4; height: max(176px, 22.321cqw); }
.l-baixa { grid-column: span 6; height: max(200px, 25.595cqw); }
.l-larga { grid-column: span 8; }
.l-terco { grid-column: span 3; }
.l-meio  { grid-column: span 6; }

.cifra {
  position: absolute; left: 0; top: 0; z-index: 1;
  padding: 12px 16px;
  font-size: 38px; font-weight: 200; font-variation-settings: "wdth" 62;
  line-height: 1; letter-spacing: -0.02em;
  color: rgb(244 241 234 / 0.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.faixa {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 13px 17px 15px;
  background: var(--faixa);
  display: flex; flex-direction: column; gap: 4px;
}

.l-titulo {
  font-size: 16px; font-weight: 620; font-variation-settings: "wdth" 100;
  letter-spacing: -0.022em; line-height: 1.2;
  color: var(--cal);
}
.l-tipo {
  font-size: 12.5px; font-weight: 380; font-variation-settings: "wdth" 94;
  line-height: 1.35; color: var(--cal-3);
}
/* A celula vazia existe: sem ela a coluna sai de registro quando o tipo falta. */
.l-vazio { min-height: 1.35em; }

.l-local {
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: 10.5px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--cal-2);
  font-variant-numeric: tabular-nums;
}
.l-uf::before    { content: "\00b7"; padding: 0 0.42em; letter-spacing: 0; }
.l-fotos::before { content: "\00b7"; padding: 0 0.78em; letter-spacing: 0; }
/* sem lugar declarado, a contagem abre a linha e nao pode herdar o ponto */
.l-local > :first-child::before { content: none; padding: 0; }

/* O estudo se marca na propria linha do titulo, nunca agrupado em bloco: os
   quatro estudos sao todos de cervejaria e um bloco rotulado leria como secao
   de bar, exatamente o rotulo que o escritorio recusa. */
.marca-estudo {
  display: inline-block; margin-left: 8px;
  transform: translateY(-2px);
  padding: 2px 6px;
  box-shadow: inset 0 0 0 1px var(--latao);
  color: var(--latao);
  font-size: 9px; font-weight: 620; font-variation-settings: "wdth" 74;
  text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4;
  vertical-align: middle;
}

/* ------------------------------------------------------------ escritorio -- */
/* A unica virada de chao do site inteiro. */

.escritorio {
  margin-top: 86px;
  background: var(--areia); color: var(--areia-tinta);
  padding: 74px var(--goteira) 66px;
}
.escritorio-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 68px; align-items: start;
}
.escritorio-prosa {
  margin-top: 26px; max-width: 60ch;
  font-size: 16px; font-weight: 400; font-variation-settings: "wdth" 96;
  line-height: 1.62; text-wrap: pretty;
}
.escritorio-prosa + .escritorio-prosa {
  margin-top: 18px;
  font-size: 14.5px; font-weight: 380; line-height: 1.6;
  color: var(--areia-2);
}

.perfil { border-left: 1px solid var(--areia-fio); padding-left: 40px; }
.perfil-nome {
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--areia-rot);
}
.perfil-texto {
  margin-top: 18px;
  font-size: 14.5px; font-weight: 380; font-variation-settings: "wdth" 96;
  line-height: 1.62; color: var(--areia-3); text-wrap: pretty;
}

/* Servicos: rebaixado de secao inteira a tres colunas de rotulo com filete. */
.servicos { margin-top: 58px; padding-top: 26px; border-top: 1px solid var(--areia-fio); }
.servicos-rot {
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--areia-rot);
}
.lista-servicos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 44px; margin-top: 22px;
}
.lista-servicos li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--areia-fio);
}
.lista-servicos .n {
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 66;
  color: var(--areia-cifra); font-variant-numeric: tabular-nums;
}
.lista-servicos .s {
  font-size: 14.5px; font-weight: 500; font-variation-settings: "wdth" 96;
}
.servicos-nota {
  margin-top: 20px; max-width: 96ch;
  font-size: 13px; font-weight: 380; font-variation-settings: "wdth" 96;
  line-height: 1.55; color: var(--areia-rot); text-wrap: pretty;
}

/* --------------------------------------------------------------- contato -- */

.contato { padding: 78px var(--goteira) 66px; }
.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 68px; align-items: start;
}
.contato-abre {
  font-size: 46px; font-weight: 700; font-variation-settings: "wdth" 112;
  letter-spacing: -0.034em; line-height: 1.02; text-wrap: balance;
}
.contato-convite {
  margin-top: 22px; max-width: 48ch;
  font-size: 16.5px; font-weight: 400; font-variation-settings: "wdth" 96;
  line-height: 1.58; color: var(--cal-4); text-wrap: pretty;
}
.contato-argumento {
  margin-top: 16px; max-width: 48ch;
  font-size: 14.5px; font-weight: 380; font-variation-settings: "wdth" 96;
  line-height: 1.6; color: var(--cal-2); text-wrap: pretty;
}
.contato .botao { margin-top: 28px; padding: 16px 24px; font-size: 12px; }
.contato .botao .glifo { width: 18px; height: 18px; }

.canais { display: flex; flex-direction: column; }
.canais > li > * {
  display: flex; align-items: center; gap: 20px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--breu-fio);
  transition: background 0.18s var(--curva);
}
.canais > li:first-child > * { border-top: 1px solid var(--breu-fio); }
.canais a:hover { background: var(--breu-2); }
.canais .k { width: 96px; flex-shrink: 0; }
.canais li:first-child .k { color: var(--latao); }
.canais .v {
  flex-grow: 1; min-width: 0;
  font-size: 15.5px; font-weight: 400; font-variation-settings: "wdth" 96;
  font-variant-numeric: tabular-nums;
}
.canais .glifo { width: 19px; height: 19px; color: var(--cal-2); }

/* ---------------------------------------------------------------- rodape -- */

.rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 26px var(--goteira) 34px;
  border-top: 1px solid var(--breu-fio);
}
.rodape-marca { display: flex; align-items: center; gap: 11px; }
.rodape .marca-nome { font-size: 15px; }
.rodape .marca-fio { height: 14px; }
.rodape .rot { font-size: 10px; }

/* ----------------------------------------------------------------- bolha -- */
/* O verde e preso a bolha: nao entra em botao, link, filete ou fundo. E o
   unico elemento redondo e a unica sombra do sistema. */

.zap-bolinha {
  position: fixed; z-index: 80;
  right: 34px; bottom: 34px;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--zap); color: #ffffff;
  box-shadow: 0 7px 24px rgb(0 0 0 / 0.48);
  animation: bolha-aceno 7s ease-in-out 2.5s infinite;
}
.zap-bolinha svg { width: 29px; height: 29px; display: block; }
.zap-bolinha::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: bolha-anel 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes bolha-anel {
  0%   { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.5); }
  72%  { box-shadow: 0 0 0 19px rgb(37 211 102 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); }
}
@keyframes bolha-aceno {
  0%, 84%, 100% { transform: scale(1) rotate(0deg); }
  87% { transform: scale(1.09) rotate(-8deg); }
  90% { transform: scale(1.09) rotate(7deg); }
  93% { transform: scale(1.04) rotate(-3deg); }
}

/* -------------------------------------------------------------- projetos -- */

.folha-topo { padding: 60px var(--goteira) 30px; }
.folha-topo .abre { font-size: 46px; }
.folha-topo .secao-nota { max-width: 66ch; }

.parquete {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  padding-inline: var(--goteira);
}
/* O ritmo variado da prancha de projetos: 340, 250 e 300 sobre 1344. */
.p-alta  { height: max(210px, 25.298cqw); }
.p-media { height: max(160px, 18.601cqw); }
.p-baixa { height: max(186px, 22.321cqw); }
.parquete .l-titulo { font-size: 15px; }
.parquete .l-tipo { font-size: 11.5px; line-height: 1.3; }
.parquete .l-vazio { min-height: 1.3em; }
.parquete .l-local { font-size: 10px; letter-spacing: 0.16em; }
.parquete .cifra { padding: 11px 15px; font-size: 32px; color: rgb(244 241 234 / 0.38); }
.parquete .faixa { padding: 12px 15px 13px; }

/* --------------------------------------------------------------- prancha -- */
/* A vista de obra. Sem JS, :target abre a mesma prancha. */

.pranchas { display: contents; }

.prancha {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  background: var(--obra-chao);
  color: var(--cal);
}
.prancha:target { display: block; }
html.js .prancha:target { display: none; }
html.js .prancha.aberta { display: block; }

.prancha-chao { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.prancha-topo {
  display: flex; align-items: center; gap: 28px;
  height: 78px; padding-inline: 40px;
  border-bottom: 1px solid var(--obra-fio);
}
/* A legenda de tres campos nas mesmas proporcoes de coluna da grade. */
.prancha-legenda {
  flex-grow: 1; min-width: 0;
  display: grid; align-items: center; gap: 28px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.2fr) minmax(0, 0.85fr);
}
.prancha-legenda .l-titulo {
  font-size: 21px; font-weight: 620; font-variation-settings: "wdth" 100;
  letter-spacing: -0.025em;
}
.prancha-legenda .l-tipo { font-size: 13.5px; }
.prancha-legenda .l-local { font-size: 11px; letter-spacing: 0.19em; }

.prancha-fecha, .lamina-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  color: var(--cal-2);
  box-shadow: inset 0 0 0 1px var(--obra-fio-2);
  cursor: pointer;
  transition: background 0.18s var(--curva), color 0.18s var(--curva);
}
.prancha-fecha:hover, .lamina-btn:hover:not(:disabled) {
  background: var(--obra-vazio); color: var(--cal);
}
.lamina-btn:disabled { opacity: 0.35; cursor: default; }
.prancha-fecha .glifo, .lamina-btn .glifo { width: 20px; height: 20px; }

.lamina-fita {
  display: flex; gap: 6px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 30px 40px;
}
.lamina-fita::-webkit-scrollbar { display: none; }
.lamina {
  flex: 0 0 auto; max-width: 100%;
  scroll-snap-align: center;
  display: grid; place-items: center;
}
.lamina img { max-height: 100%; width: auto; object-fit: contain; }
/* Uma sombra so, a da bolha: a prancha de desenho se separa do chao por
   filete, nunca por sombra. */
.e-prancha { box-shadow: inset 0 0 0 1px var(--fio); }

.prancha-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 76px; padding-inline: 40px;
  border-top: 1px solid var(--obra-fio);
}
.prancha-folio { display: flex; align-items: baseline; gap: 16px; }
.prancha-folio .cifra-display { font-size: 40px; line-height: 1; color: var(--obra-cifra); }
.prancha-conta {
  font-size: 11px; font-weight: 620; font-variation-settings: "wdth" 76;
  text-transform: uppercase; letter-spacing: 0.19em;
  font-variant-numeric: tabular-nums; color: var(--cal-2);
}
.prancha-conta b { color: var(--cal); font-weight: 620; }
.prancha-passo { display: flex; align-items: center; gap: 22px; }
.prancha-atalho { color: var(--cal-fraca); }
.lamina-nav { display: flex; gap: 6px; }

html.travado { overflow: hidden; }

/* -------------------------------------------------------------- telefone -- */
/* 68% do trafego. Mesma linguagem, nao uma versao reduzida. Alvo de toque
   minimo de 46px em tudo que e clicavel. */

@media (max-width: 1023px) {
  .cabecalho { height: 58px; }
  .marca { gap: 9px; }
  .marca-nome { font-size: 17px; }
  .marca-fio { height: 15px; }
  .marca-sub { font-size: 9.5px; letter-spacing: 0.22em; }

  .menu-btn { display: grid; }
  .rotas {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--breu);
    border-bottom: 1px solid var(--breu-fio);
    padding-inline: var(--goteira);
  }
  html.js .rotas { display: none; }
  html.js .cabecalho[data-aberto] .rotas { display: flex; }
  .rotas a {
    display: flex; align-items: center;
    min-height: 46px; padding-bottom: 0;
    border-bottom: 1px solid var(--breu-fio);
    border-left: 2px solid transparent;
  }
  .rotas a:last-child { border-bottom: 0; }
  .rotas a[aria-current] {
    border-bottom-color: var(--breu-fio);
    border-left-color: var(--latao);
    padding-left: 12px;
  }
  /* sem JS o botao nao serve para nada, e a navegacao fica sempre aberta */
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .cabecalho { flex-wrap: wrap; height: auto; padding-bottom: 6px; }
  html:not(.js) .rotas {
    position: static; flex-direction: row; gap: 20px;
    padding-inline: 0; border: 0;
  }
  html:not(.js) .rotas a { min-height: 38px; border: 0; }

  .abertura-dizer { right: var(--goteira); bottom: 84px; }
  .abertura-dizer > div { max-width: none; }
  .rot { font-size: 10.5px; letter-spacing: 0.18em; }
  .enunciado {
    margin-top: 14px;
    font-size: 33px; font-variation-settings: "wdth" 110;
    letter-spacing: -0.034em; line-height: 1.02;
  }
  .abertura-nota { margin-top: 14px; font-size: 14.5px; line-height: 1.52; }
  .acoes { flex-direction: column; gap: 6px; margin-top: 20px; }
  .acoes .botao { height: 50px; padding: 0 18px; }

  .acervo { padding: 40px var(--goteira) 0; }
  .secao-topo {
    flex-direction: column; align-items: flex-start; gap: 0;
    padding-bottom: 24px;
  }
  .secao-titulo { gap: 16px; }
  .cifra-display { font-size: 52px; }
  .abre { font-size: 28px; font-variation-settings: "wdth" 110; letter-spacing: -0.032em; }
  .secao-nota { margin-top: 14px; font-size: 13.5px; line-height: 1.52; }
  .secao-topo .elo { margin-top: 18px; padding-bottom: 6px; font-size: 11px; }
  .elo .glifo { width: 15px; height: 15px; }

  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 24px; }
  /* Ritmo de largura cheia sobre duas meias, repetido quatro vezes: as doze
     obras sem virar coluna monotona. As proporcoes vem da prancha de 390. */
  .l-alta, .l-media, .l-baixa, .l-larga, .l-terco, .l-meio,
  .p-alta, .p-media, .p-baixa { grid-column: span 1; height: auto; }
  .l-cheia { grid-column: span 2; aspect-ratio: 362 / 250; }
  .l-meia  { grid-column: span 1; aspect-ratio: 179 / 170; }

  .cifra { padding: 9px 12px; font-size: 27px; }
  .faixa { padding: 10px 12px 11px; gap: 3px; }
  .l-titulo { font-size: 13.5px; letter-spacing: -0.02em; }
  .l-tipo { font-size: 11px; line-height: 1.3; }
  .l-vazio { min-height: 1.3em; }
  .l-local { font-size: 9.5px; letter-spacing: 0.15em; }
  .parquete .l-titulo { font-size: 13.5px; }
  .parquete .l-tipo { font-size: 11px; }
  .parquete .l-local { font-size: 9.5px; }
  .parquete .cifra { padding: 9px 12px; font-size: 27px; }
  .parquete .faixa { padding: 10px 12px 11px; }
  /* Na meia o tipo de obra sai. Sai nas duas meias da mesma fileira ao mesmo
     tempo, e por isso o registro entre vizinhas continua de pe. */
  .l-meia .l-tipo, .l-meia .l-fotos { display: none; }

  .escritorio { margin-top: 44px; padding: 40px var(--goteira) 38px; }
  .escritorio-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .escritorio-prosa { margin-top: 18px; max-width: none; font-size: 15px; line-height: 1.6; }
  .escritorio-prosa + .escritorio-prosa { margin-top: 14px; font-size: 13.5px; line-height: 1.58; }
  .perfil {
    border-left: 0; padding-left: 0;
    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--areia-fio);
  }
  .perfil-nome, .servicos-rot { font-size: 10.5px; letter-spacing: 0.18em; }
  .perfil-texto { margin-top: 14px; font-size: 13.5px; line-height: 1.58; }
  .servicos { margin-top: 28px; padding-top: 18px; }
  .lista-servicos { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
  .lista-servicos li { padding: 11px 0; gap: 12px; }
  .lista-servicos .n { font-size: 10px; }
  .lista-servicos .s { font-size: 14px; }
  .servicos-nota { margin-top: 16px; max-width: none; font-size: 12.5px; }

  .contato { padding: 40px var(--goteira) 34px; }
  .contato-grade { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contato-abre {
    font-size: 31px; font-variation-settings: "wdth" 110;
    letter-spacing: -0.032em; line-height: 1.03;
  }
  .contato-convite { margin-top: 16px; max-width: none; font-size: 15px; line-height: 1.55; }
  .contato-argumento { margin-top: 12px; max-width: none; font-size: 13.5px; line-height: 1.55; }
  .contato .botao { margin-top: 22px; height: 52px; padding: 0 18px; font-size: 11.5px; }
  .canais > li > * { min-height: 52px; padding: 12px 2px; gap: 12px; }
  .canais .k { width: 78px; }
  .canais .v { font-size: 14px; }
  .canais .glifo { display: none; }

  /* a bolha e fixa: o rodape precisa de folga para nao ficar coberto por ela */
  .rodape { padding: 20px var(--goteira) 88px; }
  .rodape .marca-fio, .rodape .marca-sub { display: none; }
  .rodape .marca-nome { font-size: 13px; }
  .rodape .rot { font-size: 9.5px; }

  .zap-bolinha { right: 14px; bottom: 14px; width: 56px; height: 56px; }
  .zap-bolinha svg { width: 28px; height: 28px; }
  @keyframes bolha-anel {
    0%   { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.5); }
    72%  { box-shadow: 0 0 0 17px rgb(37 211 102 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); }
  }

  .folha-topo { padding: 34px var(--goteira) 22px; }
  .folha-topo .abre { font-size: 31px; }
  .parquete { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }

  .prancha-topo { height: auto; padding: 12px var(--goteira); align-items: start; gap: 12px; }
  .prancha-legenda {
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 6px;
  }
  .prancha-legenda .l-titulo { font-size: 16px; }
  .prancha-legenda .l-tipo { font-size: 12px; }
  .prancha-legenda .l-local { font-size: 10px; letter-spacing: 0.15em; }
  .lamina-fita {
    flex-direction: column; scroll-snap-type: y proximity;
    padding: 6px var(--goteira);
  }
  .lamina { width: 100%; }
  .lamina img { width: 100%; height: auto; max-height: none; }
  .prancha-pe { height: auto; padding: 10px var(--goteira) 14px; }
  .prancha-folio .cifra-display { font-size: 30px; }
  .prancha-atalho { display: none; }
  .glifo-volta { transform: rotate(-90deg); }
  .lamina-nav .lamina-btn:last-child .glifo { transform: rotate(90deg); }
}

/* --------------------------------------------------------------- tablet -- */
/* De 640 a 1023px a grade continua de 2 colunas, porque a de 12 esmaga o
   ladrilho de um terco, mas tudo o mais volta ao desenho largo: cabecalho
   inteiro, botoes lado a lado, tipo entre os dois extremos calibrados e teto de
   altura no ladrilho, para que a foto nao vire cartaz. */

@media (min-width: 640px) and (max-width: 1023px) {
  .cabecalho { height: 66px; }
  .marca-nome { font-size: 19px; }
  .marca-sub { font-size: 10px; letter-spacing: 0.26em; }
  .menu-btn { display: none; }
  html:not(.js) .cabecalho { flex-wrap: nowrap; height: 66px; padding-bottom: 0; }
  html.js .rotas,
  html.js .cabecalho[data-aberto] .rotas,
  html:not(.js) .rotas {
    position: static; display: flex; flex-direction: row;
    align-items: center; gap: 28px;
    padding-inline: 0; border: 0; background: none;
  }
  .rotas a {
    min-height: 0; padding-bottom: 3px; padding-left: 0;
    border-bottom: 2px solid transparent; border-left: 0;
  }
  .rotas a[aria-current] {
    border-bottom-color: var(--latao); border-left-color: transparent;
  }

  .abertura-dizer { bottom: 54px; }
  .rot { font-size: 11px; letter-spacing: 0.19em; }
  .enunciado { margin-top: 18px; font-size: 44px; font-variation-settings: "wdth" 112; }
  .abertura-nota { margin-top: 18px; font-size: 15.5px; line-height: 1.55; max-width: 58ch; }
  .acoes { flex-direction: row; gap: 8px; margin-top: 26px; }
  .acoes .botao { height: auto; padding: 15px 22px; }

  .acervo { padding-top: 58px; }
  .secao-topo { flex-direction: row; align-items: flex-end; gap: 40px; padding-bottom: 30px; }
  .secao-titulo { gap: 22px; }
  .cifra-display { font-size: 64px; }
  .abre { font-size: 34px; font-variation-settings: "wdth" 112; letter-spacing: -0.034em; }
  .secao-nota { font-size: 14px; line-height: 1.55; }
  .secao-topo .elo { margin-top: 0; padding-bottom: 7px; font-size: 11px; }

  .grade { gap: 5px; margin-top: 20px; }
  .parquete { gap: 5px; }
  .l-cheia { max-height: 400px; }
  .l-meia { max-height: 330px; }
  .cifra, .parquete .cifra { padding: 11px 15px; font-size: 32px; }
  .faixa, .parquete .faixa { padding: 12px 15px 13px; gap: 4px; }
  .l-titulo, .parquete .l-titulo { font-size: 15px; }
  .l-tipo, .parquete .l-tipo { font-size: 12px; }
  .l-local, .parquete .l-local { font-size: 10px; letter-spacing: 0.16em; }
  /* com o ladrilho de meia largura de volta a 330px, os tres campos cabem */
  .l-meia .l-tipo, .l-meia .l-fotos { display: block; }

  .escritorio { margin-top: 62px; padding-top: 56px; padding-bottom: 52px; }
  .escritorio-prosa { max-width: 62ch; font-size: 15.5px; }
  .escritorio-prosa + .escritorio-prosa { font-size: 14px; }
  .perfil-texto { max-width: 62ch; font-size: 14px; }
  .perfil-nome, .servicos-rot { font-size: 11px; letter-spacing: 0.19em; }
  .servicos { margin-top: 40px; padding-top: 24px; }
  .lista-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 18px; }
  .lista-servicos li { padding: 12px 0; }
  .servicos-nota { max-width: 88ch; font-size: 13px; }

  .contato { padding-top: 58px; padding-bottom: 52px; }
  .contato-grade { gap: 34px; }
  .contato-abre { font-size: 38px; font-variation-settings: "wdth" 112; }
  .contato-convite { max-width: 56ch; font-size: 16px; }
  .contato-argumento { max-width: 56ch; font-size: 14px; }
  .contato .botao { width: auto; height: auto; padding: 16px 24px; font-size: 12px; }
  .canais > li > * { padding: 15px 4px; gap: 18px; }
  .canais .k { width: 96px; }
  .canais .v { font-size: 15px; }
  .canais .glifo { display: block; }

  .folha-topo { padding-top: 48px; padding-bottom: 26px; }
  .folha-topo .abre { font-size: 38px; }

  .rodape { padding-top: 24px; padding-bottom: 30px; }
  .rodape .marca-fio, .rodape .marca-sub { display: inline-block; }
  .rodape .marca-nome { font-size: 15px; }
  .rodape .rot { font-size: 10px; }

  .zap-bolinha { right: 30px; bottom: 30px; width: 58px; height: 58px; }
  .zap-bolinha svg { width: 29px; height: 29px; }

  .prancha-topo { padding: 14px 30px; }
  .prancha-legenda .l-titulo { font-size: 19px; }
  .lamina-fita { padding: 10px 30px; }
  .prancha-pe { padding: 12px 30px 16px; }
  .prancha-folio .cifra-display { font-size: 34px; }
}

/* Acima da coluna calibrada de 1344px a goteira cresce em vez do conteudo: a
   fotografia continua sangrando de borda a borda e o tipo continua na medida
   em que foi desenhado. */
@media (min-width: 1440px) {
  :root { --goteira: max(48px, calc((100vw - 1344px) / 2)); }
}

/* ------------------------------------------------------------ motricidade -- */
/* Fora da bolha o sistema e contido: transicoes de estado de 0.18s a 0.4s em
   hover de ladrilho, elo, botao e ficha. Sem revelacao por rolagem, sem
   parallax, sem contador animado. */

::view-transition-group(obra),
::view-transition-group(legenda) {
  animation-duration: 0.5s;
  animation-timing-function: var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  .zap-bolinha, .zap-bolinha::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}