/* ═══════════════════════════════════
   VARIÁVEIS - Catppuccin Mocha
═══════════════════════════════════ */
:root {
  --background: #1e1e2e; /* cor de fundo principal */
  --surface:    #313244; /* fundo dos cards */
  --overlay:    #6c7086; /* texto apagado / bordas sutis */
  --text:       #cdd6f4; /* cor do texto principal */
  --purple:     #cba6f7; /* roxo — cor de destaque */
  --pink:       #f5c2e7; /* rosa */
  --blue:       #89b4fa; /* azul */
  --green:      #a6e3a1; /* verde */
}

/* ═══════════════════════════════════
   RESET
   Zera margens e bordas padrão do navegador
═══════════════════════════════════ */
* {
  margin: 0;           /* remove espaço externo padrão */
  padding: 0;          /* remove espaço interno padrão */
  box-sizing: border-box; /* padding não aumenta o tamanho do elemento */
}

/* ═══════════════════════════════════
   CORPO DA PÁGINA
═══════════════════════════════════ */
body {
  background-color: var(--background); /* cor de fundo do site */
  color: var(--text);                  /* cor padrão dos textos */
  font-family: "Inter", sans-serif;    /* fonte padrão */
  font-size: 14px;                     /* tamanho base dos textos */
  line-height: 1.6;                    /* espaço entre linhas */
}

/* ═══════════════════════════════════
   FONTE ESTILO CÓDIGO
   Usada na logo e nos títulos de seção
═══════════════════════════════════ */
.codigo {
  font-family: "JetBrains Mono", monospace; /* fonte estilo terminal */
  font-size: 1.2rem;                        /* tamanho levemente maior */
  color: var(--purple);                     /* cor roxa */
  letter-spacing: 2px;                      /* espaço entre as letras */
  box-shadow: 0 5px px rgb(133, 11, 255);
}
/*Logo do projeto*/
.logo {
  filter: none;
  width: auto;
  height: 40px;
  object-fit: contain;
}

/* ═══════════════════════════════════
   ÍCONES
   Tamanho fixo e cor igual ao texto
═══════════════════════════════════ */
img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(19%) saturate(387%) hue-rotate(194deg) brightness(102%) contrast(97%); /* recolore a imagem pra cor --text */
  width: 18px;         /* largura fixa */
  height: 18px;        /* altura fixa */
  object-fit: contain; /* não distorce a imagem */
}

/* Ícones dentro das stacks — cor roxa */
.stacks li img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(30%) saturate(600%) hue-rotate(200deg) brightness(105%) contrast(95%); /* recolore pra cor --purple */
  transition: filter 0.3s; /* animação suave no hover */
}

/* ═══════════════════════════════════
   LINKS
═══════════════════════════════════ */
a {
  text-decoration: none; /* remove sublinhado */
  color: var(--text);    /* cor igual ao texto normal */
}

/* ═══════════════════════════════════
   CONTAINER
   Centraliza e limita a largura do conteúdo
═══════════════════════════════════ */
.container {
  max-width: 1100px; /* largura máxima */
  margin: 0 auto;    /* centraliza horizontalmente na página */
  padding: 0 20px;   /* espaço nas laterais */
}

/* ═══════════════════════════════════
   HEADER
   Barra do topo com logo e navegação
═══════════════════════════════════ */
header {
  display: flex;                          /* coloca filhos lado a lado */
  justify-content: space-between;         /* logo na esquerda, nav na direita */
  align-items: center;                    /* centraliza verticalmente */
  padding: 20px 5%;                       /* espaço interno */
  border-bottom: 1px solid var(--surface); /* linha sutil embaixo */
}

/* ═══════════════════════════════════
   NAVEGAÇÃO
═══════════════════════════════════ */
nav ul {
  display: flex;    /* itens lado a lado */
  list-style: none; /* remove bolinhas da lista */
  gap: 2rem;        /* espaço entre os links */
}

/* Link do nav */
nav a {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: var(--purple);          /* cor roxa */
  text-decoration: none;         /* sem sublinhado */
  letter-spacing: 1px;           /* espaço entre letras */
  transition: color 0.3s, transform 0.3s; /* animação suave */
  display: inline-block;         /* necessário pro transform funcionar */
}

/* Link do nav quando o mouse passa em cima */
nav a:hover {
  color: rgb(132, 0, 255);    /* fica roxo mais escuro */
  transform: translateY(-1px); /* sobe 1px suavemente */
}

/* ═══════════════════════════════════
   LISTAS GERAIS DAS SEÇÕES
═══════════════════════════════════ */

/* A lista em si */
section ul {
  list-style: none; /* remove bolinhas */
  display: flex;    /* itens lado a lado */
  flex-wrap: wrap;  /* quebra linha se não couber */
  gap: 1rem;        /* espaço entre os itens */
}

/* Cada item da lista */
section ul li {
  display: flex;       /* ícone e texto lado a lado */
  align-items: center; /* alinha verticalmente */
  gap: 8px;            /* espaço entre ícone e texto */
}

/* ═══════════════════════════════════
   BADGES DAS STACKS
═══════════════════════════════════ */

/* Cada badge */
.stacks li {
  background-color: rgba(66, 34, 85, 0.226); /* fundo levemente roxo */
  border: 1px solid var(--purple);            /* borda roxa */
  color: var(--purple);                       /* texto roxo */
  padding: 6px 14px;                          /* espaço interno */
  border-radius: 6px;                         /* cantos arredondados */
  font-family: "JetBrains Mono", monospace;   /* fonte estilo código */
  transition: background-color 0.3s, color 0.3s; /* animação suave */
  cursor: default;                            /* cursor normal (não vira mãozinha) */
}

/* Badge quando o mouse passa em cima */
.stacks li:hover {
  background-color: rgba(132, 0, 255, 0.452); /* fundo roxo mais forte */
}

/* ═══════════════════════════════════
   SEÇÃO SOBRE — WRAPPER
═══════════════════════════════════ */

/* Div que segura os dois lados */
/* Wrapper: divide esquerda(texto+stacks) e direita(contatos) */
.sobre-wrapper {
  display: flex;           /* coloca filhos lado a lado */
  gap: 4rem;               /* espaço entre esquerda e direita */
  align-items: flex-start; /* alinha pelo topo */
  margin-top: 2rem;        /* espaço acima do wrapper */
}

/* Lado esquerdo */
.sobre-texto {
  flex: 2;                 /* ocupa 2/3 do espaço */
  display: flex;           /* empilha os filhos */
  flex-direction: column;  /* na vertical */
  gap: 1rem;               /* espaço entre parágrafos */
  text-align: left;        /* texto alinhado à esquerda */
}

/* Lado direito */
.sobre-contatos {
  flex: 1;
  align-self: stretch;            /* ocupa a mesma altura do lado esquerdo */
  display: flex;                  /* ativa flex interno */
  flex-direction: column;         /* título em cima, cards embaixo */
  justify-content: space-between; /* título no topo, cards no fundo */
}


/* Título "Contatos" igual ao "Quem sou eu?" */
.sobre-contatos h2 {
  font-size: 1.8rem;   /* mesmo tamanho visual do h1 */
  font-weight: 700;    /* negrito */
  margin-bottom: 1rem; /* espaço abaixo do título */
  font-family: 'Space Mono', monospace;
}

/*Espaço abaixo do titulo*/
#sobre h2{
    margin-bottom: 1.5rem;
    font-family: 'Space Mono', monospace;
    font-size: 1.8rem;
}
#sobre .codigo{
    margin-bottom: 0.5rem; /*empura o próximo elemento para baixo*/
}
/* ═══════════════════════════════════
   CARDS DE CONTATO
═══════════════════════════════════ */

/* A lista de contatos */
.lista-contatos {
  display: flex;          /* empilha os cards */
  flex-direction: column; /* na vertical */
  gap: 0.8rem;            /* espaço entre os cards */
  list-style: none;       /* remove bolinhas */
  margin-top: 0;          /* remove espaço acima — o space-between cuida disso */
}

/* Cada card de contato */
.lista-contatos li {
  background-color: rgba(66, 34, 85, 0.226); /* fundo do card */
  border: 1px solid var(--overlay); /* borda acinzentada */
  border-radius: 8px;               /* cantos arredondados */
  padding: 12px 16px;               /* espaço interno */
   transition: background-color 0.3s, color 0.3s; /* animação suave */
}

/* Card quando o mouse passa em cima */
.lista-contatos li:hover {
  background-color: rgba(132, 0, 255, 0.452); /* borda fica roxa */;
  box-shadow: 0 5px 40px rgb(42, 31, 53);
}

/* Link dentro do card */
.lista-contatos a {
  display: flex;       /* ícone e texto lado a lado */
  align-items: center; /* alinha verticalmente */
  gap: 12px;           /* espaço entre ícone e texto */
  color: var(--purple);  /* cor do texto */
  
}
.lista-contatos li img{
     filter: brightness(0) saturate(100%) invert(77%) sepia(30%) saturate(600%) hue-rotate(200deg) brightness(105%) contrast(95%); /* recolore pra cor --purple */
  transition: filter 0.3s; /* animação suave no hover */
}

/* ═══════════════════════════════════
   SEÇÃO PROJETOS
═══════════════════════════════════ */

/*Título da sessão*/
#projetos{
    padding: 60px; /*Espaço acima e abaixo da sessão*/
}

/*Grid dos Cards(3 por linha)*/

.projetos-grid {
    display: grid; /*ativa o grid*/
    grid-template-columns: repeat(3, 1fr); /*3 colunas iguais*/
    gap: 1.5rem; /*Espaço entre os cards*/
    margin-top: 2rem; /*Espaço acima do grid*/
}

/*Configurando O card em si*/
.card {
    background-color: var(--surface); /*Fundo levemente mais claro*/
    border: 1px solid var(--overlay); /*borda sutil*/
    border-radius: 12px; /*Cantos arredondados*/
    padding: 1.5rem; /*Espaço interno*/
    display: flex; /*empilha os sub-elementos*/
    flex-direction: column; /*alinha na vertical*/
    gap: 0.8rem; /*espaço entre título, texto e vídeo*/
    transition: border-color 0.3s, transform 0.3s; /*Animação suave*/

}
/*animação quando o mouse passar encima*/
.card:hover{
    border-color: rgba(132, 0, 255, 0.452); /*borda fica roxinha*/
    transform: translateY(-6px); /*sobe um pouquinho*/
    box-shadow: 0 10px 40px rgb(153, 0, 255);
}
/*Número(título do projeto)*/
.card h3{
    font-size: 1.1rem; /*tamanho do título*/
    font-weight: 700; /*texto em negrito*/
    color: var(--purple); /*cor do texto*/
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
}

/*Descrição do projeto*/
.card p{
    font-size: 0.85rem; /*tamanho do texto*/
    color: var(--text); /*cor do texto*/ 
    line-height: 1.6; /*Espaçamento entre as linhas*/
}

/*Título dos colaboradores*/
.card h4{
    font-size: 0.75rem; /*tamanho do texto*/
    color: var(--purple); /*cor de texto*/
    text-transform: uppercase; /*texto em maiúsculo*/
    letter-spacing: 1px; /*Espaçamento entre as letras*/
    font-family: 'Space Mono', monospace;
}

/*Configuração da exibição do video*/
.card video{
    width: 100%; /*largura do video*/
    height: 160px; /*altura do video*/
    object-fit: cover; /*não distorce o vídeo*/
    border-radius: 8px;/*arredonda os coantos do video*/
    margin-top: 0.5rem; /*Espaço acima do vídeo*/
}

footer{
    text-align: center; /*Alinha o texto ao centro*/
    padding: 2rem 0; /*Espaço interno*/
    border-top: 1px solid var(--purple); /*linha sútil encima*/
    color: var(--overlay); /*cor do texto*/
    font-size: 0.85rem; /*tamanho de texto*/

}


/*Resolução no celular*/
/* ═══════════════════════════════════
   RESPONSIVIDADE — TABLET
═══════════════════════════════════ */

@media (max-width: 1024px) {

  /* Grid dos projetos vira 2 colunas */
  .projetos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Diminui espaço lateral */
  header {
    padding: 20px 30px;
  }

  .sobre-wrapper {
    gap: 2rem;
  }

}


/* ═══════════════════════════════════
   RESPONSIVIDADE — CELULAR
═══════════════════════════════════ */

@media (max-width: 768px) {

  /* ===== BODY ===== */

  body {
    font-size: 13px;
  }

  .container {
    padding: 0 16px;
  }


  /* ===== HEADER ===== */

  header {
    flex-direction: column;
    gap: 1rem;
    padding: 20px 16px;
    text-align: center;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  nav a {
    font-size: 0.9rem;
  }


  /* ===== SOBRE ===== */

  .sobre-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .sobre-texto,
  .sobre-contatos {
    width: 100%;
  }

  .sobre-texto {
    text-align: left;
  }

  #sobre h2,
  .sobre-contatos h2 {
    font-size: 1.5rem;
  }


  /* ===== STACKS ===== */

  section ul {
    gap: 0.7rem;
  }

  .stacks li {
    padding: 6px 10px;
    font-size: 0.8rem;
  }


  /* ===== CONTATOS ===== */

  .lista-contatos li {
    padding: 12px;
  }

  .lista-contatos a {
    gap: 10px;
    font-size: 0.9rem;
  }


  /* ===== PROJETOS ===== */

  #projetos {
    padding: 40px 0;
  }

  .projetos-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 1.2rem;
  }

  .card h3 {
    font-size: 1rem;
  }

  .card p {
    font-size: 0.82rem;
  }

  .card video {
    height: auto;
  }


  /* ===== FOOTER ===== */

  footer {
    padding: 1.5rem 1rem;
    font-size: 0.8rem;
  }

}


/* ═══════════════════════════════════
   RESPONSIVIDADE — CELULARES PEQUENOS
═══════════════════════════════════ */

@media (max-width: 480px) {

  .codigo {
    font-size: 1rem;
    letter-spacing: 1px;
  }

  nav ul {
    gap: 0.8rem;
  }

  nav a {
    font-size: 0.85rem;
  }

  #sobre h2,
  .sobre-contatos h2 {
    font-size: 1.3rem;
  }

  .card {
    padding: 1rem;
  }

  .card video {
    border-radius: 6px;
  }

}