/* =====================================================================
   ESTILO DO SITE
   ---------------------------------------------------------------------
   Organização deste arquivo:
     1. Variáveis (cores, fontes, tamanhos)  ← mude as cores aqui
     2. Base (regras gerais da página)
     3. Componentes reaproveitados (botões, cards, etiquetas, listas)
     4. Menu
     5. Cada seção, na ordem da página
     6. Animações
     7. Telas maiores (tablet e computador)

   O site é feito "mobile-first": as regras normais valem para o
   celular, e os blocos @media no final ajustam para telas maiores.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. VARIÁVEIS
   --------------------------------------------------------------------- */
:root {
  /* Cores */
  --cor-fundo: #ECE6DA;          /* bege quente do fundo */
  --cor-fundo-alt: #E4DCCD;      /* bege um pouco mais escuro, para seções alternadas */
  --cor-superficie: #F4EFE6;     /* fundo dos cards */
  --cor-texto: #1C1A17;          /* texto principal (quase preto) */
  --cor-texto-sec: #5A544A;      /* textos secundários */
  --cor-borda: #CFC5B4;          /* linhas e bordas */
  --cor-borda-forte: #B3A893;    /* bordas que precisam aparecer um pouco mais */
  --cor-destaque: #1C1A17;       /* botão principal */
  --cor-sobre-destaque: #F4EFE6; /* texto em cima do botão principal */
  --cor-disponivel: #5F7A55;     /* pontinho de "disponível" */

  /* Cores da seção escura (Contato e rodapé) */
  --cor-escuro-fundo: #1C1A17;
  --cor-escuro-texto: #ECE6DA;
  --cor-escuro-texto-sec: #C2B9AA;
  --cor-escuro-borda: #4A453D;

  /* Fontes */
  --fonte-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Tamanhos */
  --largura-max: 1080px;
  --espaco-lateral: 20px;
  --altura-menu: 64px;
  --raio: 14px;
  --transicao: 0.2s ease;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;                  /* rolagem suave ao clicar no menu */
  scroll-padding-top: var(--altura-menu);   /* o menu fixo não cobre o título */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* palavras longas quebram em vez de sair da tela */
}

h1, h2, h3, h4, p, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* Contorno visível ao navegar com o teclado (Tab) */
:focus-visible {
  outline: 2px solid var(--cor-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus {
  outline: none;
}

/* Centraliza o conteúdo e limita a largura */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--espaco-lateral);
}

/* Esconde da tela, mas leitores de tela continuam lendo */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "Pular para o conteúdo": só aparece quando recebe foco */
.pular-conteudo {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}

.pular-conteudo:focus {
  top: 12px;
}

.aviso-sem-js {
  padding: calc(var(--altura-menu) + 40px) var(--espaco-lateral) 40px;
  text-align: center;
}


/* ---------------------------------------------------------------------
   3. COMPONENTES REAPROVEITADOS
   --------------------------------------------------------------------- */

/* --- Seções --- */
.secao {
  padding: 72px 0;
}

.secao--alt {
  background-color: var(--cor-fundo-alt);
}

.secao-cabecalho {
  max-width: 640px;
  margin-bottom: 36px;
}

.secao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.secao-intro {
  margin-top: 12px;
  color: var(--cor-texto-sec);
  font-size: 1.0625rem;
}

/* Subtítulo simples (texto) e subtítulo com a fonte dos títulos */
.subtitulo {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.subtitulo-serifa {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Rótulo pequeno em maiúsculas (ex.: "ATIVIDADES") */
.rotulo {
  margin: 24px 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
}

/* --- Botões --- */
.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;           /* área de toque confortável */
  padding: 12px 22px;
  border: 1px solid var(--cor-texto);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}

.botao svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.botao:hover {
  transform: translateY(-1px);
}

.botao-principal {
  background-color: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}

.botao-principal:hover {
  background-color: #3A362F;
  border-color: #3A362F;
}

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

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

/* Botão desabilitado (ex.: "Repositório em breve") */
.botao-desabilitado,
.botao-desabilitado:hover {
  background-color: transparent;
  color: var(--cor-texto-sec);
  border: 1px dashed var(--cor-borda-forte);
  cursor: not-allowed;
  transform: none;
}

/* Botões claros, usados na seção escura de Contato */
.botao-claro {
  background-color: transparent;
  color: var(--cor-escuro-texto);
  border-color: var(--cor-escuro-borda);
}

.botao-claro:hover {
  background-color: var(--cor-escuro-texto);
  color: var(--cor-escuro-fundo);
  border-color: var(--cor-escuro-texto);
}

/* --- Cards --- */
.card {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 24px;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

.card:hover {
  border-color: var(--cor-borda-forte);
  box-shadow: 0 10px 30px -20px rgba(28, 26, 23, 0.35);
}

/* --- Etiquetas (pílulas arredondadas) --- */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.etiqueta {
  padding: 6px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background-color: var(--cor-superficie);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Etiquetas dentro de cards ficam com o fundo da página */
.card .etiqueta {
  background-color: var(--cor-fundo);
}

/* --- Lista com marcadores discretos --- */
.lista li {
  position: relative;
  padding-left: 20px;
}

.lista li + li {
  margin-top: 8px;
}

.lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--cor-texto-sec);
}

/* Variação com "check" (usada em "Já feito") */
.lista--feito li::before {
  top: 0.5em;
  left: 2px;
  width: 9px;
  height: 5px;
  border-radius: 0;
  background: none;
  border-left: 1.5px solid var(--cor-texto);
  border-bottom: 1.5px solid var(--cor-texto);
  transform: rotate(-45deg);
}

/* --- Link de texto simples --- */
.link-texto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-underline-offset: 4px;
}


/* ---------------------------------------------------------------------
   4. MENU
   --------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--altura-menu);
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Botão hambúrguer */
.menu-botao {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  cursor: pointer;
}

.menu-botao-linha {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: var(--cor-texto);
  transition: transform var(--transicao), opacity var(--transicao);
}

/* Quando o menu está aberto, as três linhas viram um "X" */
.menu-botao[aria-expanded="true"] .menu-botao-linha:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-botao[aria-expanded="true"] .menu-botao-linha:nth-child(2) {
  opacity: 0;
}
.menu-botao[aria-expanded="true"] .menu-botao-linha:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* No celular, o menu fica escondido até apertar o botão */
.menu {
  display: none;
  position: absolute;
  top: var(--altura-menu);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--altura-menu));
  overflow-y: auto;
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}

.menu--aberto {
  display: block;
}

.menu-lista {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 8px var(--espaco-lateral) 20px;
}

.menu-link {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-size: 1.0625rem;
  text-decoration: none;
  border-bottom: 1px solid var(--cor-borda);
}

.menu-lista li:last-child .menu-link {
  border-bottom: 0;
}


/* ---------------------------------------------------------------------
   5. SEÇÕES
   --------------------------------------------------------------------- */

/* --- Início --- */
.inicio {
  padding: calc(var(--altura-menu) + 40px) 0 72px;
}

.inicio-grade {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* No celular, a foto aparece antes do texto */
.inicio-foto {
  order: -1;
}

.foto-moldura {
  width: 128px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-superficie);
}

.foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--fonte-titulo);
  font-size: 3rem;
  letter-spacing: 0.04em;
  color: var(--cor-texto-sec);
}

.disponibilidade {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background-color: var(--cor-superficie);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--cor-texto-sec);
}

.disponibilidade-ponto {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cor-disponivel);
  box-shadow: 0 0 0 3px rgba(95, 122, 85, 0.2);
}

.inicio-nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.75rem, 12vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.inicio-titulo {
  margin-top: 16px;
  font-size: 1.125rem;
  font-weight: 500;
}

.inicio-frase {
  max-width: 36ch;
  margin-top: 6px;
  font-size: 1.0625rem;
  color: var(--cor-texto-sec);
}

/* --- Sobre mim --- */
.sobre-grade {
  display: grid;
  gap: 40px;
}

.sobre-texto {
  max-width: 62ch;
  font-size: 1.0625rem;
}

.sobre-texto p + p {
  margin-top: 16px;
}

/* O primeiro parágrafo fica um pouco maior */
.sobre-texto p:first-child {
  font-size: 1.25rem;
  line-height: 1.55;
}

/* --- Minha trajetória (linha do tempo) --- */
.linha-tempo {
  position: relative;
  max-width: 720px;
  padding-left: 36px;
}

/* A linha vertical */
.linha-tempo::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: var(--cor-borda-forte);
}

.linha-item {
  position: relative;
  padding-bottom: 40px;
}

.linha-item:last-child {
  padding-bottom: 0;
}

/* A bolinha de cada item */
.linha-marcador {
  position: absolute;
  left: -36px;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--cor-texto-sec);
  border-radius: 50%;
  background-color: var(--cor-fundo);
}

.linha-item--destaque .linha-marcador {
  background-color: var(--cor-texto);
  border-color: var(--cor-texto);
}

.linha-periodo {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cor-texto-sec);
}

.linha-titulo {
  margin: 4px 0 6px;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.2;
}

.linha-resumo {
  color: var(--cor-texto-sec);
}

/* --- Experiência profissional --- */
.experiencias {
  display: grid;
  gap: 20px;
}

.experiencia-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.experiencia-nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
}

.experiencia-periodo {
  font-size: 0.875rem;
  color: var(--cor-texto-sec);
}

.experiencia-subtitulo {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--cor-texto-sec);
}

/* Experiência secundária: mais discreta (sem fundo, letras menores) */
.experiencia--secundaria {
  background-color: transparent;
  font-size: 0.9375rem;
}

.experiencia--secundaria .experiencia-nome {
  font-size: 1.375rem;
}

.experiencia--secundaria .etiqueta {
  background-color: transparent;
}

/* --- Formação --- */
.formacao-lista {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.formacao-curso {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
}

.formacao-instituicao {
  margin-top: 4px;
  font-weight: 500;
}

.formacao-detalhes {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--cor-texto-sec);
}

/* --- Projetos --- */
.projetos-grade {
  display: grid;
  gap: 24px;
}

/* Cada projeto ocupa uma linha inteira (os cards são longos demais para 2 colunas) */
.projeto {
  max-width: 920px;
}

.projeto {
  padding: 28px 22px;
}

.projeto-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.projeto-nome {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 3.25rem);
  line-height: 1;
}

.projeto-nome-anterior {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--cor-texto-sec);
}

/* Selo "Em desenvolvimento" */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background-color: var(--cor-fundo);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.selo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cor-texto-sec);
}

.projeto-descricao {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
}

.projeto-contexto {
  max-width: 64ch;
  margin-top: 12px;
  color: var(--cor-texto-sec);
}

/* Bloco "Meu papel / Equipe / Etapa atual / Tecnologias" */
.projeto-info {
  display: grid;
  gap: 20px;
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.projeto-info dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-sec);
}

.projeto-info dd {
  margin-top: 4px;
  font-weight: 500;
}

.projeto-listas {
  display: grid;
  gap: 8px 40px;
}

.projeto-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Selos do topo do card (status + vibe coding) */
.projeto-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Selo "Feito com vibe coding": preenchido, para chamar atenção */
.selo--vibe {
  border-color: var(--cor-destaque);
  background-color: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}

.selo--vibe::before {
  background-color: var(--cor-sobre-destaque);
}

/* Bloco "Como foi feito" */
.projeto-como {
  max-width: 64ch;
  margin-top: 20px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--cor-borda-forte);
}

.projeto-como .rotulo {
  margin-top: 0;
  margin-bottom: 6px;
}

.projeto-como p {
  color: var(--cor-texto-sec);
}

/* --- Habilidades --- */
.habilidades-grade {
  display: grid;
  gap: 20px;
}

.habilidades-bloco .rotulo:first-of-type {
  margin-top: 0;
}

.habilidades-vazio {
  max-width: 52ch;
  color: var(--cor-texto-sec);
}

/* --- Certificações --- */
.estado-vazio {
  max-width: 640px;
  padding: 32px 24px;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio);
}

.estado-vazio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  background-color: var(--cor-superficie);
  color: var(--cor-texto-sec);
}

.estado-vazio-icone svg {
  width: 22px;
  height: 22px;
}

.estado-vazio-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.625rem;
  line-height: 1.2;
}

.estado-vazio-texto {
  margin-top: 6px;
  color: var(--cor-texto-sec);
}

.certificados {
  display: grid;
  gap: 16px;
}

.certificado-nome {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.certificado-instituicao {
  margin-top: 4px;
}

.certificado-detalhes {
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--cor-texto-sec);
}

.certificado-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 8px;
}

/* --- Contato (seção escura) --- */
.secao--escura {
  background-color: var(--cor-escuro-fundo);
  color: var(--cor-escuro-texto);
}

.secao--escura :focus-visible {
  outline-color: var(--cor-escuro-texto);
}

#contato .secao-cabecalho {
  margin-bottom: 0;
}

#contato .secao-titulo {
  font-size: clamp(2.75rem, 11vw, 4.75rem);
}

.contato-texto {
  max-width: 56ch;
  margin-top: 20px;
  font-size: 1.125rem;
  color: var(--cor-escuro-texto-sec);
}

.contato-vazio {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cor-escuro-borda);
  color: var(--cor-escuro-texto-sec);
}

/* --- Rodapé --- */
.rodape {
  padding: 28px 0 32px;
  background-color: var(--cor-escuro-fundo);
  color: var(--cor-escuro-texto-sec);
  font-size: 0.875rem;
}

.rodape :focus-visible {
  outline-color: var(--cor-escuro-texto);
}

.rodape-conteudo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--cor-escuro-borda);
}

.rodape-links {
  display: flex;
  gap: 20px;
}

.rodape-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cor-escuro-texto);
  text-underline-offset: 4px;
}


/* ---------------------------------------------------------------------
   6. ANIMAÇÕES
   O main.js coloca a classe "revelar" nos elementos e depois a classe
   "visivel" quando eles entram na tela.
   --------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow var(--transicao), border-color var(--transicao);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

/* Se a pessoa pediu "menos movimento" no sistema, desliga tudo */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }
}


/* ---------------------------------------------------------------------
   7. TELAS MAIORES
   --------------------------------------------------------------------- */

/* Tablet (a partir de 600px) */
@media (min-width: 600px) {
  .projeto-info {
    grid-template-columns: repeat(2, 1fr);
  }

  .certificados {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet maior (a partir de 768px) */
@media (min-width: 768px) {
  :root {
    --espaco-lateral: 40px;
  }

  .secao {
    padding: 104px 0;
  }

  .secao-cabecalho {
    margin-bottom: 48px;
  }

  /* Início em duas colunas: texto à esquerda, foto à direita */
  .inicio {
    padding: calc(var(--altura-menu) + 88px) 0 112px;
  }

  .inicio-grade {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .inicio-foto {
    order: 0;
    flex-shrink: 0;
  }

  .foto-moldura {
    width: 220px;
  }

  .foto-placeholder {
    font-size: 4.5rem;
  }

  .card {
    padding: 32px;
  }

  .projeto {
    padding: 44px;
  }

  .projeto-listas {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-conteudo {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
  }

  .rodape-links {
    margin-left: auto;
  }
}

/* Notebook (a partir de 900px) */
@media (min-width: 900px) {
  .sobre-grade {
    grid-template-columns: 1.7fr 1fr;
    gap: 72px;
    align-items: start;
  }

  /* A experiência principal fica mais larga que a secundária */
  .experiencias {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }

  .projeto-info {
    grid-template-columns: repeat(4, 1fr);
  }

  .habilidades-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Computador (a partir de 1000px): menu aparece completo, sem hambúrguer */
@media (min-width: 1000px) {
  .menu-botao {
    display: none;
  }

  .menu {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
  }

  .menu-lista {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
  }

  .menu-link {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--cor-texto-sec);
    transition: color var(--transicao), background-color var(--transicao);
  }

  .menu-link:hover {
    color: var(--cor-texto);
    background-color: var(--cor-fundo-alt);
  }

  .foto-moldura {
    width: 300px;
  }

  .foto-placeholder {
    font-size: 5.5rem;
  }
}