/* Importa as fontes do Google Fonts para usar no site */
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

/* :root é o lugar onde definimos variáveis globais
   Essas variáveis podem ser usadas em qualquer lugar do CSS */
:root {
    --cor-primaria: #181818;      /* Cor de fundo principal do site */
    --cor-secundaria: #e0e0e0;    /* Cor principal dos textos */
    --cor-terciaria: #29b6f6;     /* Cor de destaque (links, botões, hover) */
    --cor-hover: #222222;         /* Cor usada em efeitos de hover */

    --fonte-primaria: 'Krona One', sans-serif;   /* Fonte para títulos */
    --fonte-secundaria: 'Montserrat', sans-serif; /* Fonte para textos */
}

/* Reset básico:
   Remove margens e espaçamentos padrão do navegador
   box-sizing garante que padding e border não aumentem o tamanho dos elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo geral do corpo da página */
body {
    min-height: 100vh; /* Garante que o body ocupe pelo menos a altura da tela */
    background-color: var(--cor-primaria); /* Fundo escuro */
    color: var(--cor-secundaria); /* Cor padrão dos textos */
    font-family: var(--fonte-secundaria); /* Fonte padrão do site */
}

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

/* Estilo do cabeçalho */
.cabecalho {
    padding: 20px; /* Espaço interno ao redor do conteúdo do header */
}

/* Menu de navegação */
.cabecalho__menu {
    display: flex; /* Ativa o Flexbox */
    justify-content: center; /* Centraliza os links horizontalmente */
    gap: 60px; /* Espaço entre os links */
}

/* Estilo dos links do menu */
.cabecalho__menu__link {
    font-size: 1.2rem; /* Tamanho da fonte */
    font-weight: 600; /* Peso da fonte (negrito moderado) */
    color: var(--cor-secundaria); /* Cor do texto */
    text-decoration: none; /* Remove sublinhado do link */
}

/* Efeito quando o mouse passa sobre o link */
.cabecalho__menu__link:hover {
    color: var(--cor-terciaria); /* Muda a cor para azul */
}

/* ================= MAIN ================= */

/* Área principal do site */
.apresentacao {
    padding: 5% 10%; /* Espaçamento interno (vertical / horizontal) */
    display: flex; /* Flexbox para alinhar conteúdo e imagem */
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Espaça conteúdo e imagem */
    gap: 60px; /* Espaço entre os blocos */
}

/* Conteúdo textual */
.apresentacao__conteudo {
    width: 55%; /* Ocupa 55% da largura do container */
    display: flex; /* Flexbox */
    flex-direction: column; /* Organiza os elementos em coluna */
    gap: 32px; /* Espaço entre título, texto e links */
}

/* Título principal */
.apresentacao__conteudo__titulo {
    font-family: var(--fonte-primaria); /* Fonte de destaque */
    font-size: 2.2rem; /* Tamanho grande */
}

/* Texto principal */
.apresentacao__conteudo__texto {
    font-size: 1.2rem; /* Tamanho confortável para leitura */
    line-height: 1.6; /* Espaçamento entre linhas (melhora leitura) */
}

/* ================= LINKS ================= */

/* Container dos botões/links */
.apresentacao__links {
    display: flex; /* Flexbox */
    flex-direction: column; /* Botões em coluna */
    gap: 16px; /* Espaço entre os botões */
    margin-top: 20px; /* Espaço acima do bloco */
}

/* Subtítulo da seção de links */
.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria); /* Fonte de título */
    font-size: 1.3rem; /* Tamanho do texto */
}

/* Estilo dos botões de navegação */
.apresentacao__links__navegacao {
    border: 2px solid var(--cor-terciaria); /* Borda azul */
    border-radius: 8px; /* Cantos arredondados */
    padding: 14px; /* Espaço interno do botão */
    text-align: center; /* Centraliza o texto */
    text-decoration: none; /* Remove sublinhado */
    font-size: 1.1rem; /* Tamanho do texto */
    font-weight: 600; /* Peso da fonte */
    color: var(--cor-secundaria); /* Cor do texto */
    transition: 0.3s; /* Animação suave no hover */
}

/* Efeito hover dos botões */
.apresentacao__links__navegacao:hover {
    background-color: var(--cor-terciaria); /* Fundo azul */
    color: var(--cor-primaria); /* Texto escuro */
}

/* ================= IMAGE ================= */

/* Imagem de perfil */
.apresentacao__imagem {
    width: 35%; /* Largura relativa */
    max-width: 300px; /* Limite máximo */
    border-radius: 50%; /* Deixa a imagem redonda */
}

.footer-minimal {
  width: 100%;
  padding: 20px 0;
  background: transparent; /* sem cor por padrão */
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;

  font-size: 18px;  /* ← pode ajustar */
  color: var(--cor-secundaria);      /* ← pode ajustar a cor */
}

.footer-logo {
  width: 200px;     /* ← pode ajustar o tamanho */
  height: auto;
}

/* Regras para telas menores que 900px (celular/tablet) */
@media (max-width: 900px) {

    /* Empilha imagem e texto */
    .apresentacao {
        flex-direction: column-reverse; /* Imagem em cima, texto embaixo */
        text-align: center; /* Centraliza textos */
        padding: 5%; /* Menos espaçamento */
    }

    /* Conteúdo ocupa 100% da largura */
    .apresentacao__conteudo {
        width: 100%;
    }

    /* Imagem maior no mobile */
    .apresentacao__imagem {
        width: 60%;
    }
}