/* =========================
   BASE & VARIÁVEIS
   ========================= */
:root{
  --pink: #ff5fa2;
  --pink-dark: #e24e8c;
  --purple: #7a4fff;
  --purple-dark: #5c3acb;
  --bg: #faf7ff;
  --card: #ffffff;
  --text: #2b235a;
  --muted: #666;
  --max-width: 1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* PAGE WRAPPER */
.page{
  max-width:var(--max-width);
  margin:0 auto;
  padding:40px 20px;
}

/* NAV */
/* NAVBAR */
nav {
  display: flex;           /* deixa os itens em linha */
  align-items: center;     /* alinha verticalmente ao centro */
  justify-content: space-between; /* espaço entre logo e menu */
  margin-bottom: 48px;     /* espaço abaixo da nav */
}

nav .logo img {
  height: 48px;            /* tamanho da logo */
}

nav ul {
  display: flex;           /* itens do menu em linha */
  gap: 28px;               /* espaço entre os links */
  list-style: none;        /* remove os marcadores */
}

nav ul a {
  text-decoration: none;   /* remove sublinhado */
  color: var(--text);      /* cor do texto */
  font-weight: 500;        /* deixa o texto mais forte */
  opacity: 0.9;            /* deixa um pouco transparente */
}

nav ul a:hover {
  color: var(--pink);      /* muda a cor quando passa o mouse */
}



/* HERO */
.hero {
  display: flex;                /* deixa os elementos lado a lado */
  gap: 32px;                    /* espaço entre os elementos */
  align-items: center;          /* alinha verticalmente ao centro */
  justify-content: space-between; /* coloca espaço entre os elementos */
  flex-wrap: wrap;              /* permite quebrar linha se a tela for pequena */
}

.hero-left {
  flex: 1;                      /* ocupa espaço disponível */
  min-width: 300px;             /* largura mínima */
}

.hero-right {
  flex: 1;                      /* ocupa espaço disponível */
  min-width: 280px;             /* largura mínima */
  text-align: center;           /* centraliza conteúdo */
}

.hero-right img {
  max-width: 420px;             /* largura máxima da imagem */
  border-radius: 10px;          /* cantos arredondados */
}

.hero-left h1 {
  font-size: 40px;              /* tamanho do título */
  margin-bottom: 14px;          /* espaço abaixo do título */
}

.hero-left h1 span {
  color: var(--pink);           /* muda a cor do texto destacado */
}

.hero-left p {
  color: var(--muted);          /* cor do parágrafo */
  margin-bottom: 20px;          /* espaço abaixo do parágrafo */
}

/* BOTÃO */
.btn {
  display: inline-block;                          /* deixa o botão em linha */
  padding: 12px 26px;                             /* espaço interno do botão */
  border-radius: 28px;                            /* cantos arredondados */
  background: linear-gradient(135deg, var(--pink), var(--purple)); /* cor do botão */
  color: #fff;                                    /* cor do texto */
  text-decoration: none;                          /* remove sublinhado */
  font-weight: 600;                               /* deixa o texto mais forte */
}

.btn:hover {
  transform: translateY(-3px);                   /* efeito de subir quando passa o mouse */
}


/* SEÇÃO (espaçamento e alinhamento) */
.section {
  padding: 48px 0;  /* espaço em cima e embaixo da seção */
}

.section .section-inner {
  max-width: var(--max-width); /* largura máxima do conteúdo dentro da seção */
  margin: 0 auto;              /* centraliza a seção horizontalmente */
  padding: 3% 0;               /* espaço interno em cima e embaixo (3% da largura da tela) */
}


/* SOBRE MIM */
.about .section-inner {
  display: flex;       /* coloca o texto e a imagem lado a lado */
  gap: 32px;           /* espaço entre o texto e a imagem */
  align-items: center; /* alinha verticalmente no centro */
  flex-wrap: wrap;     /* permite que quebre linha em telas pequenas */
}

.about .text {
  flex: 1;             /* ocupa o espaço disponível */
  min-width: 300px;    /* largura mínima do texto */
}

.about .media {
  flex: 0 0 320px;     /* largura fixa para a imagem */
  text-align: center;  /* centraliza a imagem */
}

.about h2 {
  font-size: 28px;                 /* tamanho do título */
  color: var(--purple);            /* cor do título */
  border-left: 6px solid var(--pink); /* linha rosa do lado esquerdo */
  padding-left: 12px;              /* espaço entre a linha e o texto */
  margin-bottom: 12px;             /* espaço abaixo do título */
}

.about p {
  color: var(--muted); /* cor do texto */
  margin-bottom: 12px; /* espaço abaixo do parágrafo */
}

.about img {
  max-width: 100%;                       /* imagem não ultrapassa a largura do container */
  border-radius: 10px;                   /* cantos arredondados */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* sombra leve */
}

/* PROJETOS */
.projects .section-inner {
  padding-top: 8px; /* um pouco de espaço no topo da seção */
}

.projects h2 {
  font-size: 28px;                  /* tamanho do título */
  color: var(--purple);             /* cor do título */
  border-left: 6px solid var(--pink); /* linha rosa na esquerda */
  padding-left: 12px;               /* espaço entre a linha e o texto */
  margin-bottom: 20px;              /* espaço abaixo do título */
}

.grid {
  display: grid;                                 /* usa grid para organizar os cards */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* colunas automáticas que crescem até 1fr */
  gap: 20px;                                     /* espaço entre os cards */
}

.card {
  background: var(--card);           /* cor de fundo do card */
  padding: 20px;                     /* espaço interno */
  border-radius: 12px;               /* cantos arredondados */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* sombra leve */
  transition: 0.25s;                 /* animação suave para hover */
}

.card h3 {
  margin-bottom: 8px; /* espaço abaixo do título do card */
}

.card p {
  color: var(--muted);   /* cor do texto do card */
  margin-bottom: 12px;   /* espaço abaixo do parágrafo */
}

.card a {
  color: var(--pink);      /* cor do link */
  font-weight: 600;        /* deixa o link em negrito */
  text-decoration: none;   /* remove sublinhado */
}

.card:hover {
  transform: translateY(-6px);                  /* levanta o card quando passa o mouse */
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);     /* sombra um pouco maior no hover */
}

/* FORMULÁRIO */

/* um pouco de espaço no topo da seção do formulário */
.form-section .section-inner {
  padding-top: 8px;
}

/* estilo geral da seção do formulário */
.form-section {
  background: var(--card);               /* fundo branco do card */
  border-radius: 12px;                   /* cantos arredondados */
  padding: 28px;                         /* espaço dentro do card */
  margin-top: 20px;                      /* espaço acima da seção */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* sombra leve */
}

/* título do formulário */
.form-section h2 {
  font-size: 26px;                        /* tamanho do texto */
  color: var(--purple);                   /* cor roxa */
  border-left: 6px solid var(--pink);     /* linha rosa na esquerda */
  padding-left: 12px;                      /* espaço entre a linha e o texto */
  margin-bottom: 16px;                     /* espaço abaixo do título */
}

/* formulário em coluna */
.form {
  display: flex; 
  flex-direction: column; 
  gap: 16px;  /* espaço entre os campos */
}

/* linha de campos lado a lado */
.row {
  display: flex;
  gap: 16px; 
  flex-wrap: wrap; /* faz os campos irem para a próxima linha se precisar */
}

/* cada campo */
.input-wrapper {
  display: flex;
  flex-direction: column; /* label em cima do input */
}

/* label do campo */
.input-wrapper label {
  font-size: 14px;
  margin-bottom: 6px; /* espaço entre label e input */
  color: var(--text);
}

/* campo de texto ou textarea */
.input-wrapper input,
.input-wrapper textarea {
  padding: 12px 14px;                  /* espaço dentro do campo */
  border-radius: 8px;                   /* cantos arredondados */
  border: 1px solid #e9e9ee;           /* borda cinza clara */
  background: #fafafa;                  /* fundo clarinho */
  font-size: 15px;                      /* tamanho do texto */
  color: var(--text);                   /* cor do texto */
}

/* área de texto maior */
.input-wrapper textarea {
  min-height: 120px;   /* altura mínima */
  resize: vertical;    /* permite aumentar a altura */
}

/* botão alinhado à direita */
.actions {
  display: flex;
  justify-content: flex-end; 
}

/* botão de enviar */
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple)); /* gradiente rosa-roxo */
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 28px;
  font-weight: 600;
  cursor: pointer;
}

/* efeito quando passa o mouse */
.btn-primary:hover {
  transform: translateY(-3px); /* levanta o botão um pouquinho */
}


/* FOOTER */

/* estilo geral do rodapé */
.site-footer {
  text-align: center;
  padding: 20px 0;
  color: #666;
  background: #faf7ff;
  margin-top: 40px;
}

.social-links {
  margin-top: 8px;
}

.social-links a {
  display: inline-block;
  margin: 0 10px;
}

.social-links img {
  width: 30px;   /* tamanho do ícone */
  height: 30px;
  transition: transform 0.2s;
}

.social-links img:hover {
  transform: scale(1.2); /* aumenta quando passa o mouse */
}


/* RESPONSIVO - telas menores que 900px */
@media (max-width: 900px) {

  /* HERO */
  .hero-left h1 {
    font-size: 32px; /* diminui o tamanho do título */
  }

  .hero-right img {
    max-width: 320px; /* diminui a imagem para caber melhor */
  }

  /* SOBRE */
  .about .media {
    flex: 1 1 100%; /* ocupa toda a largura */
    order: 2;       /* coloca a imagem depois do texto */
  }

  .about .text {
    order: 1;       /* coloca o texto antes da imagem */
  }

  /* FORMULÁRIO */
  .row {
    flex-direction: column; /* empilha os campos verticalmente */
  }

  .actions {
    justify-content: center; /* centraliza o botão */
  }

  /* NAV */
  .nav-list {
    gap: 16px; /* reduz o espaço entre os itens do menu */
  }
}


/* small screens */
@media (max-width:480px){
  .page{padding:20px}
  .hero-left h1{font-size:28px}
  .nav-list{display:flex;gap:12px;font-size:14px}
}