/* ============================================================
   ARQUIVO DE ESTILO — GABRIEL MATIAS PORTFÓLIO
   ============================================================
   Este arquivo controla a aparência do site inteiro.
   A ideia é simples: tudo que muda a "cara" do site (cores,
   fontes, espaçamentos) fica reunido bem no topo, dentro do
   bloco ":root". Trocar a cor de destaque ou a fonte do site
   inteiro é questão de mudar uma linha aqui, não caçar cor por
   cor espalhada no arquivo.
   ============================================================ */

:root {
  /* ---------- CORES ----------
     Baseadas na paleta que você escolheu (tons de verde escuro).
     A paleta não trazia nenhuma cor clara — toda ela é escura —
     então adicionei um branco levemente esverdeado só para o
     texto, que é o mínimo necessário pra garantir leitura
     confortável sobre um fundo tão escuro. */
  --cor-fundo: #02134B;          /* fundo principal do site — azul quase marinho, o mais escuro da paleta nova */
  --cor-fundo-alt: #042478;      /* fundo dos cartões de projeto, o segundo tom mais escuro da paleta */
  --cor-preto: #010A29;          /* versão ainda mais escura do azul principal, usada no rodapé (derivada, não veio da paleta) */
  --cor-borda: #4E57A8;          /* linhas finas, bordas, divisores */
  --cor-destaque: #9494CD;       /* o azul-lilás "aceso" do site — usado em linhas, bordas e áreas grandes */
  --cor-destaque-suave: #4E57A8; /* versão mais discreta do destaque, pra hovers sutis */
  --cor-destaque-texto: #9494CD; /* mesmo tom do destaque — o contraste sobre o fundo já é suficiente pra texto pequeno */
  --cor-texto: #FFFFFF;          /* texto principal — branco puro, direto da paleta */
  --cor-texto-suave: #DED0DC;    /* texto secundário (legendas, categorias) — o tom claro rosa-lilás da paleta */
  --cor-fundo-vidro: rgba(2, 19, 75, 0.6);   /* fundo "vidro" do header — mesma cor de fundo, só translúcida */
  --cor-borda-vidro: rgba(148, 148, 205, 0.28); /* borda bem sutil do header, pra reforçar o efeito de vidro sem pesar */
  --cor-borda-capa: rgba(148, 148, 205, 0.55);  /* borda dos cartões de projeto — mais opaca que a do header, pra não sumir/mesclar em cima de fotos escuras */

  /* ---------- TIPOGRAFIA ----------
     Só uma família de fonte, com dois pesos. Poucos pesos
     carregam mais rápido do que uma família inteira, e o site
     não precisa de mais do que isso. */
  --fonte: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-normal: 400;
  --peso-forte: 600;

  /* ---------- MEDIDAS ----------
     Espaçamento e largura máxima do conteúdo, num lugar só. */
  --largura-conteudo: 1200px;
  --largura-grade: 1600px; /* a grade de projetos usa uma largura maior que o resto do site, pra cada projeto ocupar mais espaço na tela */
  --espaco-lateral: clamp(1.25rem, 5vw, 4rem);
}

/* ============================================================
   BASE
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  /* rolagem suave ao clicar em links internos (ex.: "Contato") */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  line-height: 1.5;
  /* evita que o texto pisque sem estilo enquanto a fonte carrega */
  font-display: swap;

  /* Fundo com o mesmo clima de cor da foto de capa, contínuo do
     início ao fim da página — não é só um trecho que termina, é o
     fundo inteiro do site. "background-attachment: fixed" faz esse
     degradê ficar preso ao tamanho da tela (não da página), então
     ele não estica nem se corta conforme o conteúdo cresce. A foto
     da capa continua por cima dele normalmente, sem conflito. */
  background-color: var(--cor-fundo);
  background-image: linear-gradient(180deg, var(--cor-fundo-alt) 0%, var(--cor-fundo) 45%, var(--cor-preto) 100%);
  background-attachment: fixed;

  /* Em páginas com pouco conteúdo (o Sobre, por exemplo), sobrava
     um vão em branco depois do rodapé, até o fim da tela. Este
     empilhamento em coluna faz o "main" esticar pra preencher o
     espaço disponível, empurrando o rodapé pra sempre encostar no
     fim da tela — sem afetar páginas já compridas, que continuam
     rolando normalmente. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

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

/* Respeita quem pediu ao sistema operacional para reduzir animações.
   O site continua funcionando igual, só sem os movimentos extras. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   CABEÇALHO
   Fica flutuando, centralizado no topo, como um cartão de vidro
   sobre o conteúdo. O "vidro" aqui é feito só com cor translúcida
   (--cor-fundo-vidro) + borda e sombra suaves — de propósito, sem
   usar desfoque (backdrop-filter): esse efeito é fixo na tela o
   tempo todo, e o desfoque nele pesaria a rolagem, principalmente
   em celulares mais fracos.
   ============================================================ */

.cabecalho {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 960px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--cor-fundo-vidro);
  border: 1px solid var(--cor-borda-vidro);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(1, 10, 41, 0.35);
  /* Você pediu o desfoque de verdade por cima da última decisão —
     tudo bem, é sua escolha. Só um lembrete: isso é exatamente o
     tipo de efeito que a regra lá do início pedia pra evitar em
     elementos fixos, porque o navegador recalcula o desfoque a
     cada quadro da rolagem. Deixei um valor baixo (8px) pra
     amenizar o custo; se notar travamento no celular, é só pedir
     pra eu tirar de novo. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.marca {
  font-weight: var(--peso-forte);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.link-nav {
  position: relative;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto);
  padding-bottom: 0.2rem;
}

/* o "risco" que desliza por baixo do link ao passar o mouse —
   feito só com transform, para não pesar na rolagem */
.link-nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cor-destaque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.link-nav:hover::after,
.link-nav.ativo::after {
  transform: scaleX(1);
}

.link-nav.ativo {
  color: var(--cor-destaque-texto);
}

.separador-idiomas {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--cor-borda);
}

/* Um único seletor no lugar dos três botões PT/EN/ES. É montado
   do zero (não é um <select> nativo do navegador) porque a lista
   aberta de um <select> é desenhada pelo sistema operacional — sem
   jeito de tirar aquelas bordas brancas ou combinar com o resto do
   site. Assim, cada pedaço (botão, seta, lista, cada opção) é só
   HTML/CSS normal, no mesmo estilo de vidro do cabeçalho. */
.seletor-idioma {
  position: relative;
}

.seletor-idioma-botao {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--cor-texto-suave);
  font-family: var(--fonte);
  font-size: 0.75rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

.seletor-idioma-botao:hover {
  color: var(--cor-texto);
}

.seletor-idioma-seta {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.seletor-idioma.aberto .seletor-idioma-seta {
  transform: rotate(180deg);
}

.seletor-idioma-lista {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 3.5rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: var(--cor-fundo-vidro);
  border: 1px solid var(--cor-borda-vidro);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 20;
}

.seletor-idioma.aberto .seletor-idioma-lista {
  display: flex;
}

.seletor-idioma-lista li {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.seletor-idioma-lista li:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cor-texto);
}

.seletor-idioma-lista li.ativo {
  color: var(--cor-destaque-texto);
  font-weight: var(--peso-forte);
}

/* ============================================================
   ABERTURA
   Ocupa a tela inteira de propósito — quem chega no site vê só
   o nome, o cargo e a frase de efeito, sem nenhum projeto à
   vista. Os projetos ficam escondidos logo abaixo, fora da
   tela, e só entram quando a pessoa rola pra baixo.
   ============================================================ */

.abertura {
  position: relative;
  z-index: 0; /* cria uma "camada" própria, só pra essa seção — assim a máscara e o convite de rolar não interferem em mais nada da página */
  min-height: 100vh;   /* de reserva, pra navegadores sem suporte à linha de baixo */
  min-height: 100svh;  /* altura "real" da tela no celular, sem contar a barra de endereço */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;

  background-image: url('images/abertura-fundo.jpg');
  background-size: cover;
  background-position: center;
}

/* A máscara fica grudada na base da FOTO (rola junto com a página),
   então ela está sempre exatamente em cima da divisão real entre a
   capa e os projetos — não importa a altura da tela nem quanto o
   site cresce. A foto vai sumindo dentro da mesma cor que começa
   logo abaixo (--cor-fundo), em vez de cortar seco. Só decoração,
   não bloqueia clique nem rolagem. */
.abertura::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26vh;
  background-image: linear-gradient(180deg, transparent 0%, var(--cor-fundo) 100%);
  pointer-events: none;
  z-index: 1;
}


/* Em telas estreitas troca pra uma foto pensada pra formato vertical
   (retrato) — a foto de desktop é larga e, no celular, ficaria com
   o assunto principal cortado nas laterais. */
@media (max-width: 720px) {
  .abertura {
    background-image: url('images/abertura-fundo-mobile.jpg');
  }
}

/* Usada só no h1 "de verdade" (o texto completo pro leitor de tela
   e pro Google). Ele existe no HTML e é lido normalmente, só não
   aparece na tela. */
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nome, cargo e cidade não aparecem mais visualmente na capa — o
   h1 com o nome completo continua no HTML (classe oculto-visualmente,
   acima), só pra leitor de tela e SEO. Por isso não sobrou CSS de
   layout de texto aqui: a capa agora é só a foto de fundo. */

/* O convite pra rolar a página, fixo perto do rodapé da tela
   cheia. O movimento é bem sutil (só sobe e desce alguns
   pixels) e usa só transform, então não pesa na rolagem. */
.abertura-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-texto-suave);
  z-index: 2; /* fica acima da máscara suave do fundo da foto */
}

.abertura-scroll-texto {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.abertura-scroll-seta {
  font-size: 1rem;
  animation: flutuar 1.8s ease-in-out infinite;
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================================================
   GRADE DE PROJETOS
   Dois projetos lado a lado no computador, um só embaixo do
   outro no celular. O nome do projeto fica escondido até o
   mouse passar em cima: quem chega vê a imagem primeiro, sem
   texto competindo com ela.
   ============================================================ */

.grade-projetos {
  position: relative;
  z-index: 0; /* mesma ideia da capa: isola essa seção numa camada própria */
  max-width: var(--largura-grade);
  margin: 0 auto;
  padding: 8rem var(--espaco-lateral) 6rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Continuação da máscara: começa na MESMA cor onde a foto termina
   (--cor-fundo) e desaparece rápido, revelando o fundo normal do
   site logo em seguida. As duas pontas (esta e a de .abertura::after)
   usam exatamente a mesma cor, então não sobra nenhuma linha visível
   entre elas, não importa o tamanho da tela. */
.grade-projetos::before {
  content: '';
  position: absolute;
  /* .grade-projetos é uma coluna centralizada, mais estreita que a
     tela — por isso o degradê não pode usar left:0/right:0 (ficaria
     do tamanho da coluna, deixando um corte vertical visível nas
     sobras da tela pra fora dela). Este truque estica ele pra
     largura da tela inteira, centralizado igual ao resto. */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 0;
  height: 10rem;
  background-image: linear-gradient(180deg, var(--cor-fundo) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 720px) {
  .grade-projetos {
    padding-top: 4.5rem;
    grid-template-columns: 1fr;
  }
}

/* Textinho logo depois dos projetos, avisando que tem mais vindo —
   fica um pouco "puxado" pra cima, dentro do respiro que a grade
   já deixa embaixo, em vez de abrir um vão enorme antes dele. */
.mais-projetos {
  max-width: var(--largura-conteudo);
  margin: -3rem auto 5rem;
  padding: 0 var(--espaco-lateral);
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.card-projeto {
  display: block;
  cursor: pointer;
  /* Estado padrão: totalmente visível. Isso é proposital — se o
     script.js não rodar por algum motivo, o cartão aparece assim
     mesmo, só sem o efeito de entrada. */
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* O script.js adiciona esta classe assim que monta os cartões,
   e a remove no exato momento em que cada um entra na tela —
   é o que faz eles "assentarem" no lugar ao rolar até eles, em
   vez de animarem tudo de uma vez lá no topo da página. */
.card-projeto.pre-revelacao {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}

.card-capa {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px; /* mais arredondado, pra combinar com o formato de pílula do header */
  overflow: hidden;
  border: 1px solid var(--cor-borda-capa); /* mais opaca que a do header, pra ficar igual em toda capa (com foto ou só degradê) */
  background-image: linear-gradient(155deg, var(--cor-capa-1, #02134B), var(--cor-capa-2, #9494CD));
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}

/* Selo "Em construção" — só aparece nos projetos marcados como tal
   no painel. Fica por cima da capa, sempre visível (não só no
   hover), pra avisar antes mesmo de clicar. */
.card-selo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto);
  background: var(--cor-fundo-vidro);
  border: 1px solid var(--cor-borda-vidro);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mensagem que aparece embaixo da tela ao clicar num projeto em
   construção — some sozinha depois de alguns segundos. Não
   intercepta clique (pointer-events: none) pra nunca atrapalhar
   nada embaixo dela. */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: 2000;
  max-width: calc(100% - 3rem);
  padding: 0.9rem 1.5rem;
  text-align: center;
  color: var(--cor-texto);
  font-size: 0.9rem;
  background: var(--cor-fundo-vidro);
  border: 1px solid var(--cor-borda-vidro);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(1, 10, 41, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.aviso-flutuante.visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Um verniz translúcido (a mesma cor do vidro do header) por cima
   da capa borrada, reforçando a sensação de vidro fosco. Ele some
   junto com o desfoque quando o mouse passa por cima. */
.card-capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cor-fundo-vidro);
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card-projeto:hover .card-capa,
.card-projeto:focus-visible .card-capa {
  transform: scale(1.01);
}

.card-projeto:hover .card-capa::after,
.card-projeto:focus-visible .card-capa::after {
  opacity: 0;
}

/* Camada que aparece só no hover, com o nome do projeto.
   O degradê escuro por trás do texto fica pronto desde já:
   quando as capas virarem fotos de verdade, o nome continua
   legível em cima de qualquer imagem. */
.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-projeto:hover .card-overlay,
.card-projeto:focus-visible .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

.card-titulo {
  font-size: 1.4rem;
  font-weight: var(--peso-forte);
  color: var(--cor-texto);
  margin: 0 0 0.25rem;
}

.card-subtitulo {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  margin: 0;
}

/* ============================================================
   RODAPÉ
   Repete em todas as páginas do site. Fundo preto puro pra
   marcar visualmente o fim da página — mas em vez de uma linha
   reta separando ele do resto (que destoava do resto do site,
   sempre construído com transições suaves, nunca com linhas
   duras), ele aparece com o mesmo tipo de degradê suave já usado
   entre a capa e os projetos.
   ============================================================ */

.rodape {
  position: relative;
  z-index: 0; /* isola numa camada própria, mesma lógica da capa e da grade de projetos */
  background: var(--cor-preto);
  padding: 2.5rem var(--espaco-lateral) 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between;
}

.rodape::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  transform: translateX(-50%) translateY(-100%);
  height: 6rem;
  background: linear-gradient(180deg, transparent 0%, var(--cor-preto) 100%);
  pointer-events: none;
}

.rodape-titulo {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin: 0 0 0.75rem;
}

.rodape-link {
  display: block;
  font-size: 0.95rem;
  color: var(--cor-texto);
  margin-bottom: 0.4rem;
  width: fit-content;
  position: relative;
}

.rodape-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--cor-destaque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.rodape-link:hover::after {
  transform: scaleX(1);
}

.rodape-link:hover {
  color: var(--cor-destaque-texto);
}

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

@media (max-width: 600px) {
  .cabecalho {
    top: 0.75rem;
    width: calc(100% - 1.5rem);
    padding: 0.75rem 1.25rem;
    gap: 0.75rem;
  }
  .navegacao {
    gap: 1rem;
  }
  .separador-idiomas {
    padding-left: 0.75rem;
    margin-left: 0;
  }
}

/* ============================================================
   PÁGINA DE PROJETO
   Mesmo tratamento visual da Home, só que focado em um projeto
   só: título grande, as imagens/vídeos empilhados, a ficha
   técnica e os créditos por perto, e um convite pro próximo
   projeto no final.
   ============================================================ */

.projeto-cabecalho {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 9rem var(--espaco-lateral) 3rem;
}

/* O mesmo selo dos cartões, mas aqui não flutua sobre uma imagem —
   fica em fluxo normal, acima da categoria. */
.projeto-selo {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: inline-block;
  margin-bottom: 1rem;
}

.projeto-categoria {
  color: var(--cor-destaque-texto);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.projeto-titulo {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.projeto-resumo {
  max-width: 34rem;
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* Ficha técnica: campos que "andam juntos" ficam lado a lado
   (ex.: Cliente e Ano), como pedido — cada par é uma coluna. */
.projeto-ficha {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--espaco-lateral) 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ficha-campo {
  min-width: 8rem;
}

.ficha-rotulo {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 0.35rem;
}

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

/* Galeria: um bloco de mídia embaixo do outro. Cada bloco tem
   sua própria proporção — no painel (mais pra frente) isso vai
   virar uma escolha sua por mídia. */
.projeto-galeria {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 3rem var(--espaco-lateral);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.midia {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background-image: linear-gradient(155deg, var(--cor-capa-1, #02134B), var(--cor-capa-2, #9494CD));
  background-size: cover;
  background-position: center;
}

/* Vídeo de verdade (link do YouTube/Vimeo colado no painel) — o
   iframe preenche todo o espaço reservado. */
.midia--video-real iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.midia--imagem-larga {
  aspect-ratio: 16 / 9;
}

.midia--imagem-alta {
  aspect-ratio: 4 / 5;
  max-width: 32rem;
}

/* Marcação visual de que ali entraria um vídeo — na etapa do
   painel isso vira o link do YouTube/Vimeo de verdade. */
.midia--video {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.midia-icone-play {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.midia-icone-play::after {
  content: '';
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.1rem;
  border-color: transparent transparent transparent var(--cor-texto);
  margin-left: 0.25rem;
}

/* Créditos: pares função/nome, um embaixo do outro */
.projeto-creditos {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--espaco-lateral) 4rem;
}

.creditos-titulo {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin: 0 0 1rem;
}

.creditos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 28rem;
}

.creditos-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.95rem;
}

.creditos-funcao {
  color: var(--cor-texto-suave);
}

.creditos-nome {
  color: var(--cor-texto);
  font-weight: var(--peso-forte);
}

/* Outros projetos, no fim da página — mesmo cartão da Home, só
   que aqui mostrando todo mundo menos o projeto que já está
   sendo visto, pra continuar navegando sem voltar pra Home.
   Em vez de uma linha reta separando dos créditos (destoava do
   resto do site), um degradê suave — o mesmo tipo usado na Home
   entre a capa e a grade de projetos. */
.projeto-outros {
  position: relative;
  z-index: 0; /* isola numa camada própria, mesma lógica da capa e da grade da Home */
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding-top: 3rem;
}

.projeto-outros::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  /* O fundo do site "gruda" na tela (não na página), então a cor
     exata por trás desta seção varia dependendo de quanto texto
     tem acima. Em vez de tentar adivinhar e arriscar uma emenda
     visível, esta camada cobre a seção inteira com a cor sólida
     certa — só os primeiros pixels (bem no topo) ficam
     transparentes, fazendo a entrada suave. */
  background: linear-gradient(180deg, transparent 0, var(--cor-fundo) 5rem, var(--cor-fundo) 100%);
  z-index: -1;
  pointer-events: none;
}

.projeto-outros-titulo {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin: 0 0 1.5rem;
  padding: 0 var(--espaco-lateral);
}

/* A grade em si reaproveita o visual da Home (mesmos cartões),
   mas sem o espaçamento e a máscara pensados pra ficar embaixo
   da capa em tela cheia — aqui já tem o título logo acima, então
   o espaço precisa ser bem mais enxuto. */
.projeto-outros-grade {
  padding: 0 var(--espaco-lateral) 4rem;
}

.projeto-outros-grade::before {
  content: none;
}

@media (max-width: 720px) {
  .projeto-outros-grade {
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  .projeto-cabecalho {
    padding-top: 7rem;
  }
}

/* ============================================================
   PÁGINA SOBRE
   Mesma barra e rodapé do resto do site. Cada parte (foto+texto,
   experiência, formação) é o seu próprio bloco de vidro — mesmo
   estilo do cabeçalho (fundo translúcido, borda suave, desfoque
   de verdade) — em vez de tudo espalhado direto no fundo da
   página.
   ============================================================ */

/* O fundo do site "gruda" na tela, não na página — então atrás de
   um cartão de vidro alto (como os desta página), a cor por trás
   pode variar do topo até o fim do próprio cartão, dependendo de
   onde ele cai na tela ao rolar. Isso aparecia como um degradê
   indesejado dentro do cartão. Esta camada resolve isso: cobre
   toda a página com uma cor sólida e sempre igual, então os
   cartões de vidro sempre "veem" a mesma cor por trás, iguais em
   qualquer lugar da tela. */
.pagina-sobre {
  position: relative;
  z-index: 0;
}

.pagina-sobre::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  /* Começa transparente (deixando o degradê normal do fundo do
     body aparecer no topo, atrás do cabeçalho, sem corte) e só
     fecha pra cor sólida a partir de ~12rem pra baixo — altura
     suficiente pra já estar sólida antes do primeiro cartão de
     vidro começar. */
  background: linear-gradient(180deg, transparent 0%, var(--cor-fundo) 12rem, var(--cor-fundo) 100%);
  z-index: -1;
}

/* Mesmo estilo de vidro do cabeçalho — fundo translúcido, borda
   simples, sem degradê nem brilho especial. */
.sobre-abertura,
.sobre-secao {
  max-width: var(--largura-conteudo);
  margin: 0 auto 2rem;
  padding: 2.5rem;
  background: var(--cor-fundo-vidro);
  border: 1px solid var(--cor-borda-vidro);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(1, 10, 41, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sobre-abertura {
  margin-top: 8rem;
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  flex-wrap: wrap;
}

.sobre-foto {
  width: 12rem;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  flex-shrink: 0;
  background-image: linear-gradient(155deg, #02134B, #9494CD);
  background-size: cover;
  background-position: center;
}

.sobre-texto {
  flex: 1;
  min-width: 16rem;
}

.sobre-texto p {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
}

.sobre-texto p + p {
  margin-top: 1rem;
}

.sobre-secao-titulo {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-destaque-texto);
  margin: 0 0 1.5rem;
}

.lista-itens {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada item é um bloco só: título + empresa empilhados à esquerda,
   período alinhado à direita (centralizado na altura do bloco), com
   uma linha fina separando um item do outro — sem linha depois do
   último. */
.item-lista {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--cor-borda-vidro);
}

.item-lista:first-child {
  padding-top: 0;
}

.item-lista:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Só o desenho do ícone — sem círculo, sem fundo, sem borda em
   volta, e sem nenhuma linha ligando um item ao outro. */
.item-icone {
  display: flex;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--cor-destaque-texto);
}

.item-icone svg {
  width: 100%;
  height: 100%;
}

.item-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.item-titulo {
  font-size: 1.05rem;
  font-weight: var(--peso-forte);
}

.item-empresa {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.item-periodo {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .sobre-abertura {
    margin-top: 6.5rem;
  }
  .sobre-abertura,
  .sobre-secao {
    padding: 1.75rem;
  }
  .sobre-foto {
    width: 9rem;
  }
  .item-lista {
    align-items: flex-start;
  }
}