/* ==========================================================================
   PÁGINA DE PROJETO
   --------------------------------------------------------------------------
   Herda TUDO de estilo.css: cores, fontes, barra do topo, tamanhos. Aqui
   mora só o que é desta página — as duas colunas, a coluna parada da
   esquerda, os blocos do case e a fileira do fim.

   A regra que organiza o arquivo: nada aqui encosta na borda da tela. A
   coluna da esquerda está sempre presente, e o case vive no espaço que
   sobra. Foi a escolha do Seguti, contra a abertura de ponta a ponta do
   site antigo dele, e é o que torna esta página simples de manter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O TEMA ESCURO
   Não é um filtro nem uma inversão: são os mesmos nomes de cor com outros
   valores. Por isso tudo o que já existe no site continua funcionando sem
   saber que mudou de tema — a régua, os botões, o relógio, a barra do topo.
   Quem liga é o atributo data-tema no <html>, que o painel vai gravar por
   projeto.
   -------------------------------------------------------------------------- */
html[data-tema="escuro"] {
  --papel:        #0d0d0d;
  --tinta:        #f2f2f2;
  --tinta-fraca:  #8f8f8f;
  --linha:        #262626;
  --linha-forte:  #3a3a3a;
  --tinta-linha:  #1a1a1a;
  --area:         #141414;
  color-scheme: dark;
}
html[data-tema="escuro"] body { background: var(--papel); color: var(--tinta); }

/* --------------------------------------------------------------------------
   A MARGEM DESTA PÁGINA É MENOR QUE A DA HOME
   Pedido do Seguti: a coluna da esquerda colada no canto, como na
   referência. A margem lateral mora num lugar só, no <body>, então mudar
   este número move a página inteira — inclusive a barra do topo. É de
   propósito: assim o "Seguti" lá em cima e o nome do projeto aqui embaixo
   ficam na mesma linha vertical, em vez de um recuado em relação ao outro.
   -------------------------------------------------------------------------- */
html[data-pagina="projeto"] { --margem-lateral: clamp(20px, 2vw, 50px); }

/* E o limite de largura do meio da tela some AQUI.
   Era ele o culpado do recuo que o Seguti viu: o site inteiro tem um teto de
   2200 px e se centraliza sozinho, então numa tela de 2560 sobravam 146 px de
   cada lado — a barra do topo ficava em 34 e a coluna em 173, e parecia que
   a margem não tinha sido aplicada. Tinha; era o teto.
   O preço desta linha: em telas muito largas a coluna da direita fica muito
   larga, e as imagens grandes ficam gigantes. É o que o canto colado custa. */
html[data-pagina="projeto"] .embrulho { max-width: none; }

/* --------------------------------------------------------------------------
   AS DUAS COLUNAS
   A da esquerda tem largura própria, e não uma porcentagem: com o canto
   colado na borda, 27% de uma tela larga viraria uma coluna de meio metro.
   -------------------------------------------------------------------------- */
.obra {
  display: grid;
  /* 500 px de largura na tela do Seguti. O mínimo de 240 é para telas
     médias, onde 500 comeria a página inteira; o 32vw é a rampa entre um e
     outro. Antes eram 250 e o texto saía espremido em cinco palavras por
     linha. */
  /* 260 px FIXOS, em qualquer tela — medida tirada da referência do Seguti,
     partindo dos 260 da referência e somando os 100 que o Seguti pediu
     depois de ver no tamanho real. Fixo e não proporcional de propósito:
     quanto menor a tela, maior a fatia que sobra para o case, que é onde o
     trabalho dele aparece. */
  grid-template-columns: 360px 1fr;
  gap: clamp(1.4rem, 2.6vw, 3rem);
  align-items: start;
  /* A barra do topo é fixa: ela não ocupa espaço, ela flutua por cima. Sem
     este recuo a imagem de abertura começava atrás dela e perdia os
     primeiros 68 pixels sem ninguém perceber — medi: começava em 32 com a
     barra ocupando até 68. */
  padding-top: calc(var(--altura-topo) + clamp(0.6rem, 1.2vw, 1.4rem));
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* A COLUNA PARADA.
   O top é a altura da barra: sem isso ela gruda no alto e passa por baixo
   do menu. O max-height mais o overflow são o "scroll à parte" que o
   Seguti pediu para quando a lista de prêmios for comprida: a coluna rola
   dentro dela mesma, sem levar a página junto. */
.obra__lado {
  position: sticky;
  top: calc(var(--altura-topo) + 1.2rem);
  max-height: calc(100vh - var(--altura-topo) - 2.4rem);
  overflow-y: auto;
  overscroll-behavior: contain;   /* chegou no fim aqui, não empurra a página */
  /* UMA BARRA DE ROLAGEM FININHA — pedido do Seguti, e uma troca de ideia
     em relação ao que ele tinha pedido antes.

     A história: primeiro ele pediu nenhuma barra, porque o traço cinza do
     navegador sujava a página. No lugar dela pus um apagamento no pé da
     coluna, como aviso de que havia mais coisa embaixo. Agora ele viu que
     aquele apagamento parecia um gradiente branco solto no rodapé do site,
     e pediu os dois: FORA o apagamento, ENTRA uma barra bem fina.

     Esta não é a barra do navegador com outra cor: são 3 px sem fundo, sem
     setas, sem moldura, e só aparece com o mouse perto. Fora isso, a coluna
     continua limpa como ele queria. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tinta) 15%, transparent) transparent;
}
/* A BARRA ACORDA QUANDO O MOUSE ENTRA NO LADO ESQUERDO DA TELA — e não
   só quando ele está exatamente em cima da coluna.
   Pedido do Seguti. O :hover sozinho só valia com o cursor dentro da
   coluna, o que é tarde demais: quem está indo ler os prêmios já chegou lá
   quando a barra aparece. Quem decide é o JavaScript, que mede onde o
   cursor está e escreve data-perto="sim" na coluna. */
.obra__lado:hover, .obra__lado:focus-within,
.obra__lado[data-perto="sim"] {
  scrollbar-color: color-mix(in srgb, var(--tinta) 34%, transparent) transparent;
}

/* O mesmo, para o Chrome e o Safari, que não entendem as duas linhas acima. */
.obra__lado::-webkit-scrollbar { width: 3px; }
.obra__lado::-webkit-scrollbar-track { background: transparent; }
.obra__lado::-webkit-scrollbar-thumb {
  /* ELA APARECE SEMPRE, e não só com o mouse por cima.
     Cheguei a deixá-la invisível até o mouse chegar. Mas o pedido do Seguti
     foi "insinuar que existe um scroll" — e uma barra que só aparece depois
     que a pessoa já está ali não insinua nada, não avisa ninguém. Então ela
     fica sempre, muito fraca (15% da tinta, 3 px), e escurece quando o mouse
     chega perto. */
  background: color-mix(in srgb, var(--tinta) 15%, transparent);
  border-radius: 99px;
  transition: background 220ms ease;
}
.obra__lado:hover::-webkit-scrollbar-thumb,
.obra__lado:focus-within::-webkit-scrollbar-thumb,
.obra__lado[data-perto="sim"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tinta) 34%, transparent);
}

/* A BARRA DESENHADA PELO SITE (só no computador).
   O Mac esconde a barra do navegador e só mostra durante a rolagem — por
   isso a de cima nunca aparecia para o Seguti. O JavaScript desenha esta no
   lugar e marca a coluna com tem-barra, que esconde a do navegador. */
.obra__lado.tem-barra {
  scrollbar-width: none;
  /* O ESPACINHO ENTRE O TEXTO E A BARRA — pedido do Seguti: ela estava
     colada no texto. A barra mora na borda direita da coluna (3 px); estes
     23 px empurram o texto para longe dela, sobrando os 20 px que ele pediu. */
  padding-right: 23px;
}
.obra__lado.tem-barra::-webkit-scrollbar { display: none; }

.barra-lado {
  position: fixed;
  width: 3px;
  z-index: 5;
  pointer-events: none;
}
.barra-lado[hidden] { display: none; }
.barra-lado__pega {
  width: 100%;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tinta, #0b0b0b) 15%, transparent);
  transition: background 220ms ease, width 160ms ease;
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
}
.barra-lado[data-perto="sim"] .barra-lado__pega {
  background: color-mix(in srgb, var(--tinta, #0b0b0b) 40%, transparent);
}
.barra-lado__pega:hover,
.barra-lado--arrastando .barra-lado__pega {
  background: color-mix(in srgb, var(--tinta, #0b0b0b) 60%, transparent);
  cursor: grabbing;
}

/* A SETINHA DO PÉ DA COLUNA — pedido do Seguti: um aviso pequeno de que a
   coluna da esquerda rola. O invólucro tem altura zero e gruda no pé da
   parte visível da coluna (sticky), então não acrescenta espaço nenhum no
   fim do texto. Só existe quando a coluna rola (data-rola) e some quando
   ela chega ao fim (data-fim). Sem gradiente branco, que o Seguti recusou. */
.lado__seta {
  position: sticky;
  bottom: 0;
  height: 0;
  display: none;
}
.obra__lado[data-rola="sim"] .lado__seta { display: block; }
.lado__seta-botao {
  position: absolute;
  bottom: 10px;
  right: 0;   /* canto direito: no esquerdo ela cobria o começo das linhas */
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tinta-linha);
  border-radius: 99px;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
  transition: opacity 260ms ease, transform 260ms ease;
  animation: seta-respira 2.4s ease-in-out infinite;
}
.lado__seta-botao:hover { border-color: var(--tinta); }
.obra__lado[data-fim="sim"] .lado__seta-botao {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  animation: none;
}
@keyframes seta-respira {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .lado__seta-botao { animation: none; }
}

/* O APAGAMENTO DO PÉ FOI EMBORA.
   Ele existia para avisar que havia mais coisa abaixo; agora quem avisa é a
   barra fina. O Seguti o via como um gradiente branco no rodapé do site, e
   ele era exatamente isso.
   O atributo data-rola continua sendo escrito pelo JavaScript e continua
   servindo: é ele que diz se a coluna rola ou não, e a barra só tem o que
   mostrar quando rola. */

/* --------------------------------------------------------- a ficha em si */
.obra__assinatura {
  margin: 0 0 0.6rem;
  font-size: var(--t-miudo);
  color: var(--tinta-fraca);
  letter-spacing: var(--espacejamento-miudo);
}
.obra__assinatura strong { color: var(--tinta); font-weight: var(--peso-medio); }

.obra__titulo {
  margin: 0 0 1.4rem;
  font-size: clamp(1.9rem, 2.9vw, 3.1rem);
  font-weight: var(--peso-medio);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.obra__texto { margin: 0 0 1.8rem; }
.obra__texto p { margin: 0 0 0.8rem; font-size: var(--t-miudo); line-height: 1.5; }
.obra__texto p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- ficha técnica */
.ficha { margin: 0 0 1.8rem; }
.ficha__linha { margin: 0 0 0.45rem; font-size: var(--t-miudo); line-height: 1.45; }
.ficha__funcao { color: var(--tinta-fraca); }
/* O link de um nome não grita: é o mesmo texto, com um risco que só aparece
   quando o mouse chega. Nome sem link fica igualzinho, e é de propósito —
   ninguém precisa saber quem tem site e quem não tem. */
.ficha a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo-curto, 180ms) ease;
}
.ficha a:hover, .ficha a:focus-visible { border-bottom-color: currentColor; }

/* ------------------------------------------------------------- os prêmios */
.premios-obra { margin: 0; }

.premio-item { margin: 0 0 1.15rem; font-size: var(--t-miudo); line-height: 1.35; }

/* O nome do festival em negrito de verdade, e em tinta cheia: ele é o que a
   pessoa procura quando corre o olho pela lista. */
.premio-item__nome {
  display: block;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 0.2rem;
}

/* SEM RECUO PENDURADO.
   Eu tinha feito a segunda linha começar embaixo do texto, alinhada depois
   do ícone. Na diagramação do Seguti ela volta para a margem, junto com o
   ícone — é assim que "Mobile" e "Consumer" aparecem na referência dele.
   Mais simples, e é o que ele pediu. */
.premio-item__linha {
  display: block;
  color: var(--tinta-fraca);
  margin-bottom: 0.12rem;
}
.premio-item__marca {
  font-style: normal;
  /* Um respiro depois do ícone, e não uma coluna de largura fixa: o texto
     segue logo atrás dele, como na referência. */
  margin-right: 0.3em;
  /* Cheguei a dessaturar o emoji para ele não gritar ao lado do texto
     cinza. Ficou lavado: ouro, prata e bronze viravam a mesma mancha, e o
     ícone existe justamente para dizer qual é qual. Fica na cor de fábrica. */
  font-size: 0.95em;
  vertical-align: -0.08em;
}

/* ==========================================================================
   OS BLOCOS DO CASE
   Cada bloco é uma faixa que ocupa a largura da coluna da direita. O que
   muda de um para o outro é o que tem dentro: uma imagem, duas, três, um
   vídeo, um texto. É esta lista que o painel vai saber montar.
   ========================================================================== */
/* ==========================================================================
   OS DOIS RESPIROS
   --------------------------------------------------------------------------
   Um número só não dava conta: era grande demais entre um título e o texto
   dele, e pequeno demais entre dois assuntos. O mesmo espaço fazendo dois
   trabalhos opostos. Agora são dois:

     --respiro-dentro  → entre coisas do MESMO assunto (título e seu texto,
                         texto e a imagem que ele explica)
     --respiro-entre   → antes de um assunto NOVO

   Quem abre assunto é o título, e por isso ele ganha o respiro grande em
   cima sozinho. Um bloco que não é título mas começa um assunto leva a
   classe `bloco--abre` — é o que o painel vai marcar.

   Os dois são medidos pela LARGURA DA COLUNA (cqi), e não pela janela: assim
   a página respira igual em qualquer tela, que é o que o Seguti pediu.
   ========================================================================== */
/* A COLUNA DA DIREITA É A RÉGUA.
   "container-type: inline-size" quer dizer: quem estiver dentro desta caixa
   pode medir os próprios tamanhos pela LARGURA DELA, e não pela largura da
   janela. É a diferença entre o título ocupar sempre a mesma fatia da coluna
   — em qualquer tela — e ele crescer num ritmo e a coluna noutro, que era o
   defeito que o Seguti viu comparando as telas dele.
   A unidade dessa conta é o cqi: 1cqi = 1% da largura desta coluna. */
.obra__case { container-type: inline-size; }

.case {
  display: flex;
  flex-direction: column;
  /* O espaço pequeno é o padrão. O grande é a exceção, e aparece marcada. */
  gap: clamp(0.9rem, 1.1cqi, 1.6rem);
}

/* O RESPIRO GRANDE, antes de um assunto novo. Ele se soma ao pequeno acima,
   e é essa soma que abre a página. O :first-child existe para o primeiro
   bloco não começar com um buraco no alto. */
/* UM DEGRAU A MAIS ANTES DE IMAGEM E VÍDEO.
   Texto embaixo de texto pede pouco espaço; imagem embaixo de texto pede
   mais, senão a leitura esbarra na foto. É uma regra velha de tipografia e
   foi o que o Seguti pediu quando falou em cuidar da distância do texto com
   as imagens. Fica entre o respiro pequeno e o grande. */
.case > figure:not(:first-child),
.case > .png-video:not(:first-child),
.case > .carrossel:not(:first-child),
.case > .bloco--seis:not(:first-child),
.case > .bloco--triplo:not(:first-child),
.case > .video:not(:first-child) {
  margin-top: clamp(0.8rem, 1.5cqi, 2.6rem);
}

.case > .bloco--titulo:not(:first-child),
.case > .chamada:not(:first-child),
.case > .bloco--abre:not(:first-child) {
  margin-top: clamp(2.5rem, 4.6cqi, 7.5rem);
}

.bloco { margin: 0; }
.bloco img { display: block; width: 100%; height: auto; }

/* Larguras. O "estreito" existe para texto: linha comprida demais cansa de
   ler, e 62 caracteres é onde o olho ainda acha a linha seguinte sozinho. */
.bloco--estreito { max-width: 62ch; }
.bloco--meio { max-width: 70%; }
.bloco--centro { margin-inline: auto; }

/* Imagens lado a lado. O gap é o mesmo da grade da Home, para as duas
   páginas parecerem do mesmo site. */
.bloco--duplo,
.bloco--triplo,
.bloco--seis { display: grid; gap: var(--respiro-grade, 12px); }
.bloco--duplo  { grid-template-columns: repeat(2, 1fr); }
.bloco--triplo { grid-template-columns: repeat(3, 1fr); }
.bloco--seis   { grid-template-columns: repeat(6, 1fr); align-items: center; }

/* Vídeo com texto ao lado, e duas imagens com texto na terceira coluna:
   os dois pedidos do Seguti que não são só "imagem do lado de imagem". */
.bloco--comtexto {
  display: grid;
  gap: clamp(1.2rem, 2.2cqi, 3rem);
  grid-template-columns: 1.7fr 1fr;
  /* AS PRIMEIRAS LINHAS NA MESMA ALTURA — escolha do Seguti.
     "baseline" alinha a linha em que as letras se apoiam, e não a caixa.
     A diferença importa muito aqui: o título é grande e o texto é pequeno,
     então cada um tem uma quantidade diferente de ar acima das letras. Se
     alinhamos as caixas (que era o de antes), as caixas batem e as letras
     não — e o olho vê torto. Alinhando a pauta, o olho vê reto. */
  align-items: baseline;
}
/* A exceção: quando ao lado do texto mora uma imagem ou um vídeo, não há
   pauta nenhuma para alinhar — aí voltam a valer os topos. */
.bloco--comtexto--topo { align-items: start; }

/* O TEXTO QUE ACOMPANHA A ROLAGEM.
   Quando ao lado do texto mora uma pilha alta — três vídeos, por exemplo —
   o texto acabava lá no alto e sobrava meia tela de branco embaixo dele.
   Com isto, ele desce junto com a leitura e só para quando o bloco acaba.
   O topo é a altura da barra: sem essa conta, o texto gruda embaixo do
   menu e some pela metade. */
@media (min-width: 901px) {
  .bloco--comtexto > .gruda {
    position: sticky;
    top: calc(var(--altura-topo) + 1.5rem);
  }
}
.bloco--trio-texto {
  display: grid;
  gap: var(--respiro-grade, 12px);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

/* Uma pilha: coisas empilhadas com o mesmo respiro das imagens lado a lado.
   Serve para a coluna de três vídeos ao lado de um texto. */
.pilha { display: grid; gap: var(--respiro-grade, 12px); }

/* Vídeo de desenho — sem controles, sem som, em laço. Não é um filme para
   assistir: é parte da imagem, e por isso ocupa a largura como uma foto. */
.bloco video, .pilha video { display: block; width: 100%; height: auto; }

/* O VÍDEO.
   Nunca hospedamos arquivo de vídeo — entra sempre um endereço do YouTube
   ou do Vimeo, como combinado. O aspect-ratio reserva o espaço antes de o
   vídeo chegar, e por isso a página não "pula" quando ele carrega. */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tinta-linha);
  overflow: hidden;
}
/* VÍDEO SEM LINK: sai da página de verdade, fica no painel.
   A moldura vazia existe para o painel avisar que falta o link. No site
   publicado ela não tem o que fazer — um retângulo cinza no meio do
   portfólio é pior do que bloco nenhum. Quem a mostra é a página do painel
   (admin/previa.html), com a sua própria regra. */
.video--vazio { display: none; }

.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   O CARROSSEL
   Anda sozinho a cada 5 segundos e obedece ao clique — e, no instante em
   que alguém clica, ele para de andar sozinho. Sem essa parada, o carrossel
   rouba a imagem da mão de quem está olhando, que é o defeito que faz as
   pessoas odiarem carrossel.
   ========================================================================== */
.carrossel { position: relative; }

/* Todas as fotos ocupam a MESMA casa da grade, uma em cima da outra. É
   assim que a altura do bloco passa a ser a da foto mais alta e a página
   não pula de tamanho a cada troca. */
.carrossel__palco { display: grid; }
.carrossel__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 420ms var(--curva);
  pointer-events: none;
}
.carrossel__slide[data-ativo="sim"] { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .carrossel__slide { transition: none; } }

/* AS SETAS FICAM SEMPRE VISÍVEIS — pedido do Seguti, depois de ver que
   escondê-las no mouse deixava o carrossel invisível para quem não passa
   por cima. Bolinha na cor da tinta, seta na cor do papel: no tema claro
   isso é preto com branco, e no escuro se inverte sozinho, sem nenhuma
   cor escrita à mão aqui. */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--papel);
  background: var(--tinta);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 200ms ease;
}
.carrossel:hover .carrossel__seta { opacity: 1; }
.carrossel__seta:hover { transform: translateY(-50%) scale(1.08); }
.carrossel__seta:focus-visible { opacity: 1; outline: 2px solid var(--tinta); outline-offset: 2px; }
.carrossel__seta--esq { left: 12px; }
.carrossel__seta--dir { right: 12px; }

.carrossel__bolinhas {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.8rem;
}
.carrossel__bolinha {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--linha-forte);
  cursor: pointer;
}
.carrossel__bolinha[aria-current="true"] { background: var(--tinta); }

/* ==========================================================================
   O PNG COM VÍDEO ATRÁS
   O desenho é um PNG com buracos de verdade — as janelas são transparentes.
   Atrás de cada janela mora um vídeo, na posição exata do buraco. Os
   números vêm medidos do próprio arquivo, em porcentagem, e não em pixels:
   assim a coisa inteira encolhe junto quando a tela é menor.

   O z-index no PNG não é enfeite. Sem ele, os vídeos (que são posicionados)
   passariam POR CIMA do desenho e o efeito viraria o contrário do que é.
   ========================================================================== */
.png-video { position: relative; margin: 0; }
.png-video__frente { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.png-video__janela {
  position: absolute;
  z-index: 0;
  left: var(--x); top: var(--y);
  width: var(--l); height: var(--a);
  overflow: hidden;
  background: var(--tinta-linha);
}
.png-video__janela video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   OS TEXTOS — TRÊS NÍVEIS E QUATRO ALINHAMENTOS
   --------------------------------------------------------------------------
   São só estes três níveis, de propósito: título, subtítulo e texto
   corrido. Um quarto nível não se distingue dos outros no olho de quem lê,
   e vira decisão que ninguém sabe tomar duas vezes igual.

   O alinhamento é uma escolha separada do nível: qualquer um dos três pode
   sair à esquerda, centralizado, à direita ou justificado. No painel isso
   vai ser um botãozinho de quatro posições em cada bloco de texto.
   ========================================================================== */

/* TÍTULO — o grande. Sem largura máxima: quem controla a quebra é o
   alinhamento e o tamanho, não uma medida escondida. */
.bloco--titulo,
.bloco--destaque {           /* o nome antigo continua valendo */
  /* 2,25% da largura da COLUNA. No monitor do Seguti (coluna de ~2.150 px)
     isso dá 48 px; num notebook, a mesma fatia da coluna de lá. O mínimo de
     1,75rem existe porque proporção pura, numa coluna estreita, produziria
     um título de 8 px — e aí a regra deixa de servir a quem lê. É o único
     ponto onde a proporção é quebrada de propósito. */
  font-size: clamp(1.75rem, 2.25cqi, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* SUBTÍTULO — o meio do caminho. Serve para abrir um assunto dentro de um
   trecho que já tem título, sem competir com ele. */
.bloco--subtitulo {
  font-size: clamp(1.05rem, 1.15cqi, 1.6rem);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* TEXTO CORRIDO */
/* O texto corrido também pela coluna, com um mínimo de 15 px: abaixo disso
   ninguém lê um parágrafo inteiro com conforto. */
.bloco--corrido p {
  margin: 0 0 0.9rem;
  font-size: clamp(0.9375rem, 0.78cqi, 1.25rem);
  line-height: 1.55;
}
.bloco--corrido p:last-child { margin-bottom: 0; }
.bloco--corrido strong { font-weight: var(--peso-medio); }

.bloco--legenda {
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   A LEGENDA DA IMAGEM — três posições
   --------------------------------------------------------------------------
   Escolha do Seguti: cada imagem tem uma legenda, e ele decide onde ela fica.
     data-legenda="acima"  → antes da imagem
     data-legenda="abaixo" → depois da imagem
     data-legenda="mouse"  → só aparece com o mouse em cima da imagem
   No painel isso vai ser um botão de três posições, imagem por imagem.
   ========================================================================== */
.legenda-img {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  margin: 0;
}
/* "order" e não inverter a coluna: invertendo, todo espaço e margem de
   dentro trocaria de lado junto, e a imagem sairia colada onde não devia. */
.legenda-img[data-legenda="acima"] > figcaption { order: -1; }

/* NO MOUSE.
   O véu existe porque legenda branca sobre foto clara some, e preta sobre
   foto escura também. Ele vem da cor do papel com transparência, então
   acompanha o tema claro e o escuro sem nenhuma cor escrita aqui. */
.legenda-img[data-legenda="mouse"] > figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  opacity: 0;
  transition: opacity 240ms var(--curva);
}
.legenda-img[data-legenda="mouse"]:hover > figcaption,
.legenda-img[data-legenda="mouse"]:focus-within > figcaption { opacity: 1; }

/* No celular não existe passar o mouse. Em vez de esconder o texto para
   sempre — que é o que aconteceria —, ele volta a ser uma legenda comum
   embaixo da imagem. O leitor ganha o texto; o efeito é que se perde. */
@media (hover: none), (pointer: coarse) {
  .legenda-img[data-legenda="mouse"] > figcaption {
    position: static;
    opacity: 1;
    padding: 0;
    background: none;
  }
}

/* ------------------------------------------------------- os alinhamentos
   Servem para qualquer bloco de texto. O centralizado e o da direita
   ganham margem automática porque, sem ela, um bloco estreito ficaria
   grudado à esquerda mesmo com o texto centralizado dentro dele. */
.al-esq    { text-align: left; }
.al-centro { text-align: center; margin-inline: auto; }
.al-dir    { text-align: right; }
/* O justificado precisa da divisão de sílabas: sem ela, uma coluna estreita
   abre buracos brancos no meio da linha e o texto vira uma peneira. */
.al-just {
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.al-dir { margin-left: auto; margin-right: 0; }

.bloco--espaco { height: clamp(1rem, 4vw, 4rem); }

/* A CHAMADA DE DESTAQUE — o campo fixo, um por página, sempre no mesmo
   lugar: logo abaixo da imagem de abertura, dentro da coluna da direita. */
.chamada {
  /* Ar embaixo dela. A regra geral cola tudo que é do mesmo assunto, mas a
     frase de abertura precisa de distância do que vem depois — senão ela
     encosta no vídeo, que foi o que o Seguti viu. Metade do respiro grande. */
  margin: 0 0 clamp(1.4rem, 2.3cqi, 3.75rem);
  /* Grande e em negrito, centralizado — como o Seguti pediu, com a
     referência na mão. Sem largura máxima: ele ocupa a coluna inteira. */
  /* A CHAMADA NÃO É UM TÍTULO QUALQUER: é a frase que abre a página, e o
     Seguti quer que ela encha a coluna. A conta veio de medir: com 3cqi a
     linha ocupava 48% da largura da coluna; ele quer os ~82% que tinha
     antes, quando a coluna era estreita. 5,1cqi entrega isso. */
  font-size: clamp(2.2rem, 5.1cqi, 9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}

/* A imagem de abertura é o primeiro bloco da coluna da direita — ela não
   atravessa a tela. Decisão do Seguti, com a referência na mão. */
.abertura-obra { margin: 0; }
.abertura-obra img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   O FIM DA PÁGINA — a fileira que rola de lado
   Sem nome de ideia e sem cliente, como no portfólio que o Seguti mandou:
   é só imagem, e quem se interessar clica. Entra sozinha, com os projetos
   que estão no ar, na ordem da Home.
   ========================================================================== */
/* A LINHA CINZA QUE SEPARA O PROJETO DO MORE WORK — pedido do Seguti.
   Ela já existia, mas usava --linha, uma cor que só tem valor no tema
   escuro: no claro a linha ficava invisível. --tinta-linha existe nos dois. */
.outros { border-top: 1px solid var(--tinta-linha); padding: 0; }
.outros__titulo {
  /* MORE WORK, CENTRALIZADO E DO TAMANHO DO TÍTULO DO PROJETO — pedido do
     Seguti. Os números são os mesmos do .obra__titulo, lá em cima: se um
     dia o título mudar de tamanho, mude aqui também. */
  /* o espaço acima é o mesmo que fica entre o projeto e a linha cinza,
     para a linha cair no meio do vão */
  margin: clamp(3rem, 6.4vw, 8rem) 0 clamp(1.6rem, 3vw, 2.6rem);
  text-align: center;
  font-size: clamp(1.9rem, 2.9vw, 3.1rem);
  font-weight: var(--peso-medio);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

/* OS THUMBS APARECENDO — pedido do Seguti: "um efeitinho simples".
   Cada thumb sobe um pouquinho e clareia quando chega na tela, um depois do
   outro. Quem esconde (vai-aparecer) e quem mostra (apareceu) é o
   JavaScript: sem ele, as classes não existem e os thumbs ficam sempre
   visíveis — nunca uma fileira invisível por falha de código. */
.outros__item.vai-aparecer {
  opacity: 0;
  transform: translateY(28px);
}
.outros__item.vai-aparecer.apareceu {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--atraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .outros__item.vai-aparecer { opacity: 1; transform: none; }
}
/* A GRADE DE FIM DE PÁGINA, na forma da referência que o Seguti mandou:
   três colunas, sem nome de ideia, e cada imagem com a altura que ela tem.
   Usamos colunas de texto (column-count) e não uma grade: é o único jeito,
   sem JavaScript, de cada imagem ficar com a altura própria e as colunas
   se fecharem sozinhas. O break-inside impede uma imagem de ser partida no
   meio e continuar na coluna seguinte.

   Hoje as thumbs do Seguti são todas quadradas, então a grade sai certinha.
   Ela já está pronta para o dia em que ele subir imagens de formatos
   diferentes — aí o ritmo irregular aparece sozinho, sem mexer no código. */
.outros__fileira {
  /* MESMA LARGURA DA GRADE DA HOME — pedido do Seguti: os thumbs do fim
     estavam grandes demais. A Home tem 13,9% de margem de cada lado; esta
     página encosta quase na borda. Com a mesma largura, três colunas aqui
     dão thumbs do tamanho de lá. A conta é a da Home escrita por extenso
     (tela até 2200 px, menos 13,9% de cada lado), porque esta página troca
     a margem por uma menor e a variável daria a largura errada. */
  max-width: calc(min(100vw, 2200px) - 27.8vw);
  margin-inline: auto;
  column-count: 3;
  column-gap: var(--respiro-grade, 12px);
}
.outros__item {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--respiro-grade, 12px);
}
/* A FILEIRA DO FIM AGORA USA AS MESMAS CLASSES DA HOME (.projeto,
   .projeto__thumb, .thumb__premios), e é assim que ela herda de graça a
   etiqueta de vidro, os prêmios no rodapé e o desfoque no mouse.

   Só uma coisa da Home NÃO vale aqui: lá toda thumb é quadrada. Aqui elas
   mantêm a proporção do arquivo, que é o que faz esta fileira ser uma
   fileira que encaixa e não uma grade de quadrados. */
.outros__item .projeto__thumb { aspect-ratio: auto; }

.outros__item img {
  display: block;
  width: 100%;
  /* O height:auto não é enfeite. A imagem tem height escrito no HTML, e
     isso vale como altura de verdade: a largura obedecia à coluna e a
     altura continuava na do arquivo, e a thumb saía deformada. Com o auto,
     a proporção da imagem é que manda. */
  height: auto;
  background: var(--tinta-linha);
  transition: opacity var(--tempo-curto, 200ms) ease;
}
/* O clarear no mouse saiu: quem responde ao mouse agora é o mesmo desfoque
   da Home, com a etiqueta de vidro por cima. Dois efeitos ao mesmo tempo
   seriam dois avisos para a mesma coisa. */

@media (max-width: 900px) {
  .outros__fileira { column-count: 2; }
}
@media (max-width: 760px) {
  /* no celular a Home usa 5,2% de margem de cada lado */
  .outros__fileira { max-width: calc(100vw - 10.4vw); }
}

/* ==========================================================================
   NO CELULAR
   A coluna do lado deixa de existir como coluna. O que era esquerda vira
   duas partes: a cabeça (assinatura, nome, texto) abre a página, e o pé
   (ficha e prêmios) vai para depois do case — decisão do Seguti, para quem
   abre no telefone chegar no trabalho em dois segundos.

   O display:contents é o que permite isso sem duplicar nada no HTML: a
   caixa da coluna some, e os dois pedaços dela passam a ser filhos diretos
   da página, livres para receber ordem própria.
   ========================================================================== */
@media (max-width: 900px) {
  .obra {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* ESTA LINHA É OBRIGATÓRIA e custou um defeito para eu descobrir.
       Lá em cima, a grade de duas colunas usa align-items:start. Numa pilha
       vertical, "start" quer dizer "cada item com a largura do próprio
       conteúdo" — e como a coluna do case agora é uma régua (container), ela
       se recusa a tirar a largura do conteúdo. Resultado: largura ZERO e a
       página do celular inteira desaparecia. Medi: 0 px de largura. */
    align-items: stretch;
  }
  .obra__lado {
    display: contents;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .lado__cabeca { order: 1; }
  .obra__case   { order: 2; }
  .lado__pe     { order: 3; padding-top: 1.4rem; border-top: 1px solid var(--linha); }

  /* Três colunas de imagem em 174 px de largura não é imagem, é selo. */
  .bloco--triplo, .bloco--trio-texto { grid-template-columns: 1fr; }
  .bloco--seis { grid-template-columns: repeat(3, 1fr); }
  .bloco--comtexto { grid-template-columns: 1fr; }
  .bloco--meio { max-width: 100%; }
}