/* =========================================================
   PROJETO: guilhermeshorane.com.br
   ARQUIVO: public/assets/css/style.css

   DESCRIÇÃO:
   Arquivo principal de estilos do portfólio profissional.
   Este CSS define a identidade visual inicial do site,
   incluindo cores, tipografia, menu, seção principal,
   cards, botões, espaçamentos e rodapé.
========================================================= */

/* =========================================================
   1. VARIÁVEIS GLOBAIS DE CORES
   ---------------------------------------------------------
   O bloco :root armazena cores reutilizáveis no projeto.
========================================================= */
:root {
  /* Cor principal de fundo escuro, usada no topo, hero e rodapé */
  --cor-fundo-principal: #0f172a;
  /* Cor secundária escura, usada para variações de fundo */
  --cor-fundo-secundario: #111827;
  /* Texto claro usado em áreas escuras */
  --cor-texto-claro: #f8fafc;
  /* Texto suave usado em subtítulos e descrições sobre fundo escuro */
  --cor-texto-suave: #cbd5e1;
  /* Azul principal de destaque, ligado à tecnologia e desenvolvimento */
  --cor-azul-destaque: #38bdf8;
  /* Verde secundário, ligado à educação e projetos dos alunos */
  --cor-verde-educacional: #22c55e;
  /* Fundo padrão dos cards */
  --cor-card: #ffffff;
  /* Texto escuro usado em áreas claras */
  --cor-texto-escuro: #1e293b;
  /* Cinza usado em descrições sobre fundo claro */
  --cor-texto-cinza: #64748b;
  /* Cor de borda suave */
  --cor-borda-suave: #e2e8f0;
  /* Fundo claro principal do site */
  --cor-fundo-claro: #f8fafc;
}

/* =========================================================
   2. RESET E CONFIGURAÇÕES GERAIS
   ---------------------------------------------------------
   Remove espaçamentos padrões do navegador e define uma
   base consistente para todos os elementos.
========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   3. CONFIGURAÇÃO BASE DO BODY
   ---------------------------------------------------------
   Define fonte principal, cor de fundo e cor padrão do texto.
 ========================================================= */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: var(--cor-fundo-claro);
  color: var(--cor-texto-escuro);
}
/* =========================================================
   4. MENU SUPERIOR / NAVBAR
   ---------------------------------------------------------
   Estilização do menu fixo superior.
========================================================= */

.navbar {
  background-color: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(10px);
}
/* Nome/marca exibida no canto esquerdo do menu */
.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
}
/* Links principais do menu */
.nav-link {
  color: var(--cor-texto-suave) !important;
  font-weight: 500;
}
/* Efeito visual quando o usuário passa o mouse nos links */
.nav-link:hover {
  color: var(--cor-azul-destaque) !important;
}

/* =========================================================
   5. SEÇÃO HERO / PRIMEIRA DOBRA DO SITE
   ---------------------------------------------------------
========================================================= */

.hero {
  min-height: 90vh;
  /*
       Combinação de fundos:
       1. gradiente escuro principal;
       2. brilho azul radial no canto superior direito.
    */
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(17, 24, 39, 0.95)),
    radial-gradient(
      circle at top right,
      rgba(56, 189, 248, 0.22),
      transparent 30%
    );
  color: var(--cor-texto-claro);
  display: flex;
  align-items: center;
  /*
       Espaçamento superior maior para compensar o menu fixo.
    */
  padding: 120px 0 80px;
}

/* =========================================================
   6. ETIQUETA DO HERO
   ---------------------------------------------------------
   Pequeno selo acima do título principal.
========================================================= */

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background-color: rgba(56, 189, 248, 0.12);
  color: var(--cor-azul-destaque);
  border: 1px solid rgba(56, 189, 248, 0.25);

  border-radius: 999px;
  padding: 8px 16px;

  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 24px;
}

/* =========================================================
   7. TÍTULO PRINCIPAL DO HERO
   ---------------------------------------------------------
   Define o tamanho, peso e espaçamento do título principal.

========================================================= */
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 24px;
}
/* Palavra ou trecho destacado dentro do título */
.hero h1 span {
  color: var(--cor-azul-destaque);
}
/* Texto de apoio abaixo do título principal */
.hero p {
  color: var(--cor-texto-suave);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 32px;
}

/* =========================================================
   8. BOTÕES PRINCIPAIS
   ---------------------------------------------------------
   Estilos dos botões usados na seção hero.

   btn-principal:
   usado para a ação mais importante.

   btn-secundario:
   usado para ação complementar.
   ========================================================= */

.btn-principal {
  background-color: var(--cor-azul-destaque);
  color: #082f49;
  border: none;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
}
/* Efeito hover do botão principal */
.btn-principal:hover {
  background-color: #7dd3fc;
  color: #082f49;
}
/* Botão secundário com borda clara e fundo transparente */
.btn-secundario {
  border: 1px solid rgba(203, 213, 225, 0.4);
  color: var(--cor-texto-claro);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
}
/* Efeito hover do botão secundário */
.btn-secundario:hover {
  border-color: var(--cor-azul-destaque);
  color: var(--cor-azul-destaque);
}

/* =========================================================
   9. CARD DO HERO / ÁREAS DE ATUAÇÃO
   ---------------------------------------------------------
   Card lateral exibido na primeira seção.
========================================================= */
.hero-card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(203, 213, 225, 0.16);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}
/* Título interno do card lateral */
.hero-card h2 {
  font-size: 1.25rem;
  margin-bottom: 18px;
}
/* =========================================================
   10. MINI CARDS DE ESTATÍSTICA / ATUAÇÃO
   ---------------------------------------------------------
   São os blocos internos do card lateral do hero.
========================================================= */
.stat-card {
  background-color: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}
/* Palavra principal do mini card */
.stat-card strong {
  display: block;
  color: var(--cor-azul-destaque);
  font-size: 1.4rem;
}
/* Texto descritivo do mini card */
.stat-card span {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}
/* Remove a margem inferior do último mini card */
.stat-card:last-child {
  margin-bottom: 0;
}

/* =========================================================
   11. ESPAÇAMENTO PADRÃO DAS SEÇÕES
   ---------------------------------------------------------
   Classe reutilizável para criar espaçamento vertical entre
   as seções principais do site.
========================================================= */
.section-padding {
  padding: 90px 0;
}
/* =========================================================
   12. TÍTULOS DE SEÇÃO
   ---------------------------------------------------------
   Estilo dos títulos das próximas áreas do site.
========================================================= */
.section-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--cor-fundo-principal);
  margin-bottom: 16px;
}
/* Subtítulo ou texto de apoio da seção */
.section-subtitle {
  color: var(--cor-texto-cinza);
  font-size: 1.05rem;
  max-width: 720px;
}

/* =========================================================
   13. CARDS DE DESTAQUE
   ---------------------------------------------------------
   Cards usados para apresentar blocos de conteúdo.

   Nesta primeira versão, eles aparecem em:
   - Projetos Web
   - Laboratório de Projetos
   - Soluções para Clientes
========================================================= */
.feature-card {
  background-color: var(--cor-card);
  border-radius: 22px;
  padding: 28px;
  height: 100%;
  border: 1px solid var(--cor-borda-suave);
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.06);
}
/* Ícone exibido no topo dos cards */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(56, 189, 248, 0.12);
  color: var(--cor-azul-destaque);
  font-size: 1.4rem;
  margin-bottom: 18px;
}
/* Título interno dos cards */
.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
/* Texto descritivo dos cards */
.feature-card p {
  color: var(--cor-texto-cinza);
  line-height: 1.7;
  margin-bottom: 0;
}

/* =========================================================
   14. VARIAÇÃO PARA CARD EDUCACIONAL
   ---------------------------------------------------------
   Classe usada para diferenciar visualmente áreas ligadas
   à educação, projetos dos alunos e laboratório de projetos.

   Quando um card recebe a classe .lab-card, o ícone muda
   de azul para verde.
========================================================= */

.lab-card .feature-icon {
  background-color: rgba(34, 197, 94, 0.12);
  color: var(--cor-verde-educacional);
}

/* =========================================================
   15. RODAPÉ
   ---------------------------------------------------------
   Área final do site.
========================================================= */
footer {
  background-color: var(--cor-fundo-principal);
  color: var(--cor-texto-suave);
  padding: 32px 0;
}

/* =========================================================
   16. AJUSTES RESPONSIVOS
   ---------------------------------------------------------
   Ajustes para telas menores.
========================================================= */
@media (max-width: 991.98px) {
  /*
       Reduz o espaçamento do hero em telas menores,
       mantendo distância suficiente do menu fixo.
    */
  .hero {
    min-height: auto;
    padding: 110px 0 70px;
  }
  /*
       Reduz o tamanho do título das seções em tablets.
    */
  .section-title {
    font-size: 2rem;
  }
}
@media (max-width: 575.98px) {
  /*
       Ajusta o espaçamento do hero no celular.
    */
  .hero {
    padding: 100px 0 60px;
  }
  /*
       Reduz o tamanho do texto de apoio do hero.
    */
  .hero p {
    font-size: 1rem;
  }
  /*
       Reduz o espaçamento vertical das seções no celular.
    */
  .section-padding {
    padding: 64px 0;
  }
  /*
       Ajusta o tamanho dos títulos de seção no celular.
    */
  .section-title {
    font-size: 1.8rem;
  }
  /*
       Reduz um pouco o padding dos cards no celular.
    */
  .feature-card,
  .hero-card {
    padding: 22px;
  }
}
/* =========================================================
   FIM DO ARQUIVO
   ---------------------------------------------------------
   Próximos blocos futuros poderão incluir:
========================================================= */