/* ============================================================
   PAINEL DE CONTROLE VISUAL
   Cores e fontes ficam todas aqui, num lugar só. Pra mudar a cara
   do site inteiro, mexe só nesses valores — o resto do arquivo
   nunca precisa ser tocado por causa disso.
   ============================================================ */
:root {
  /* Cores: fundo claro no geral. Um branco puro (#ffffff) cansa a vista em
     telas grandes por muito tempo; esse tom levemente creme é mais
     confortável e ainda lê como "fundo claro".
     O vermelho começou como um detalhe só, mas depois da referência da
     Budweiser você pediu mais força: agora ele também vira fundo sólido
     em blocos específicos (como a Home), não só detalhe pequeno. */
  --cor-fundo: #faf6f0;
  --cor-texto: #1a1a1a;
  --cor-texto-suave: #6b6b6b;   /* cinza pra textos secundários (cargo, rodapé) */
  /* Ajustado pra bater com o vermelho do próprio selo/personagem. Não tenho
     como "pipetar" a cor exata do arquivo, então acertei a olho — se parecer
     diferente do seu desenho quando você olhar na tela, me avisa que eu ajusto. */
  --cor-destaque: #a31f17;
  --cor-borda: #e5e5e5;

  /* Bege pedido a partir do fundo da imagem do gatinho que você mandou —
     um tom mais quente que o creme geral do site, usado só nas áreas de
     "bastidor" (rodapé e a nota final da Home). */
  --cor-bege: #efe6d6;

  /* Lilás pastel do projeto "Medos de engravidar" — inspirado na cor da
     roupa da Mel Maia no vídeo da campanha. Só esse projeto usa essa
     cor (não é uma cor geral do site); como não tenho como ver o vídeo
     pra "pipetar" o tom exato, essa é uma estimativa de "lilás claro" —
     se não bater com o tom real, me manda um print ou o código da cor
     que eu ajusto. */
  --cor-fundo-lilas: #e4d9f2;

  /* Azul claro pedido pro bloco "E a gente contou essa história..." do
     projeto 4 (Riscos que não valem a pena) — cor escolhida por mim,
     sem referência visual específica sua; se não for o tom que você
     imaginou, me manda o código da cor ou um print que eu ajusto. */
  --cor-fundo-azul: #d7e8f7;

  /* Bege bem sutil, quase off-white, pedido pro fundo da página Sobre —
     mais discreto que o "--cor-bege" que já existia (esse aqui é usado
     em áreas de "bastidor", com mais contraste; este é mais suave). */
  --cor-fundo-sobre: #f5efe3;

  /* Tipografia: uma serifada com personalidade pro que precisa ter presença,
     e uma fonte simples e muito legível pro resto. Poucos pesos carregados
     de propósito, pra página abrir rápido mesmo em computador fraco. */
  --fonte-titulo: 'Fraunces', Georgia, serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;

  /* Fonte de "rabisco alegre" — vira tempero, não protagonista: só aparece
     em toques pequenos e pessoais (a frase do rodapé, futuras anotações). */
  --fonte-assinatura: 'Permanent Marker', var(--fonte-titulo);

  /* Fonte condensada e cheia de peso, inspirada no livro de marca que você
     mandou (letras grandes, confiantes, sem ser a fonte exclusiva de ninguém).
     Uso só em títulos de impacto, como o nome na Home. */
  --fonte-impacto: 'Anton', Impact, sans-serif;

  /* Espaçamento base, pra manter o mesmo "respiro" em todo o site */
  --espaco-pequeno: 0.5rem;
  --espaco-medio: 1.5rem;
  --espaco-grande: 4rem;
}

/* ============================================================
   BASE
   Reset simples. Zero regras aqui dependem de JavaScript —
   se algum script falhar no futuro, a página continua de pé.
   ============================================================ */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* cabeçalho em cima, conteúdo no meio, rodapé embaixo */
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  line-height: 1.5;
}

/* Fundo de página especial (hoje, só o lilás do projeto "Medos de
   engravidar") — fica no "body" de propósito, não só na caixa central
   de texto: assim ele preenche toda a página visível, de ponta a
   ponta, e não só a coluna estreita onde o texto fica. O cabeçalho
   continua com seu próprio fundo off-white (definido nele mesmo), por
   isso não muda de cor mesmo com essa regra. */
body.pagina--lilas {
  background: var(--cor-fundo-lilas);
}

body.pagina--bege {
  background: var(--cor-bege);
}

body.pagina--azul {
  background: var(--cor-fundo-azul);
}

/* Fundo da página Sobre inteira (não só a caixa de texto), e o texto da
   bio em vermelho — os dois a seu pedido. */
body.pagina--sobre {
  background: var(--cor-fundo-sobre);
}

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

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

/* Reforço do atributo HTML "hidden": alguns navegadores antigos, ou
   quando outra regra de CSS entra em conflito, podem ignorar o "hidden"
   sozinho — o "!important" aqui garante que, uma vez marcado como
   escondido, o elemento realmente some, sem exceção. Uso isso pra
   blocos opcionais de projeto (vídeo em destaque, galeria) que só
   alguns projetos têm. */
[hidden] {
  display: none !important;
}

/* ============================================================
   CABEÇALHO
   Fica igual em toda página, por isso o estilo dele vive aqui
   na base do arquivo, e não dentro de uma seção específica.
   ============================================================ */
.cabecalho {
  /* position: relative aqui é o que permite a marca ficar de verdade centralizada
     no meio da barra, sem depender do tamanho dos textos "Work" e "About".
     "sticky" gruda o cabeçalho no topo da tela: ele não rola junto com o
     resto da página, então o selo fica sempre visível — foi um pedido seu
     depois de ver outro portfólio fazendo isso. O fundo sólido (var(--cor-fundo))
     é o que garante que ele continue legível mesmo com o bloco vermelho da
     Home passando por baixo dele durante a rolagem. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cor-fundo);
  display: flex;
  align-items: center;
  /* "center" + gap junta os dois botões no meio, com espaço reservado
     entre eles pro selo (que é posicionado à parte, ver abaixo) — antes
     eles ficavam nas pontas da barra, agora ficam próximos e centralizados. */
  justify-content: center;
  gap: 9rem;
  flex-wrap: wrap;
  padding: var(--espaco-pequeno) var(--espaco-medio);
  border-bottom: 1px solid var(--cor-borda);
  /* Na sua referência, a área clara é bem mais alta que só os botões —
     é esse espaço extra que deixa boa parte do rosto do selo dentro do
     cabeçalho, e só o cabelo de baixo escorrendo pro vermelho. Antes o
     cabeçalho só tinha a altura mínima dos botões, então quase toda a
     logo acabava "vazando" pro vermelho, em vez de só uma parte. */
  min-height: 80px;
}

.cabecalho__marca {
  /* Corrigido: antes eu centralizava o selo bem em cima da linha entre o
     cabeçalho e o vermelho, o que empurrava metade dele pra CIMA do topo
     da tela — e essa metade de cima (o alto da cabeça) ficava cortada,
     porque não existe espaço acima do topo da página pra ela aparecer.
     Agora o selo começa coladinho no topo do cabeçalho (a cabeça inteira
     sempre visível) e só a parte de baixo (o cabelo) é que sobra e desce
     pro vermelho — só o selo vaza, os botões continuam só na área clara. */
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
}

.cabecalho__selo {
  /* Bem maior do que antes, a seu pedido — grande o bastante pra "vazar"
     visivelmente pro vermelho quando centralizado na borda do cabeçalho. */
  width: 110px;
  height: 110px;
  object-fit: contain;
  /* Entrada inspirada no site do Moa: lá, a marca dela se "monta" na
     tela quando a página abre. Aqui é o seu selo que cresce de um
     tamanho menor até o tamanho normal enquanto vai ficando visível —
     mesma ideia, só que com sua marca e só com opacity/transform. */
  animation: seloEntrada 0.7s ease both;
}

@keyframes seloEntrada {
  from { opacity: 0; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho__selo {
    animation: none;
  }
}

.cabecalho__link {
  /* Virou um botão vermelho sólido, copiando exatamente o seu site atual —
     antes era só um texto sublinhado. */
  display: inline-block;
  background: var(--cor-destaque);
  color: var(--cor-fundo);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cabecalho__link:hover {
  /* Sem "translateY" aqui de propósito: quando o botão está alinhado com
     o nome (classe abaixo), a posição vertical dele já é controlada por
     transform — subir o botão no hover ia brigar com esse alinhamento. */
  opacity: 0.85;
}

.cabecalho__link--alinhado {
  /* Aplicada por JavaScript (script.js) depois de medir a largura real
     do nome "MAZI DINIS". Sem JavaScript, essa classe nunca é adicionada
     e o botão continua no layout simples e centralizado de sempre. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  /* Só os dois ícones agora — texto de contato e assinatura saíram,
     a seu pedido. */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--espaco-medio);
  padding: var(--espaco-medio);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-bege);
}

.rodape__icone {
  display: inline-block;
  line-height: 0; /* remove um espacinho extra que a linha do texto deixaria embaixo da imagem */
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.rodape__icone:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.rodape__icone-img {
  /* "object-fit: contain" é o que faltava: sem ele, se o arquivo do
     adesivo não for perfeitamente quadrado, a imagem esticava pra
     preencher o quadrado inteiro e o círculo saía oval, distorcido.
     Com "contain", ela sempre mantém a proporção original. Também
     aumentei o tamanho, que estava pequeno demais. */
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* ============================================================
   HOME / CAPA
   De propósito é uma página enxuta: nome, cargo, um detalhe
   visual e os dois botões. Nada de projeto aparece aqui —
   isso é uma escolha sua, não uma limitação técnica.
   ============================================================ */
.capa {
  /* Aqui mora a mudança grande pedida: o vermelho passou de "detalhe" pra
     protagonista nessa seção — um bloco vermelho cheio, como nas páginas
     do livro de marca que você mandou. Cabeçalho e rodapé continuam claros,
     então o contraste deles não é afetado por essa troca. */
  flex: 1;                 /* empurra o rodapé pro final da tela, mesmo com pouco conteúdo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espaco-grande) var(--espaco-medio);
  gap: var(--espaco-pequeno);
  background: var(--cor-destaque);
  color: var(--cor-fundo);
}

.capa__nome {
  /* clamp() deixa o tamanho da fonte fluido: grande em tela cheia,
     mas encolhe sozinho em telas pequenas sem precisar de regras extras.
     Fonte condensada e maiúscula de propósito — é a letra "de impacto"
     que substituiu o rabisco aqui. O rabisco não sumiu do site, só não
     é mais o protagonista do nome. */
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(3rem, 13vw, 7.5rem);
  line-height: 0.95;
  margin: 0;
  color: var(--cor-fundo);
}

.capa__cargo {
  /* Maiúsculas espaçadas: é o mesmo recurso do livro de marca pra
     legendas/rótulos abaixo de um título grande. */
  font-family: var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--cor-fundo);
  opacity: 0.85;
  margin: 0 0 var(--espaco-medio) 0;
}

/* Entrada da Home: como o nome e o cargo já aparecem na tela assim que a
   página abre (não precisam de rolagem pra entrar em vista), o efeito de
   "revelar ao rolar" não tinha o que fazer aqui — por isso essa entrada é
   uma animação separada, que toca sozinha assim que a página carrega.
   Mesma regra de sempre: só opacity e transform. O nome entra primeiro,
   o cargo logo em seguida (0.15s depois), pra não parecer que os dois
   "pipocam" juntos. */
@keyframes capaEntrada {
  from { opacity: 0; transform: translateY(20px); }
}

.capa__nome {
  animation: capaEntrada 0.8s ease both;
}

.capa__cargo {
  animation: capaEntrada 0.8s ease both;
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .capa__nome,
  .capa__cargo {
    animation: none;
  }
}

/* ============================================================
   TRABALHOS
   Dois projetos por vez, lado a lado, até completar os 8 — igual à
   disposição do seu site atual. Cada item é um quadrado com a imagem
   ocupando tudo e o título por cima, colado no canto inferior esquerdo.
   ============================================================ */
.trabalhos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.trabalhos__item {
  /* aspect-ratio mantém a proporção do quadro estável mesmo antes de a
     imagem de verdade entrar (etapa 3) — sem isso, o quadro cinza de
     placeholder poderia ficar de um tamanho estranho. */
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.trabalhos__item::after {
  /* Camada escura só na base da imagem, pra o título branco continuar
     legível em cima de qualquer foto ou vídeo, claro ou escuro.
     Some por padrão e só aparece junto com o título, no hover. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.trabalhos__titulo {
  position: absolute;
  left: var(--espaco-medio);
  bottom: var(--espaco-medio);
  z-index: 1;
  color: #ffffff;
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.02em;
  /* Escondido até o mouse passar por cima — só opacity muda, nunca engasga
     a rolagem mesmo em computador fraco. */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.trabalhos__item:hover::after,
.trabalhos__item:hover .trabalhos__titulo,
.trabalhos__item:focus-visible::after,
.trabalhos__item:focus-visible .trabalhos__titulo {
  opacity: 1;
}

/* Celular e tablet não têm "passar o mouse por cima" — nesses aparelhos o
   título fica sempre visível, senão a pessoa nunca saberia o nome do
   projeto sem tocar nele. */
@media (hover: none) {
  .trabalhos__item::after,
  .trabalhos__titulo {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  /* Em celular, 2 colunas apertam demais os títulos — vira 1 coluna só. */
  .trabalhos {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BOTÕES
   Um estilo "principal" (cheio) e um "secundário" (contornado),
   reaproveitados em qualquer página que precisar deles.
   ============================================================ */
.botao {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 2px solid var(--cor-texto);
  transition: transform 0.15s ease, opacity 0.15s ease;
  /* Anima só transform e opacity de propósito: são as únicas propriedades
     que não travam a rolagem, mesmo em computadores fracos. */
}

.botao:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.botao--principal {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

.botao--secundario {
  background: transparent;
  color: var(--cor-texto);
}

/* ============================================================
   PÁGINA DE PROJETO
   Fundo claro (não é a Home) — aqui quem precisa se destacar é o
   título, o texto curto e o vídeo, não uma cor de fundo.
   ============================================================ */
.projeto {
  /* Alargado a seu pedido: o título estava quebrando em duas linhas
     lá em cima, enquanto os blocos mais abaixo (vídeo em destaque,
     galeria) já são bem mais largos — essa diferença ficava estranha
     ao descer a página. Aumentei de 46rem pra 58rem pra aproximar as
     duas larguras (é uma estimativa; te aviso que ainda não vi a tela). */
  max-width: 58rem;
  margin: 0 auto;
  padding: var(--espaco-grande) var(--espaco-medio);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
}

.projeto__titulo {
  /* Mesma fonte de impacto usada no nome da Home — é o que dá a sensação
     de "mesma marca" entre as páginas, mesmo o tratamento sendo diferente. */
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--cor-texto);
  margin: 0;
}

.projeto__texto {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
}

.projeto__texto p {
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin: 0;
}

/* Exceção pedida só pro projeto 4: título, texto e o vídeo case
   principal também alargados até a borda da tela, do mesmo jeito que
   os blocos mais abaixo (vídeos com texto e grade de imagens) — pra
   toda a parte de cima da página acompanhar essa largura maior, em
   vez de só os blocos do meio pra baixo. Como o texto não tem uma
   "borda" visível (não é foto/vídeo), centralizei ele dentro do
   espaço maior — mesma lógica de texto centralizado que já existe na
   Home e no Sobre — em vez de deixar colado na borda esquerda da
   tela. */
.projeto__titulo--largo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
  text-align: center;
  /* Maior que o título comum (que vai só até 3.5rem), pra letra também
     esticar e ocupar esse espaço extra, não só a caixa ao redor dela. */
  font-size: clamp(2.5rem, 9vw, 5.5rem);
}

.projeto__texto.projeto__texto--largo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
  max-width: none;
  align-items: center;
}

.projeto__texto.projeto__texto--largo p {
  /* "max-width: none" de propósito: o limite de 34rem do texto comum
     (e o de 52rem que eu tinha colocado antes) ainda deixavam a frase
     bem mais estreita que a caixa larga ao redor — por isso não
     parecia ter mudado. Sem limite nenhum, a frase quebra linha
     usando a largura toda disponível (só limitada pelo padding da
     caixa, igual aos vídeos/imagens alargados). */
  max-width: none;
  text-align: center;
  font-size: 1.35rem;
}

.projeto__video {
  /* aspect-ratio garante o formato de vídeo (16:9) sempre — sem isso, se
     o vídeo demorar pra carregar, esse espaço poderia colapsar pra altura
     zero e "pular" o resto da página de lugar quando o vídeo aparecesse.
     Sem fundo cinza de propósito (a seu pedido): enquanto carrega, mostra
     a cor da própria página por trás, em vez de uma caixa cinza. */
  aspect-ratio: 16 / 9;
  width: 100%;
}

.projeto__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Quando o "videocase" é na verdade um gif/imagem (projeto 8), não um
   player de vídeo de verdade. */
.projeto__video-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mesma exceção do título e do texto acima: vídeo case principal do
   projeto 4 também alargado até a borda da tela. */
.projeto__video--largo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

/* Texto + vídeos do mesmo tamanho, lado a lado: bloco OPCIONAL. Texto
   em negrito, a seu pedido. O fundo azul claro saiu daqui e virou fundo
   da página inteira (ver "body.pagina--azul" lá em cima), então este
   bloco não precisa mais de cor/padding próprios. */
.projeto__videos-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  margin-top: var(--espaco-medio);
}

.projeto__videos-texto-texto {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-texto);
  margin: 0;
  /* Sem "max-width" (tirei o limite de 34rem que forçava quebra de
     linha) e "white-space: nowrap" — a frase fica numa linha só, a seu
     pedido. No celular (ver media query abaixo) isso volta a quebrar
     normalmente, senão a frase inteira ia estourar pra fora da tela. */
  white-space: nowrap;
}

.projeto__videos-texto-linha {
  /* Você mesma autorizou quebrar a regra de "mesma largura sempre" só
     aqui, pra deixar os vídeos bem maiores — por isso o truque de
     "furar" o container central voltou, só pra esse bloco (repare que
     ele não está mais em ".projeto__destaque" nem ".projeto__galeria-bloco",
     que continuam respeitando a regra). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
  display: flex;
  gap: var(--espaco-medio);
  height: clamp(18rem, 46vw, 40rem);
}

.projeto__videos-texto-linha > div {
  flex: 1 1 0;
  height: 100%;
}

.projeto__videos-texto-linha iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  /* Vídeos lado a lado ficam pequenos demais no celular — empilha, cada
     um voltando a usar sua própria proporção 16:9. */
  .projeto__videos-texto-linha {
    flex-direction: column;
    height: auto;
  }

  .projeto__videos-texto-linha > div {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* A frase "numa linha só" não cabe numa tela de celular estreita —
     aqui ela volta a quebrar linha normalmente. */
  .projeto__videos-texto-texto {
    white-space: normal;
  }
}

/* Grade de imagens: linhas com pesos diferentes por imagem, pra imitar
   a disposição de larguras desiguais de um print de referência. Cada
   imagem usa "flex-grow" (definido no JavaScript, por vir de um número
   que varia por imagem) — por isso não há uma regra fixa de largura
   aqui, só o comportamento do flex. */
.projeto__imagens-grade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  margin-top: var(--espaco-medio);
}

.projeto__imagens-grade-linha {
  display: flex;
  gap: var(--espaco-medio);
}

/* Exceção igual à do ".projeto__videos-texto-linha": você pediu pra
   alargar a grade de imagens do projeto 4 do mesmo jeito que os vídeos
   ali em cima, pra ficarem do mesmo tamanho ("padronizados"). É a
   mesma técnica de "furar" o container central, só que aplicada por
   uma classe extra (adicionada pelo JavaScript só quando o projeto tem
   "imagensGradeLarga: true" nos dados) — assim outros projetos que
   usam grade de imagens (como o projeto 5) continuam com a largura
   normal, sem essa exceção. */
.projeto__imagens-grade--larga {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

.projeto__imagens-grade-linha img {
  min-width: 0;
  width: 100%;
  display: block;
}

/* Quando um item da grade é um vídeo (em vez de imagem) — projeto 8,
   o Reel do Instagram na mesma linha das fotos. Formato vertical
   (9:16), do jeito que os Reels são gravados. */
.projeto__imagens-grade-video {
  min-width: 0;
  aspect-ratio: 9 / 16;
}

.projeto__imagens-grade-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  /* Várias imagens espremidas lado a lado ficam minúsculas no celular —
     empilha, cada uma com a largura toda. */
  .projeto__imagens-grade-linha {
    flex-direction: column;
  }
}

/* Vídeo grande + imagens empilhadas ao lado: bloco OPCIONAL (só o
   projeto 8 usa isso até agora). O vídeo (formato vertical, tipo
   Reel) fica maior (flex-grow 1.2); as imagens ficam numa coluna ao
   lado, uma embaixo da outra, até somar a mesma altura do vídeo. */
.projeto__video-mosaico {
  /* Alargado até a borda da tela (mesma técnica já usada em outros
     blocos) e mais alto, a seu pedido, pra aproveitar melhor o
     espaço da janela. */
  display: flex;
  gap: var(--espaco-medio);
  height: clamp(44rem, 100vw, 80rem);
  margin-top: var(--espaco-grande);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

.projeto__video-mosaico-video {
  flex: 1.2 1 0;
  height: 100%;
}

.projeto__video-mosaico-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.projeto__video-mosaico-imagens {
  /* Ajustado a seu pedido: só as 2 fotos que restaram ficam aqui,
     agora uma EMBAIXO da outra (não mais lado a lado), ao lado do
     vídeo, até a coluna toda somar a mesma altura dele. O
     "flex-grow" de cada imagem vem do inverso da proporção real dela
     (calculado no JavaScript a partir do "peso") — isso garante que
     as duas preencham a coluna toda, sem cortar e sem sobrar espaço
     vazio. */
  flex: 1.6 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-pequeno);
}

.projeto__video-mosaico-imagens img {
  width: 100%;
  height: auto;
  min-height: 0;
  flex-basis: 0;
  display: block;
}

@media (max-width: 640px) {
  /* Vídeo + fotos empilhadas lado a lado ficam espremidos no
     celular — empilha tudo, um bloco embaixo do outro. */
  .projeto__video-mosaico {
    flex-direction: column;
    height: auto;
  }

  .projeto__video-mosaico-video {
    height: auto;
    aspect-ratio: 9 / 16;
  }

  .projeto__video-mosaico-imagens {
    height: auto;
    width: 100%;
  }

  .projeto__video-mosaico-imagens img {
    height: auto;
    flex-grow: 0 !important;
  }
}

/* Vídeo único, sem texto acima, depois da grade de imagens. */
.projeto__video-final {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-top: var(--espaco-medio);
}

.projeto__video-final iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Exceção pedida pro projeto 4: esse último vídeo ganha uma imagem ao
   lado (que é também um link clicável), os dois aumentados até a
   borda da tela — mesma técnica de "furar" o container já usada em
   outros blocos. Modificador aplicado pelo JavaScript só quando o
   projeto tiver "videoFinalImagem" nos dados. */
.projeto__video-final.projeto__video-final--linha {
  aspect-ratio: unset;
  display: flex;
  align-items: stretch;
  gap: var(--espaco-medio);
  height: clamp(20rem, 50vw, 42rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

.projeto__video-final-video,
.projeto__video-final-imagem {
  flex: 1 1 0;
  height: 100%;
  display: block;
}

.projeto__video-final-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.projeto__video-final-imagem img {
  /* "contain" de propósito (não "cover"): essa imagem tem texto
     legível de campanha — cortar ela pra preencher a caixa cortaria
     esse texto. Sem fundo cinza atrás: o espaço que sobrar mostra a
     cor da própria página (azul), não uma caixa cinza. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  /* Vídeo + imagem lado a lado ficam espremidos no celular — empilha,
     cada um com sua altura natural. */
  .projeto__video-final.projeto__video-final--linha {
    flex-direction: column;
    height: auto;
  }

  .projeto__video-final-video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .projeto__video-final-imagem {
    height: auto;
  }
}

/* 6 vídeos em sequência: 3 colunas (2 linhas de 3) — voltei dessa
   configuração de 6-numa-linha-só pra essa, porque numa linha só cada
   vídeo fica bem pequeno (6 cabendo lado a lado força esse tamanho
   mínimo); com 3 por linha, cada um fica com o DOBRO da largura,
   como você pediu. Bloco OPCIONAL: só aparece quando o projeto tiver
   essa lista preenchida (hoje, só o projeto 1). */
.projeto__sequencia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-medio);
  margin-top: var(--espaco-grande);
}

.projeto__sequencia-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

@media (max-width: 640px) {
  /* 3 vídeos por linha ficam minúsculos demais no celular — empilha,
     um embaixo do outro, cada um com sua própria proporção 16:9. */
  .projeto__sequencia {
    grid-template-columns: 1fr;
  }
}

/* Exceção pedida pro projeto 6: em vez das 3 colunas lado a lado (que
   o projeto 1 usa), os vídeos ficam um embaixo do outro, cada um do
   tamanho de um videocase de verdade (largura toda, com destaque) —
   modificador aplicado pelo JavaScript só quando o projeto pede isso
   (via "videosSequenciaEmpilhada: true" nos dados). */
.projeto__sequencia.projeto__sequencia--empilhada {
  display: flex;
  flex-direction: column;
}

/* Exceção pedida pro projeto 1: os vídeos em 3 colunas alargados até a
   borda da tela, pra aproveitar o espaço vazio que sobra dos dois
   lados (mesma técnica de "furar" o container já usada em outros
   blocos). Continua em 3 colunas — só a largura total que aumenta. */
.projeto__sequencia.projeto__sequencia--larga {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

/* Exceção pedida pro projeto 1: esses vídeos são verticais (formato
   celular/TikTok, não o 16:9 padrão) — a caixa de 16:9 deixava uma
   sobra enorme dos dois lados de cada vídeo (o "espaço vazio" que
   você viu). Aqui a caixa acompanha a proporção vertical de verdade
   do vídeo, então ele preenche a caixa inteira, sem sobra. */
.projeto__sequencia.projeto__sequencia--vertical .projeto__sequencia-video {
  aspect-ratio: 9 / 16;
}

.projeto__sequencia-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.projeto__sequencia-video p {
  /* Texto do espaço reservado (vídeo que ainda não chegou) — centralizado,
     discreto, nunca um quadro em branco sem explicação. */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espaco-pequeno);
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin: 0;
  border: 1px dashed var(--cor-borda);
}

/* Texto em destaque + imagem ao lado: bloco OPCIONAL (hoje, só o
   projeto 3). Texto à esquerda com tratamento diferente (fonte serifada
   itálica, vermelha) pra realmente destacar da frase simples ali em
   cima; imagem à direita, mesma altura visual. */
.projeto__destaque-imagem {
  display: flex;
  align-items: center;
  gap: var(--espaco-medio);
  margin-top: var(--espaco-grande);
}

.projeto__destaque-imagem-texto {
  flex: 1 1 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.4;
  color: var(--cor-destaque);
  margin: 0;
}

.projeto__destaque-imagem-media {
  flex: 1 1 0;
}

.projeto__destaque-imagem-media img {
  width: 100%;
  display: block;
}

@media (max-width: 640px) {
  /* Texto e imagem lado a lado ficam espremidos demais no celular —
     empilha, texto em cima. */
  .projeto__destaque-imagem {
    flex-direction: column;
  }
}

/* Imagens em sequência: uma embaixo da outra, cada uma com protagonismo
   total (largura cheia) — bloco OPCIONAL. Sem fundo cinza nem recorte
   forçado, mesmo motivo já aplicado nos vídeos: só a imagem aparece. */
.projeto__imagens-sequencia {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  margin-top: var(--espaco-grande);
}

.projeto__imagens-sequencia img {
  width: 100%;
  display: block;
}

/* Exceção pedida pro projeto 8: essas imagens também alargadas até a
   borda da tela, pra aproveitar melhor o espaço (mesma técnica de
   "furar" o container já usada em outros blocos). */
.projeto__imagens-sequencia.projeto__imagens-sequencia--larga {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 var(--espaco-medio);
  box-sizing: border-box;
}

/* Vídeo em destaque + galeria de imagens: blocos OPCIONAIS — só aparecem
   quando o projeto tiver esse conteúdo. Cada um começa com o atributo
   "hidden" no HTML (projeto 1, o que está escrito ali, não tem nenhum
   dos dois); o JavaScript remove o "hidden" e preenche quando o projeto
   certo (hoje, o projeto 2) tiver essa informação. */
.projeto__destaque,
.projeto__galeria-bloco {
  /* Ajustado a seu pedido: antes esse bloco "furava" o container central
     pra ficar mais largo que o título/texto/vídeo principal ali em cima
     — e isso deixava a margem desigual entre as partes da página. Tirei
     esse truque: agora todo bloco de .projeto usa a mesma largura,
     sempre. O vídeo em destaque continua parecendo "maior" só porque é
     proporcionalmente mais largo que os vídeos menores ao lado dele
     (ver .projeto__destaque-linha), não por sair do contorno da página.
     Regra geral daqui pra frente: nenhum bloco de entrega deve romper
     essa largura — é o que garante margem igual sempre. */
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  margin-top: var(--espaco-grande);
}

.projeto__destaque-texto {
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin: 0;
  max-width: 34rem;
}

.projeto__galeria-texto {
  /* Sem "max-width" de propósito, a seu pedido: essa frase é mais longa
     e a largura estreita (34rem) estava forçando quebra de linha. Sem
     esse limite, ela usa a largura toda do bloco e cabe numa linha só
     em telas de computador — só deve voltar a quebrar em telas bem
     estreitas de celular, o que é esperado. */
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin: 0;
}

.projeto__destaque-linha {
  /* Ajustado a seu pedido: o vídeo maior e os menores ficam todos na
     MESMA linha, com a MESMA altura — antes um vinha empilhado embaixo
     do outro, o que você achou estranho. Uma altura fixa pro grupo é o
     que garante essa altura igual; o vídeo em destaque só fica "maior"
     porque ocupa mais largura (flex-grow: 2), não porque é mais alto. */
  display: flex;
  gap: var(--espaco-pequeno);
  height: clamp(12rem, 28vw, 22rem);
}

.projeto__destaque-video {
  flex: 2 1 0;
  height: 100%;
  background: var(--cor-borda);
}

.projeto__extra-video {
  flex: 1 1 0;
  height: 100%;
  background: var(--cor-borda);
}

.projeto__destaque-video iframe,
.projeto__extra-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  /* Numa tela estreita, uma linha só com 3 vídeos fica minúscula demais
     pra assistir — empilha, e cada vídeo volta a ter sua própria
     proporção 16:9 individual (a altura fixa do grupo só faz sentido
     lado a lado). */
  .projeto__destaque-linha {
    flex-direction: column;
    height: auto;
  }

  .projeto__destaque-video,
  .projeto__extra-video {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.projeto__galeria {
  /* Dois "posts" lado a lado, cada um com 2 imagens empilhadas — não
     mais uma grade solta de imagens. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-medio);
}

.projeto__galeria-post {
  /* Espaço bem pequeno entre o print e o gif do mesmo par, de propósito:
     é isso que faz os dois lerem como um post só, não duas imagens soltas. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.projeto__galeria-img {
  /* Sem "aspect-ratio" fixo nem fundo cinza: antes, forçar cada imagem
     num quadrado deixava tiras cinzas enormes nas laterais de qualquer
     imagem que não fosse quadrada (a maioria aqui não é). Agora cada
     imagem só ocupa a largura da coluna e mantém sua altura natural. */
  width: 100%;
  display: block;
}

@media (max-width: 640px) {
  /* Dois posts lado a lado ficam estreitos demais no celular — empilha
     um post inteiro depois do outro. */
  .projeto__galeria {
    grid-template-columns: 1fr;
  }
}

/* Ficha técnica: letras pequenininhas de propósito (pedido seu) — é
   informação de bastidor, não conteúdo pra chamar atenção. A linha fina
   em cima separa ela visualmente do resto do projeto. */
.projeto__ficha {
  margin-top: var(--espaco-grande);
  padding-top: var(--espaco-medio);
  border-top: 1px solid var(--cor-borda);
}

.projeto__ficha-titulo {
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--cor-texto-suave);
  margin: 0 0 0.5rem 0;
}

.projeto__ficha-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.projeto__ficha-lista li {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--cor-texto-suave);
}

.projeto__ficha-lista li strong {
  color: var(--cor-texto);
  font-weight: 600;
}

/* Barrinha de imprensa: faixa vermelha cheia (mesma cor de destaque),
   nomes em texto (sem logo de verdade, mesmo motivo dos clientes no
   Sobre), lado a lado, sem repetir. Bloco OPCIONAL — fica bem no final
   da página, depois da ficha técnica. */
.projeto__imprensa {
  margin-top: var(--espaco-grande);
  padding: var(--espaco-medio);
  background: var(--cor-destaque);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espaco-grande);
}

.projeto__imprensa-nome {
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--cor-fundo);
  margin: 0;
}

/* ============================================================
   PÁGINA SOBRE
   Fundo claro, mesma largura de leitura confortável da página de
   projeto. A ordem é: frase de abertura, foto, texto, e o "call me"
   grande no final — combinado com você.
   ============================================================ */
.sobre {
  /* Alargado a seu pedido, pra o texto da bio ocupar menos linhas
     (era 40rem). */
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--espaco-grande) var(--espaco-medio);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-grande);
  text-align: center;
}

.sobre__titulo {
  /* Ajuste final a seu pedido: tirei o retângulo vermelho de fundo —
     agora é só a letra em vermelho, sem caixa nenhuma atrás. Fonte de
     impacto mantida (a mesma do nome na Home). */
  max-width: 26rem;
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  line-height: 1.15;
  color: var(--cor-destaque);
  margin: 0;
}

.sobre__foto {
  width: 100%;
  max-width: 22rem;
  border-radius: 12px;
}

.sobre__texto {
  /* Espaço bem generoso ao redor do texto, a seu pedido — mesmo um
     parágrafo curto "respira" bastante aqui dentro. Os parágrafos
     viram uma coluna com espaço entre eles (gap) — antes ficavam
     grudados, só a altura da linha os separava. */
  width: 100%;
  min-height: 12rem;
  padding: var(--espaco-grande) var(--espaco-medio);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.sobre__texto p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--cor-destaque);
  /* Alargado a seu pedido (era 34rem), pra cada linha caber mais
     palavras e o texto ocupar menos linhas no total. */
  max-width: 44rem;
  width: 100%;
  margin: 0;
  /* Alinhado à esquerda, não centralizado: texto corrido centralizado
     cansa a leitura em parágrafos mais longos — centralizar funciona
     bem só pra frases curtas, como o título grande da página. A
     coluna em si continua centralizada na página (isso é o "align-items:
     center" do pai, .sobre__texto), só o texto dentro dela é que lê
     da esquerda pra direita, do jeito natural. */
  text-align: left;
}

.sobre__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sobre__final-call {
  /* "Grande no fim", como pedido — mesma fonte de impacto usada no nome
     da Home e nos títulos de projeto, pra fechar a página com força. */
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: var(--cor-destaque);
  margin: 0;
  line-height: 1;
}

.sobre__final-email {
  font-family: var(--fonte-texto);
  font-size: 1.1rem;
  color: var(--cor-texto);
  border-bottom: 2px solid var(--cor-destaque);
  transition: opacity 0.15s ease;
}

.sobre__final-email:hover {
  opacity: 0.7;
}

/* ============================================================
   EXPERIÊNCIA E CLIENTES (página Sobre)
   Fundo bege — o mesmo tom de "bastidor" já usado no rodapé —
   porque essa seção também é bastidor: currículo e lista de
   clientes, não a parte emocional da página. Duas colunas lado
   a lado, mesma lógica da grade de trabalhos (que também vira
   1 coluna só no celular).
   ============================================================ */
.experiencia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-grande);
  padding: var(--espaco-grande) var(--espaco-medio);
  background: var(--cor-bege);
}

.experiencia__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
}

.experiencia__mini-titulo {
  /* Trocado a seu pedido: a fonte de "rabisco" (Permanent Marker) não
     estava combinando aqui — agora usa a mesma serifada elegante do
     resto do site (em itálico, pra continuar tendo um tom mais
     pessoal que o texto comum, só que sem parecer rabisco). */
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cor-destaque);
  margin: 0;
}

.experiencia__titulo {
  /* Mesma fonte de impacto do nome na Home e dos títulos de projeto —
     de novo, é isso que faz a página parecer do mesmo site. */
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--cor-destaque);
  margin: 0;
}

.experiencia__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: var(--cor-texto);
}

.experiencia__bloco,
.experiencia__categoria {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.experiencia__rotulo {
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--cor-texto-suave);
  margin: 0;
}

.experiencia__bloco p {
  font-size: 0.95rem;
  color: var(--cor-texto);
  margin: 0;
}

.experiencia__logos {
  /* Gap menor (era var(--espaco-medio), 1.5rem) — as pílulas de texto
     são mais compactas que os logos em imagem seriam, então um
     espaçamento grande deixava "buracos" entre elas. Assim ficam bem
     próximas, preenchendo a linha. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.experiencia__logo {
  /* Altura fixa deixa todos os logos do mesmo tamanho visual, mesmo vindo
     de arquivos com proporções bem diferentes entre si — "object-fit:
     contain" garante que nenhum logo distorce pra caber nessa altura.
     Cinza + opacidade reduzida dá uma aparência uniforme mesmo com logos
     de cores muito diferentes lado a lado; some ao passar o mouse, o que
     é só uma troca de opacidade — nunca uma propriedade pesada pra animar. */
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.experiencia__logo:hover {
  opacity: 1;
}

/* Nome da marca em texto (por enquanto, até os logos de verdade
   chegarem) — pílula discreta, mesmo espírito visual do "cinza e
   discreto" que os logos em imagem já tinham. */
.experiencia__logo-texto {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  line-height: 1.3;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Mesma regra da grade de trabalhos: duas colunas lado a lado ficam
     apertadas demais pra leitura confortável em tela de celular. */
  .experiencia {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LOGIN E PAINEL (administração)
   Mesma linguagem visual do resto do site (mesmas cores e fontes),
   só que num cartão simples e centralizado — não precisa de
   cabeçalho/rodapé aqui, é uma área separada, só sua.
   ============================================================ */
.login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-grande) var(--espaco-medio);
}

.login__card {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-medio);
  text-align: center;
}

.login__selo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.login__titulo {
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.8rem;
  color: var(--cor-destaque);
  margin: 0;
}

.login__campo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.login__campo input {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  color: var(--cor-texto);
}

.login__erro {
  color: var(--cor-destaque);
  font-size: 0.85rem;
  margin: 0;
}

.login__botao {
  width: 100%;
}

.painel {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--espaco-grande) var(--espaco-medio);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
}

.painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-medio);
}

.painel__ola {
  font-size: 1.1rem;
  color: var(--cor-texto);
  margin: 0;
}

.painel__aviso {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.painel__status {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
}

.painel__status--ok {
  color: #1a6b3a;
  background: #e3f5e9;
}

.painel__status--erro {
  color: var(--cor-destaque);
  background: #fbe7e5;
}

.painel__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
}

.painel__projeto {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--espaco-medio);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

.painel__projeto-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.painel__projeto-numero {
  font-family: var(--fonte-impacto);
  color: var(--cor-texto-suave);
  margin-right: auto;
}

.painel__botao-pequeno {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.painel__botao-remover {
  color: var(--cor-destaque);
  border-color: var(--cor-destaque);
}

.painel__campo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.painel__campo input,
.painel__campo textarea {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  color: var(--cor-texto);
  resize: vertical;
}

.painel__campo textarea {
  min-height: 5rem;
}

.painel__midia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: var(--espaco-medio);
  border: 1px dashed var(--cor-borda);
  border-radius: 12px;
}

.painel__midia-titulo {
  font-family: var(--fonte-impacto);
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--cor-destaque);
  margin: 0;
}

.painel__midia-explicacao {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin: 0;
}

.painel__midia-botao {
  cursor: pointer;
  display: inline-block;
}

.painel__midia-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.painel__midia-link {
  font-family: var(--fonte-texto);
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  width: 100%;
  max-width: 26rem;
}

.painel__campo-avancado textarea {
  font-family: monospace;
  font-size: 0.8rem;
  min-height: 8rem;
}

.painel__campo-avancado textarea.painel__campo-invalido {
  border-color: var(--cor-destaque);
  outline: 1px solid var(--cor-destaque);
}

.painel__rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-medio);
  padding-top: var(--espaco-medio);
  border-top: 1px solid var(--cor-borda);
}

/* ============================================================
   REVELAR AO ROLAR (Etapa 8 — animações e acabamento)
   Efeito simples: o bloco começa um pouco transparente e um pouco
   mais baixo do que o lugar final dele, e sobe suavemente até ficar
   no lugar quando entra na tela. Só opacity e transform, como em
   toda animação do site. O JavaScript que liga/desliga essas classes
   está em js/revelar.js.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--visivel {
  opacity: 1;
  transform: translateY(0);
}