/* ==========================================================================
   PORTFÓLIO MARCELO SEGUTI — folha de estilo única
   --------------------------------------------------------------------------
   A regra desta casa: TUDO que define a "cara" do site mora no bloco
   :root logo abaixo. Cor, fonte, tamanho, espaçamento e velocidade.
   Para trocar a aparência do site inteiro, mexa só ali.
   Nada de cor ou fonte escrita solta no meio do arquivo.
   ========================================================================== */

:root {

  /* --- TINTA E PAPEL ---------------------------------------------------
     Trocar estes dois valores inverte o site inteiro (por exemplo, para
     testar fundo preto: --papel:#000 e --tinta:#fff). */
  --papel:        #ffffff;
  --tinta:        #0b0b0b;

  /* Cinzas derivados. Usamos transparência da própria tinta em vez de
     cinzas fixos, para que a inversão acima continue funcionando sozinha. */
  --tinta-fraca:  color-mix(in srgb, var(--tinta) 55%, var(--papel));
  --tinta-linha:  color-mix(in srgb, var(--tinta) 18%, var(--papel));

  /* --- TIPOGRAFIA ------------------------------------------------------
     Duas famílias. O nome usa a Ekegie; os textos, a Instrument Sans.
     Trocar a fonte do nome no site inteiro = trocar um arquivo só, sem
     mexer em nenhuma linha de código (explicado no bloco @font-face). */
  --fonte-nome:   "Nome do Site", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --peso-normal:  400;
  --peso-medio:   500;
  --peso-forte:   600;

  /* Aperto entre as letras do nome. Medido no print do Readymag: a Ekegie
     está no espacejamento natural dela, sem aperto nenhum. */
  --aperto-nome:  0em;

  /* Quanto da linha o nome ocupa, medido no print do Readymag: 73,1% da
     largura do conteúdo. O risco embaixo é que vai até o fim.
     Escrito como 0,731 e não como 73,1% de propósito: dentro de uma conta
     de CSS, misturar porcentagem com divisão quebra a conta inteira em
     silêncio — foi exatamente o erro que apareceu aqui na primeira vez. */
  --nome-largura: 0.731;

  /* Quanto a fonte do nome é larga: a palavra "Marcelo Seguti" tem 9,58
     vezes a altura da letra M. Este número entra na conta do tamanho do
     nome, mais abaixo. Se um dia a fonte do nome mudar, é aqui que se
     corrige. */
  --nome-largura-fonte: 9.58;

  /* --- ESCALA DE TAMANHOS ----------------------------------------------
     clamp(mínimo, tamanho que acompanha a tela, máximo). É o que faz o
     texto encolher sozinho no celular sem precisar de regra separada. */
  /* Largura do conteúdo: a tela menos as duas margens. Vários tamanhos
     abaixo dependem dela, por isso ela tem nome próprio. */
  --largura-conteudo: calc(100vw - 2 * var(--margem-lateral));

  /* O tamanho do nome sai de uma conta, não de um número chutado: a
     largura do conteúdo, vezes a fatia que o nome deve ocupar, dividido
     pelo quanto a fonte é larga. Assim, mexer na margem ou na fatia
     acerta o tamanho do nome sozinho. */
  --t-nome:       calc(var(--largura-conteudo) * var(--nome-largura)
                       / var(--nome-largura-fonte) / 0.70);

  /* A frase de apresentação. 4,51% da largura do conteúdo — medido no
     print: a altura da caixa alta do "B" dividida pela largura do bloco. */
  --t-frase:      clamp(1.35rem, calc(var(--largura-conteudo) * 0.0451), 4.5rem);

  --t-corpo:      clamp(1rem, 1.15vw, 1.15rem);   /* texto corrido */

  /* 20 px — o tamanho que o Seguti usa no layout dele. É o tamanho do
     texto pessoal, do rodapé e do relógio. Medido no print. */
  --t-padrao:     clamp(1rem, 1.166vw, 1.375rem);
  /* NOME DO PROJETO — o tamanho agora sai da LARGURA DA PRÓPRIA THUMB, e não
     da largura da tela. Veja o bloco "O TAMANHO DO NOME" mais abaixo: esta
     variável só guarda os dois limites.

     História, para ninguém repetir: um dia isto foi 15–17 px; depois virou
     9–10 px, quando o Seguti pediu 40% menor para o nome caber numa linha;
     aí ficou pequeno demais para ler, e ele pediu maior de novo. O número
     fixo era o problema — a thumb muda de largura conforme a tela e o
     número não mudava junto. */
  --t-thumb-min:  0.5625rem;   /*  9   px — o menor que ainda cabe numa linha */
  --t-thumb-max:  0.84rem;     /* 13,5 px — escolhido pelo Seguti para o computador */
  --t-thumb:      var(--t-thumb-max);  /* valor de reserva; o certo vem abaixo */
  --t-selo:       clamp(0.75rem, 0.78vw, 0.875rem);    /* prêmios no hover */
  --t-agencia:    clamp(0.875rem, 0.97vw, 1.125rem); /* "Saatchi & Saatchi" */
  --t-miudo:      clamp(0.8125rem, 0.78vw, 0.9375rem); /* topo, legendas, rodapé */
  --t-micro:      0.6875rem;                      /* prêmios, ano */

  --entrelinha-nome:  1;
  --entrelinha-frase: 0.99;   /* medido: 55,5 px de linha para 56 px de letra */
  --entrelinha-texto: 1.45;
  --espacejamento-miudo: 0.02em;

  /* A RÉGUA embaixo do nome. Os três números saíram do print:
     espessura ~3 px numa tela de 1716, distância curta abaixo do "g", e
     alinhada pelo meio com o "Saatchi & Saatchi". */
  --regua-espessura: max(2px, 0.175vw);
  --regua-folga:     calc(var(--t-nome) * -0.0225);

  /* --- ESPAÇO ----------------------------------------------------------
     Uma margem lateral só, usada por todo mundo. Garante os 16px mínimos
     de respiro no celular que combinamos. */
  /* 13,9% de cada lado — medido no print do Readymag. No celular essa
     margem comeria a tela, então ela encolhe (regra logo abaixo do :root). */
  --margem-lateral: 13.9vw;
  /* Distância entre as thumbs. Duas versões em teste: 4 px (um fio) e
     12 px (um respiro pequeno). Trocar o valor aqui muda a grade inteira. */
  --respiro-grade:  4px;
  /* Espaço vertical a mais entre as fileiras, porque agora o nome do
     projeto mora ACIMA da thumb e precisa de ar antes da fileira de cima. */
  --respiro-fileira: clamp(1.1rem, 1.5vw, 1.75rem);
  --bloco-p:        clamp(3rem, 7vw, 7.5rem);       /* entre seções */
  --largura-maxima: 2200px;

  /* --- MOVIMENTO -------------------------------------------------------
     Só transform e opacity são animados no site inteiro, porque são as
     duas únicas coisas que o navegador move sem recalcular a página. */
  --tempo-rapido:  180ms;
  --tempo-medio:   420ms;
  --curva:         cubic-bezier(.2, .7, .2, 1);

  /* --- ALTURA DA BARRA DO TOPO ----------------------------------------- */
  --altura-topo:   clamp(3.25rem, 5vw, 4.25rem);
}

/* Em tela estreita a margem de 13,9% dos dois lados deixaria o conteúdo
   espremido no meio. Aqui ela vira uma margem de celular. */
@media (max-width: 760px) {
  :root { --margem-lateral: 5.2vw; }
}

/* ==========================================================================
   FONTES
   Ficam dentro do próprio projeto, não em servidor de terceiro. Motivo:
   uma conexão a menos para o navegador abrir, e o site não quebra se o
   serviço de fontes de fora estiver fora do ar ou bloqueado.
   font-display:swap = o texto aparece imediatamente na fonte de sistema e
   troca para a certa quando ela chega. Nunca fica invisível esperando.
   ========================================================================== */
/* A FONTE DO NOME — hoje é a Ekegie.
   Repare que o arquivo se chama "nome-do-site.woff2", e não o nome da
   fonte. Isso é de propósito: para trocar a fonte do nome no site
   inteiro, basta renomear o arquivo novo para "nome-do-site.woff2" e
   jogar por cima deste, na pasta fonts. Nenhuma linha de código muda.
   Se a fonte nova tiver largura diferente, corrija também o número
   --nome-largura-fonte lá em cima. */
@font-face {
  font-family: "Nome do Site";
  src: url("../fonts/nome-do-site.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ==========================================================================
   REGRAS DE BASE
   ========================================================================== */

/* Combinado desde o primeiro dia: um campo escondido fica escondido de
   verdade. Sem o !important, qualquer regra de classe que defina display
   ganha do atributo hidden e o elemento reaparece sem avisar. */
[hidden] { display: none !important; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-normal);
  font-size: var(--t-corpo);
  line-height: var(--entrelinha-texto);
  -webkit-font-smoothing: antialiased;
  /* A margem lateral fica aqui, num lugar só. padding-block e não o atalho
     padding, para nunca zerar as laterais por acidente. */
  padding-inline: var(--margem-lateral);
  padding-block: 0;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Contorno de foco visível para quem navega pelo teclado. Não é enfeite:
   sem isso a pessoa não sabe onde está. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.embrulho {
  max-width: var(--largura-maxima);
  margin-inline: auto;
}

/* Texto que só existe para leitores de tela. */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   BARRA DO TOPO
   Some quando a pessoa rola para baixo (está lendo, quer a tela limpa) e
   volta quando ela sobe (está procurando algo). O movimento é só um
   transform, então não custa nada mesmo em computador fraco.
   ========================================================================== */
.topo {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--margem-lateral);
  font-size: var(--t-miudo);
  letter-spacing: var(--espacejamento-miudo);
  /* Fundo sólido, sem desfoque. backdrop-filter em elemento fixo é o jeito
     mais rápido de travar a rolagem — combinamos não usar. */
  background: var(--papel);
  transform: translateY(0);
}

/* A barra não se esconde mais na rolagem: os links do topo precisam
   existir desde que a página abre. A regra que a escondia foi removida
   daqui e do JavaScript. */

.topo__assinatura {
  font-family: var(--fonte-nome);
  font-size: calc(var(--t-miudo) * 1.35);
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity var(--tempo-medio) var(--curva),
              transform var(--tempo-medio) var(--curva);
  pointer-events: none;
}
/* Na Home, o nome só aparece na barra depois que o nome gigante sai de cena. */
.topo[data-passou="sim"] .topo__assinatura { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Nas páginas internas ele já nasce visível. */
.topo[data-assinatura="sempre"] .topo__assinatura { opacity: 1; transform: translateY(0); pointer-events: auto; }

.topo__links { display: flex; gap: clamp(0.9rem, 1.4vw, 1.75rem); }

/* Link do topo e do rodapé: risco de tinta que cresce da esquerda.
   Escala horizontal é transform, então é barato. */
.link-tinta { position: relative; padding-block-end: 2px; }
.link-tinta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tempo-rapido) var(--curva);
}
.link-tinta:hover::after,
.link-tinta:focus-visible::after { transform: scaleX(1); }
.link-tinta[aria-current="page"]::after { transform: scaleX(1); }

/* ==========================================================================
   ABERTURA DA HOME — o nome
   ========================================================================== */
.abertura { padding-block-start: calc(var(--altura-topo) + clamp(1rem, 3vw, 3rem)); }

.nome {
  position: relative;
  display: block;
  margin: 0;
  font-family: var(--fonte-nome);
  font-weight: var(--peso-normal);
  font-size: var(--t-nome);
  line-height: var(--entrelinha-nome);
  letter-spacing: var(--aperto-nome);
  white-space: nowrap;
  /* Kerning desligado: no layout do Seguti (feito no Readymag) os pares de
     letras não são aproximados, e o nome fica 8% mais largo por causa
     disso. Ligando o kerning o nome fecha e deixa de bater com o layout
     dele. Se um dia ele preferir o encaixe automático, é só apagar esta
     linha. */
  font-kerning: none;
  font-feature-settings: "kern" 0;
  /* O tamanho acima já deixa o nome quase no ponto sozinho. O JavaScript
     depois ajusta no fio para ele parar exatamente nos dois terços da
     linha — mas se o JavaScript falhar, continua bonito assim mesmo. */
}

.nome__texto { display: inline-block; }

/* O grafiti sobre o nome saiu por enquanto, a pedido do Seguti: ele vai
   mandar a referência dele mais para o fim. O lugar dele era aqui. */

/* A LINHA EMBAIXO DO NOME, com a agência pendurada na ponta direita.
   Três coisas foram corrigidas aqui depois que o Seguti apontou:
   1. Ela não encosta no "g" do nome — fica uma folga curta abaixo dele.
   2. Ela é mais grossa que um fio de cabelo.
   3. Ela é alinhada pelo MEIO com o texto "Saatchi & Saatchi", e não pela
      base dele. Por isso align-items: center, e não baseline. */
.regua {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-block-start: var(--regua-folga);
}
.regua__traco {
  flex: 1 1 auto;
  height: var(--regua-espessura);
  background: var(--tinta);
}
.regua__agencia {
  flex: 0 0 auto;
  font-size: var(--t-agencia);
  letter-spacing: var(--espacejamento-miudo);
  line-height: 1.1;
}

/* A FRASE DE APRESENTAÇÃO.
   A quebra das linhas é a do layout do Seguti, feita à mão (os <br> no
   HTML) e não deixada por conta do navegador — era pedido dele que a
   quebra fosse exatamente aquela. Em tela estreita os <br> são desligados
   e o texto volta a quebrar sozinho, senão as linhas vazariam. */
.frase {
  margin: clamp(1.25rem, 1.88vw, 2.75rem) 0 0;
  font-size: var(--t-frase);
  line-height: var(--entrelinha-frase);
  letter-spacing: -0.015em;
}
@media (max-width: 900px) {
  .frase br { display: none; }
}

/* ==========================================================================
   GRADE DE PROJETOS
   Thumbs quadradas, três por linha, agora com respiro entre elas.
   No celular vira uma coluna só; em telas médias, duas.
   ========================================================================== */
.trabalhos { padding-block-start: var(--bloco-p); }

.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Duas medidas diferentes de propósito: coladas na horizontal (a
     distância que o Seguti pediu) e com ar na vertical, porque o nome do
     projeto fica acima da thumb e precisa não encostar na fileira de cima.
     Isto continua valendo no CELULAR, onde o nome ainda está escrito ali.
     No computador o nome saiu (virou a etiqueta de vidro) e o ar deixou de
     ter motivo — veja o bloco logo abaixo. */
  column-gap: var(--respiro-grade);
  row-gap: var(--respiro-fileira);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* AS FILEIRAS SE JUNTAM, no computador — pedido do Seguti.
   O vão vertical existia para o nome do projeto, que ficava escrito acima de
   cada foto. No computador esse nome saiu: virou a etiqueta de vidro que
   segue o cursor. Sem o nome ali, o ar entre as fileiras não separava mais
   nada — só abria um buraco branco no meio da grade.

   Agora o vão é o MESMO dos lados: 4 px em toda a volta. Não é zero de
   propósito: esse fio fino é o que separa uma foto da outra. Sem ele, duas
   imagens vizinhas de cor parecida encostam e viram uma mancha só, e some a
   divisão entre dois trabalhos diferentes.

   A pergunta é pelo APARELHO, e não pelo tamanho da tela: quem usa um
   notebook com a janela estreita continua tendo mouse, continua vendo a
   etiqueta, e por isso também não precisa do vão. */
@media (hover: hover) and (pointer: fine) {
  .grade { row-gap: var(--respiro-grade); }
}

/* No celular ficam duas por linha, e não uma. Com 13 projetos, uma coluna
   só transformava a Home em treze telas de rolagem — quem está de celular
   desiste antes do fim. */
@media (max-width: 900px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .grade { grid-template-columns: 1fr; } }

.projeto { position: relative; }

.projeto__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  overflow: hidden;
  background: var(--tinta-linha);
}
.projeto__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms var(--curva);
}
.projeto:hover .projeto__thumb img,
.projeto:focus-within .projeto__thumb img { transform: scale(1.03); }

/* O NOME DO PROJETO, agora ACIMA da thumb e em peso médio — pedido do
   Seguti. Embaixo da thumb não fica mais nada: cliente e prêmios passaram
   para o estado de mouse em cima. */
.projeto__nome {
  margin: 0 0 0.45rem;
  font-size: var(--t-thumb);
  font-weight: var(--peso-medio);
  letter-spacing: var(--espacejamento-miudo);
  line-height: 1.2;
}

/* O cliente vem depois do nome da ideia, na mesma linha e mais claro,
   para o nome da ideia continuar sendo o que se lê primeiro. */
.projeto__cliente { color: var(--tinta-fraca); }

/* ---------------------------------------------------------------------------
   O TAMANHO DO NOME

   O Seguti quer duas coisas ao mesmo tempo: nome legível (13,5 px) e nome
   sempre numa linha só. Medindo, elas brigam — mas não brigam do jeito que
   parecia. O que faz o nome quebrar NÃO é a largura da tela: é a largura da
   THUMB. E a thumb muda de largura de um jeito que não acompanha a tela,
   porque a grade troca de 3 para 2 e para 1 coluna. Prova disso: com 13,5 px
   fixos, nada quebrava a 900 px de tela, mas TRÊS nomes quebravam a 1024 px,
   onde ainda são três colunas e a thumb fica mais estreita.

   Então o tamanho passa a ser uma porcentagem da largura da thumb, com dois
   limites: nunca menor que 9 px (abaixo disso não se lê) e nunca maior que
   13,5 px (acima disso a legenda começa a brigar com o nome do topo).

   A conta usa a largura da GRADE, e não a da thumb, porque a thumb é irmã do
   nome — o nome não tem como perguntar a largura dela. Por isso o fator muda
   junto com o número de colunas: com 3 colunas a thumb é um terço da grade,
   com 2 é metade, com 1 é a grade inteira.

   ATENÇÃO, FUTURO: o container-type vai na .grade e NUNCA na .projeto. A
   .projeto usa subgrid (é o que mantém as imagens alinhadas entre si); pôr
   containment nela quebraria esse alinhamento e o efeito escada voltaria. */
.grade { container-type: inline-size; }

@supports (container-type: inline-size) {
  .projeto__nome {
    /* 3 colunas: thumb ≈ 33% da grade; 5% da thumb ≈ 1,67% da grade */
    font-size: clamp(var(--t-thumb-min), 1.67cqi, var(--t-thumb-max));
  }
  @media (max-width: 900px) {
    /* 2 colunas: thumb ≈ 50% da grade */
    .projeto__nome { font-size: clamp(var(--t-thumb-min), 2.5cqi, var(--t-thumb-max)); }
  }
  @media (max-width: 380px) {
    /* 1 coluna: a thumb é a grade inteira */
    .projeto__nome { font-size: clamp(var(--t-thumb-min), 5cqi, var(--t-thumb-max)); }
  }
}

/* ---------------------------------------------------------------------------
   AS COLUNAS SÃO MEDIDAS JUNTAS — EM QUALQUER LARGURA
   O defeito: numa fileira de projetos, um nome curto ocupa uma linha e um
   comprido ocupa duas, e aí a imagem de um lado começa mais acima do que a
   do outro. A fileira inteira fica torta.

   O conserto: as legendas de uma mesma fileira recebem sempre a mesma altura
   — a da mais alta delas —, seja de uma, duas ou três linhas. Nada é cortado
   e nada tem altura chutada. (É o `subgrid`: a caixa de cada projeto deixa de
   ter grade própria e passa a usar as linhas da grade de cima.)

   ATENÇÃO, FUTURO: isto já existiu valendo só até 900 px de largura, e por
   isso o celular ficava certo e o computador continuava torto. O Seguti viu
   antes de mim. Não devolva este bloco para dentro de uma medida de tela.

   A altura reservada de 2,5 linhas continua como PLANO B, para navegador
   anterior a 2022. Lá o site não quebra: volta a se comportar como antes.
   --------------------------------------------------------------------------- */
.projeto__nome {
  line-height: 1.25;
  margin-bottom: 0.35rem;
  min-height: 2.5em;           /* PLANO B: 2 linhas × 1,25 de altura */
}

@supports (grid-template-rows: subgrid) {
  .projeto {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;          /* o nome e a imagem: duas faixas da grade */
    /* Sem esta linha o projeto herda o respiro ENTRE fileiras e o enfia
       entre o nome e a própria imagem: o nome ficava mais perto da imagem
       de cima do que da sua. Medi: 23 px para dentro contra 18 entre as
       fileiras — exatamente ao contrário do que a leitura pede. */
    row-gap: 0;
  }
  /* Com as colunas medidas juntas, altura chutada só atrapalha. */
  .projeto__nome { min-height: 0; }

  /* NO COMPUTADOR NÃO EXISTE MAIS NOME PARA ALINHAR.
     Ele virou a etiqueta de vidro que segue o cursor, e a faixa dele ficou
     vazia. Manter o alinhamento conjunto aí não conserta mais nada e ainda
     causa um defeito: a faixa da imagem é calculada por um caminho e a
     altura da foto por outro (a proporção 1:1 sobre a largura dela), e os
     dois davam números com 2 px de diferença. Essa sobra aparecia como vão
     a mais entre as fileiras — o Seguti pediu 4 px e chegavam 6.

     Aqui o cartão volta a ser um bloco comum, uma faixa só. O vão entre as
     fileiras passa a ser exatamente o da grade.

     ISTO NÃO CONTRADIZ O AVISO ACIMA. Lá o erro foi restringir o alinhamento
     a uma MEDIDA DE TELA enquanto os nomes apareciam nos dois lados. Aqui a
     pergunta é pelo APARELHO, e ela é a mesma que faz o nome sumir: onde não
     há nome, não há o que alinhar. Se um dia o nome voltar para cima da foto
     no computador, este bloco tem que sair junto. */
  @media (hover: hover) and (pointer: fine) {
    .projeto {
      display: block;
      grid-row: auto;
    }
  }
}

/* ---------------------------------------------------------------------------
   A ETIQUETA DE VIDRO QUE SEGUE O CURSOR

   Pedido do Seguti, com a referência da Apple: o nome da ideia deixa de ficar
   escrito acima da foto e passa a aparecer dentro de uma pílula de vidro que
   anda junto com o cursor por dentro da imagem.

   SÓ NO COMPUTADOR. A pergunta é pelo APARELHO e não pelo tamanho da tela:
   quem usa um notebook com a janela estreita continua tendo mouse, e continua
   vendo. Num celular não existe "passar o mouse", então nada disto liga.

   O vidro de verdade: um borrão do que está atrás (backdrop-filter), uma
   camada clara por cima para o texto ter contraste, e um fio de luz na borda
   — mais forte em cima, como se a luz viesse de lá. É isso que faz parecer
   vidro e não um retângulo cinza.
   ------------------------------------------------------------------------- */
/* DUAS CAMADAS, e isto e o miolo da coisa.

   A de fora (.etiqueta-cursor) so ANDA. Ela nao tem transicao nenhuma, e por
   isso gruda no cursor: quem decide o quanto ela persegue o mouse e um numero
   so, no JavaScript. Ja houve uma transicao aqui, somando com o atraso do
   JavaScript — dois atrasos empilhados, e a pilula boiava atras do mouse.

   A de dentro (.etiqueta-cursor__caixa) so APARECE. E ela que tem o vidro,
   a animacao de entrada e a de saida. Separadas assim, uma nao atrapalha a
   outra: da para ter entrada bonita E movimento colado.

   ATENCAO, FUTURO: nao devolva transition para a camada de fora. */
.etiqueta-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  /* --x e --y vem do JavaScript, EM PIXELS, contados do canto de cima a
     esquerda da foto. Nunca em porcentagem: numa conta de translate o
     navegador mede porcentagem em cima do tamanho da PROPRIA pilula, e ela
     ia parar longe do cursor. O -50% ao lado e de proposito e e da propria
     pilula: e ele que a centra no ponto. */
  transform: translate3d(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%), 0);
  pointer-events: none;   /* nunca rouba o clique do link da foto */
  will-change: transform;
}

.etiqueta-cursor__caixa {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 0.62em 1.35em;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: clamp(0.8rem, 1.25cqi, 1.05rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;

  /* A ENTRADA: a pilula surge crescendo um tiquinho e ganhando foco, como se
     estivesse se materializando no vidro. Curta de proposito — ela aparece a
     cada foto que o mouse cruza, e uma animacao longa cansaria depois da
     terceira. */
  opacity: var(--ver, 0);
  transform: scale(var(--escala, 0.82));
  transition: opacity 180ms var(--curva),
              transform 260ms cubic-bezier(0.22, 1.2, 0.36, 1);

  /* O PADRAO E LETRA ESCURA, e nao branca — de proposito, e pelo mesmo
     motivo que os logos dos premios ja seguem.

     O site mede o brilho de cada foto e escreve data-tom nela. So que essa
     medida PODE FALHAR EM SILENCIO: a foto vem de outro servidor, e se um
     dia faltar a permissao de ler os pixels, o navegador proibe medir sem
     dar mensagem nenhuma. Quando isso acontece, nao existe data-tom.

     Entao o padrao tem que ser o lado que sobrevive a falha. Letra escura
     sobre vidro claro le-se numa foto clara e continua legivel numa media;
     letra branca numa foto clara desaparece por completo. O branco fica
     reservado para quem foi MEDIDO como escuro. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 8px 26px rgba(0, 0, 0, 0.18);
  color: #0b0b0b;
  text-shadow: none;
}

/* Foto MEDIDA como escura: ai sim o vidro escurece e a letra fica branca. */
.projeto[data-tom="escuro"] .etiqueta-cursor__caixa {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 8px 26px rgba(0, 0, 0, 0.35);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.etiqueta-cursor__cliente { opacity: 0.72; }

/* O COMING SOON DEBAIXO DA PILULA.
   Ele mora dentro da camada que ANDA, e nao da que aparece: assim ele viaja
   colado na pilula, sempre na mesma distancia dela. A animacao de entrada e
   a mesma da pilula, so que um tiquinho depois — primeiro chega o nome,
   depois o aviso. */
.etiqueta-cursor__breve {
  display: block;
  margin-top: 0.55em;
  text-align: center;
  white-space: nowrap;
  font-family: var(--fonte-texto);
  font-size: clamp(0.62rem, 0.9cqi, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0b0b0b;
  opacity: var(--ver, 0);
  transition: opacity 180ms var(--curva) 70ms;
}
.projeto[data-tom="escuro"] .etiqueta-cursor__breve {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* Quem prefere menos movimento na tela: a etiqueta continua existindo, mas
   fica parada no meio da foto em vez de correr atrás do cursor. */
@media (prefers-reduced-motion: reduce) {
  .etiqueta-cursor__caixa { transition: opacity 160ms linear; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  /* O NOME SAI DE CIMA DA FOTO — mas NÃO some do arquivo.
     Ele continua escrito aqui dentro, invisível: é assim que o Google acha
     os projetos e é assim que um leitor de tela lê a Home. Se eu tivesse
     apagado de verdade, a Home do Seguti seria treze imagens sem uma
     palavra, e não existiria para quem procura no Google.

     ATENÇÃO, FUTURO — E ESTE ERRO JÁ ACONTECEU:
     esconder o nome com "position: absolute" PARECE certo e quebra o site.
     Motivo: o retângulo invisível que faz o cartão inteiro ser clicável se
     apoia no primeiro parente posicionado que encontra. Com o nome
     posicionado, esse parente virou o nome — e o retângulo encolheu de uma
     foto inteira para 1 pixel. Resultado: clicar na foto não abria nada, e
     nenhum erro aparecia em lugar nenhum. O Seguti descobriu clicando.

     Por isso aqui o nome fica sem posicionamento e só perde a altura, e é o
     PRÓPRIO LINK que vira o retângulo de clique, apoiado no cartão. O texto
     continua lá dentro, empurrado para fora da vista pelo text-indent — que
     esconde do olho sem esconder do leitor de tela. */
  .projeto__nome {
    height: 0;
    margin: 0;
    padding: 0;
  }
  .projeto__alvo {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
  }
  /* Com o nome fora do fluxo, a primeira faixa da grade some para TODOS os
     projetos ao mesmo tempo — as imagens continuam alinhadas entre si. */
}
/* Os prêmios descem para o rodapé da foto — a regra mora lá embaixo, DEPOIS
   da definição original de .thumb__premios. Aqui em cima ela perdia a
   disputa e os prêmios continuavam no centro. */

/* O PAINEL DE PRÊMIOS que aparece com o mouse em cima da thumb.
   Um véu quase branco entra por baixo do texto: sem ele, os nomes dos
   festivais sumiriam em cima de uma foto clara e virariam borrão em cima
   de uma escura. Só opacity é animada, então não custa nada rolar a
   página com treze destes na tela. */
.thumb__premios {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--tempo-medio) var(--curva);
  pointer-events: none;
}
.projeto:hover .thumb__premios,
.projeto:focus-within .thumb__premios { opacity: 1; }

/* COMING SOON
   Mesmo painel dos prêmios, com uma palavra no lugar deles. Herda o véu e a
   cor do tom da thumb, então funciona igual numa imagem clara e numa escura.
   Sem link: a página do projeto ainda não existe, e mandar alguém para uma
   página que não existe é pior do que não mandar. */
.breve {
  position: relative;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* NO CELULAR OS PRÊMIOS NÃO APARECEM AQUI — decisão do Seguti.
   No celular não existe "passar o mouse em cima": o primeiro toque já abre a
   página do projeto, e é lá que os prêmios ficam. Mostrar meio segundo de
   painel antes de a página trocar seria só um piscar sem utilidade.
   A regra pergunta pelo aparelho, não pelo tamanho da tela: quem usa um
   notebook com janela estreita continua tendo mouse, e continua vendo. */
@media (hover: none), (pointer: coarse) {
  .thumb__premios { display: none; }

  /* O Coming Soon é a exceção, e por isso vem DEPOIS da linha acima: as duas
     regras têm o mesmo peso, então quem vem por último manda. Os prêmios têm
     outro lugar para morar (a página do projeto); este aviso não tem — se ele
     dependesse do mouse, quem abre do telefone nunca saberia que aquele
     trabalho ainda não está no ar. */
  .thumb__premios--breve { display: flex; opacity: 1; }

  /* Os selos escondem-se tambem DENTRO do painel Coming Soon. No celular os
     premios nao aparecem na Home, e um projeto por publicar nao e excecao:
     sem esta linha, o unico painel que continua visivel no telefone passaria
     a mostrar os logos que todos os outros escondem. */
  .thumb__premios--breve .selo { display: none; }
}

/* O VÉU E A COR DO PAINEL SEGUEM O TOM DA THUMB.
   O JavaScript olha a imagem quando ela chega, calcula se ela é clara ou
   escura, e escreve data-tom no projeto. Thumb clara: véu branco e marcas
   pretas. Thumb escura: véu preto e marcas brancas. Assim nenhuma imagem
   futura consegue engolir os logos.
   Se o JavaScript não rodar, fica valendo o claro, que continua legível. */
.thumb__premios { color: var(--tinta); }

/* O VEU QUASE OPACO VIROU UM DESFOQUE DA PROPRIA FOTO.
   Antes, com o mouse em cima, uma chapa branca (ou preta) cobria a imagem
   quase por inteiro e so os logos ficavam. O Seguti: a foto sumia. Agora a
   foto CONTINUA ali, desfocada, e os logos ficam por cima dela.

   O veu nao foi apagado: ele virou um veu leve, e continua existindo por um
   motivo. Desfoque sozinho nao garante contraste — uma foto muito clara
   desfocada continua muito clara, e um logo branco por cima dela some. O
   veu leve empurra o brilho para o lado certo do tom medido. */
.thumb__veu {
  position: absolute;
  inset: 0;
  background: var(--papel);
  opacity: 0.30;
}
.projeto[data-tom="escuro"] .thumb__premios { color: var(--papel); }
.projeto[data-tom="escuro"] .thumb__veu { background: var(--tinta); }

/* O DESFOQUE DA FOTO, so com o mouse em cima e so em quem tem mouse.
   O scale(1.06) junto nao e enfeite: um desfoque deixa as bordas da imagem
   raladas, transparentes, e aparece a moldura por tras. Aumentar um tiquinho
   empurra essa borda ralada para fora do quadro. */
@media (hover: hover) and (pointer: fine) {
  .projeto__thumb img {
    transition: transform 600ms var(--curva), filter 420ms var(--curva);
  }
  .projeto:hover .projeto__thumb img,
  .projeto:focus-within .projeto__thumb img {
    filter: blur(14px);
    transform: scale(1.06);
  }
}

.selo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-selo);
  letter-spacing: 0.04em;
}

/* O LOGO DE CADA FESTIVAL.
   Existe UM arquivo por festival, e não dois. O arquivo entra como
   máscara — ou seja, como um recorte — e a COR vem do CSS. É isso que
   deixa a troca "inteligente": o mesmo arquivo vira preto sobre thumb
   clara e branco sobre thumb escura, sem ninguém exportar nada duas vezes.
   Quando um prêmio novo chegar, é um arquivo só em assets/premios. */
.selo__logo {
  display: block;
  flex: 0 0 auto;
  /* altura = a altura base vezes o peso deste logo;
     largura = essa altura vezes a proporção do desenho. */
  block-size: calc(var(--alt-logo) * var(--peso, 1));
  inline-size: calc(var(--alt-logo) * var(--peso, 1) * var(--ar, 2));
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* Um prêmio cujo arquivo de logo ainda não chegou aparece escrito, em vez
   de deixar um buraco. Hoje é o caso do LIA e do Spotlight. */
.selo--sem-logo { font-size: var(--t-selo); letter-spacing: 0.04em; }

/* TAMANHO E ESPAÇAMENTO DOS LOGOS
   Tudo aqui saiu de medir, pixel a pixel, a imagem de referência que o
   Seguti desenhou. As três medidas estão em proporção da largura da
   thumb, e não em pixels fixos: assim a thumb pode crescer ou encolher e o
   conjunto continua com a mesma cara.
      altura do maior logo .... 6,9% da largura da thumb
      espaço entre colunas .... 4,9%
      espaço entre fileiras ... 2,9%
   Cada logo tem a SUA altura (o --peso), porque o Seguti equilibrou os
   19 no olho e não existe fórmula que reproduza isso: um logotipo
   comprido como o do Clio precisa ser bem mais baixo que uma marca
   compacta como a do D&AD para pesarem igual na página. */
.projeto__thumb { container-type: inline-size; }

.thumb__premios {
  overflow: hidden;
  /* Reserva, para navegador antigo que não entenda medida por container:
     uma aproximação pela largura da tela. A linha seguinte corrige. */
  --alt-logo: 1.0vw;
  gap: 0.45vw 0.8vw;
  padding: 0.9vw;
}
@supports (width: 1cqi) {
  .thumb__premios {
    /* LOGOS MENORES, a pedido do Seguti: eram 6.9cqi (perto de 7% da largura
       da foto) e passaram para 4.4cqi. Com a foto desfocada por tras em vez
       da chapa opaca, os logos nao precisam mais dominar o quadro. */
    --alt-logo: 4.4cqi;
    gap: 2cqi 3.2cqi;
    padding: 4cqi;
  }
}



/* AS DUAS VERSÕES DO HOVER.
   O site inteiro obedece ao atributo data-premios lá no <html>:
   "logos"  = os quadrados com as iniciais, centralizados na thumb;
   "nomes"  = só os nomes dos festivais, em letra pequena.
   Trocar de versão é trocar uma palavra no HTML. */
html[data-premios="nomes"] .selo__logo { display: none; }
html[data-premios="nomes"] .thumb__premios { gap: 0.15rem 0.9rem; }
html[data-premios="nomes"] .selo { flex-direction: row; }
html[data-premios="logos"] .selo__nome {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* OS PRÊMIOS DESCEM PARA O RODAPÉ DA FOTO, no computador.
   Pedido do Seguti: no centro eles brigariam com a etiqueta de vidro, que
   anda por ali seguindo o cursor.

   ATENÇÃO, FUTURO: esta regra precisa ficar DEPOIS da definição de
   .thumb__premios lá em cima. Ela já esteve antes, e perdia a disputa em
   silêncio — os prêmios continuavam no centro e nada acusava o erro. Não
   mova este bloco para junto do resto da etiqueta. */
@media (hover: hover) and (pointer: fine) {
  .thumb__premios {
    align-content: end;
    padding-bottom: 1.1rem;
  }

  /* O COMING SOON DO MEIO DA FOTO SOME NO COMPUTADOR.
     Ele nao foi apagado: aqui o aviso passou a viajar embaixo da pilula, e
     deixar os dois ligados seria a mesma frase escrita duas vezes na mesma
     imagem. No celular, onde nao existe pilula, aquele e o unico aviso — e
     por isso a regra pergunta pelo APARELHO, e nao pelo tamanho da tela. */
  .thumb__premios--breve > .breve { display: none; }
}

/* O link cobre o card inteiro — nome E imagem — sem precisar embrulhar tudo
   num <a>.

   O z-index não é enfeite: sem ele, este retângulo invisível fica DEBAIXO da
   imagem. A caixa da thumb também é posicionada (precisa ser, por causa do
   painel de prêmios) e vem depois no HTML, então ela ganharia por chegar
   por último. O resultado era o pior tipo de defeito: o nome abria o projeto,
   a imagem não abria nada, e não havia erro nenhum para denunciar isso.

   Subir este retângulo não esconde nada: ele é transparente, e o painel de
   prêmios não recebe clique (pointer-events: none), então continua
   aparecendo por baixo, no lugar de sempre. */
.projeto__alvo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* A mão do mouse em cima da imagem inteira, não só do texto: o cursor é o
   que avisa que aquilo ali é clicável. */
.projeto__thumb { cursor: pointer; }

/* ==========================================================================
   O TEXTO PESSOAL
   Recuado em relação ao resto e numa coluna estreita, como no layout do
   Seguti. Não tem efeito de entrada nenhum, a pedido dele.
   ========================================================================== */
.pessoal {
  margin-block-start: clamp(2.5rem, 6vw, 6.5rem);
  /* Começa na mesma linha vertical das thumbs — pedido do Seguti. Era
     recuado antes. */
  margin-inline-start: 0;
  max-inline-size: 62%;
  font-size: var(--t-padrao);
  line-height: 1.2;
}
.pessoal p { margin: 0 0 1.2em; }
.pessoal p:last-child { margin-block-end: 0; }
@media (max-width: 760px) {
  .pessoal { max-inline-size: none; }
}

/* ==========================================================================
   RODAPÉ
   Montado em cima da referência do Seguti: tudo no mesmo tamanho, a
   chamada recuada, e a coluna de contato alinhada pela ESQUERDA — era
   alinhada pela direita antes, e é a diferença mais visível.
   A primeira coluna vai de 0 a 73,7% da largura do conteúdo; a chamada
   começa a 28,8% dela, que dá os 21% do layout dele.
   ========================================================================== */
.rodape {
  margin-block-start: var(--bloco-p);
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 73.7fr 26.3fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  font-size: var(--t-padrao);
  line-height: 1.2;
}

/* Alinhado com as thumbs, na margem do conteúdo — pedido do Seguti.
   Antes era recuado a 28,8%, seguindo o print antigo. */
.rodape__esquerda { margin-inline-start: 0; }
.rodape__chamado {
  margin: 0;
  /* 15% maior que o padrão do rodapé — pedido do Seguti. */
  font-size: calc(var(--t-padrao) * 1.15);
}

/* ==========================================================================
   OS DOIS RELÓGIOS — só um aparece; quem manda é data-relogio no <html>.
   ========================================================================== */
html[data-relogio="linha"]  .cartao        { display: none; }
html[data-relogio="cartao"] .relogio-linha { display: none; }

/* --- VERSÃO 1: a de hoje, sutil, com o ícone do tempo ------------------- */
.relogio-linha {
  margin: 1.4em 0 0;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;  /* os segundos não "pulam" ao virar */
}
.relogio__data, .relogio__hora { display: block; }
.relogio__tempo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-inline-start: 0.6em;
}
.relogio__tempo svg { inline-size: 1.05em; block-size: 1.05em; }

/* --- VERSÃO 2: o cartão ------------------------------------------------- */
.cartao {
  margin: 1.4em 0 0;
  margin-inline-start: 0;
  max-inline-size: 24rem;
  padding: clamp(0.9rem, 1.2vw, 1.25rem);
  border: 1px solid var(--tinta-linha);
  border-radius: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.cartao__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-miudo);
  color: var(--tinta-fraca);
}
.cartao__tempo { display: inline-flex; align-items: center; gap: 0.4em; }
.cartao__tempo svg { inline-size: 1.1em; block-size: 1.1em; }
.cartao__data {
  margin: 0.5rem 0 0.9rem;
  font-family: var(--fonte-nome);
  font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  line-height: 1;
}
.cartao__semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin: 0; padding: 0;
  list-style: none;
  text-align: center;
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
}
.cartao__semana li { display: grid; gap: 0.3rem; justify-items: center; }
.cartao__num {
  display: grid;
  place-items: center;
  inline-size: 1.9em;
  block-size: 1.9em;
  border-radius: 50%;
  font-size: var(--t-miudo);
}
.cartao__semana li[aria-current="date"] { color: var(--tinta); }
.cartao__semana li[aria-current="date"] .cartao__num {
  background: var(--tinta);
  color: var(--papel);
}
.cartao__hora {
  margin: 0.9rem 0 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--tinta-linha);
  font-size: var(--t-miudo);
  color: var(--tinta-fraca);
}

.rodape__contato { display: grid; gap: 1.4em; }
.rodape__contato p { margin: 0; }
.rodape__rotulo { color: var(--tinta-fraca); }
.rodape__forte { font-weight: var(--peso-forte); }

.rodape__linha-final {
  grid-column: 1 / -1;
  margin: clamp(3rem, 7vw, 7rem) 0 0;
  font-size: var(--t-miudo);
  color: var(--tinta-fraca);
}

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

/* ==========================================================================
   SAÍDA DE EMERGÊNCIA
   O site aparece inteiro sem JavaScript. Estas regras existem só para o
   caso de um script falhar no meio: nada fica invisível esperando por ele.
   ========================================================================== */
.js-entrada { opacity: 1; transform: none; }

/* Quem pediu menos movimento no sistema recebe o site parado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Modo leve: ligado pelo próprio site quando ele percebe que o computador
   está engasgando. Desliga os movimentos mais caros e mantém o conteúdo. */
html[data-modo-leve="sim"] .projeto__thumb img { transition: none; }
html[data-modo-leve="sim"] .nome__tinta { transition: opacity var(--tempo-rapido) linear; }