:root {
    --cor-fundo: #ffffff;
    /* Fundo do header (branco) */
    --cor-principal: #06f;
    /* Cor do logo (azul) */
    --fonte-principal: Brockmann, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    --cor-secundaria: #6b7280;
}

svg {
    display: inline-block;
    vertical-align: middle;
}

* {
    font-family: var(--fonte-principal);
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Rolagem suave para âncoras */
}

header {
    background-color: var(--cor-fundo);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
}

.container-principal {
    width: min(1200px, 90%);
    max-width: 1200px;
    /* Limita a largura em ecrãs grandes */
    margin: 0 auto;
    /* Centra a barra de navegação */
}

/* BARRA DE NAVEGAÇÃO */

.navbar {
    display: flex;
    /* Alinha o logo e os links lado a lado */
    justify-content: space-between;
    /* Espaço entre o logo e os links */
    align-items: center;
    /* Centra verticalmente */
    padding: 0.5rem 0;
    /* Espaçamento superior e inferior */
}

.nav-links {
    flex-grow: 1;
    /* Faz os links ocuparem o espaço restante */
    list-style: none;
    /* Remove os marcadores da lista */
    display: flex;
    /* Alinha os links horizontalmente */
    gap: 1rem;
    /* Espaçamento entre os links */
    text-align: center;
    /* Centraliza o texto dos links */
    justify-content: center;
    /* Centraliza os links na barra de navegação */
    padding: 0;
    /* Remove o padding padrão */
    margin: 0;
    /* Remove a margem padrão */
    font-weight: bold;
}

.nav-links a {
    color: var(--cor-secundaria);
    text-decoration: none;
    /* Remove o sublinhado padrão */
    border-bottom-width: 3px;
    /* Espessura da linha */
    border-bottom-style: solid;
    /* Tipo de linha */
    border-bottom-color: transparent;
    /* Cor inicial (invisível) */
    font-size: 0.9rem;
    /* Tamanho da fonte */
    margin: 0 1.5rem;
    /* Espaçamento horizontal entre os links */
    padding-bottom: 10px;
    /* Espaço entre o texto e a linha */
    border-bottom: 3px solid transparent;
    /* Linha inferior inicial invisível */
    transition: all 0.3s ease;
    /* Transição suave */
}

.nav-links a.link-ativo {
    color: var(--cor-principal);
    /* Ex: muda a cor do texto quando ativo */
    border-bottom-color: var(--cor-principal);
    /* Cor da linha quando ativo */
    text-decoration: none;
}

.nav-links a:hover {
    /* Não usar o sublinhado padrão no hover; usar apenas mudança de cor/linha inferior */
    text-decoration: none;
    text-underline-offset: inherit;
    color: var(--cor-principal);
    /* Ex: fica azul ao passar o rato */
}

.logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-principal);
    text-decoration: none;
    gap: 5px;
}

body {
    padding-top: var(--header-height, 70px);
    /* Ajuste conforme a altura do header */
}

#home {
    /* 1. Altura Mínima Inteligente:
     * '100vh' = 100% da altura da janela.
     * '- var(--header-height, 70px)' = Desconta a altura do menu.
     * Isto garante que o conteúdo cabe exatamente no espaço visível,
     * sem criar uma barra de rolagem desnecessária.
    */
    min-height: calc(100vh - var(--header-height, 70px));

    /* 2. Centralização Vertical:
     * Como a secção agora é alta, queremos o conteúdo bem no meio.
    */
    display: flex;
    flex-direction: column;
    /* Mantém os itens um debaixo do outro */
    justify-content: center;
    /* Centraliza verticalmente */

    /* Garante que o container interno ocupe a largura toda */
    width: 100%;

    text-align: center;
    align-items: center;
}

/* Hero Section */
.hero-badge {
    /* fundo */
    background-image: linear-gradient(to right, var(--cor-principal), #00d4ff);
    /* Gradiente azul */
    border-radius: 999px;
    /* Bordas arredondadas */
    display: inline-block;
    /* Ajusta o tamanho ao conteúdo */
    /* texto */
    color: white;
    /* espaçamento */
    padding: 10px 20px;
    margin-bottom: 1.5rem;
}

.icones-sobre-mim {
    fill: var(--cor-principal);
    /* Garante que usa a cor azul do tema */

    /* Aumentei o mínimo de 48px para 60px para melhor visibilidade */
    width: clamp(60px, 8vw, 60px);
    height: auto;

    /* Adiciona uma transição suave se quiser animar no hover */
    transition: transform 0.3s ease;
}

/* (Opcional) Efeito de hover no ícone */
.stat-item:hover .icones-sobre-mim {
    transform: scale(1.1);
    /* Aumenta ligeiramente ao passar o rato */
}


/* ESTILIZAÇÃO DAS SEÇÕES */

.seccao {
    padding: 60px 20px;
    max-width: 100%;
    margin: 0 auto;
}

.container-de-seccoes .seccao:nth-child(odd) {
    background-color: #ffffff;
    /* Cor A (ex: branco) */
    color: #333;
    /* Texto escuro para fundo claro */
}

.container-de-seccoes .seccao:nth-child(even) {
    background-color: #f7f7f7;
    /* Cor B (ex: cinza claro) */
    color: #333;
    /* Texto escuro */
}

.title {
    font-size: 4rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: black;
    line-height: 1.1;
}

.nome-gradiente {
    background: linear-gradient(to right, var(--cor-principal), #00d4ff);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-hero {
    font-size: 1.3rem;
    color: #727272;
    margin-top: 1rem;
    max-width: 80ch;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
}

.botao {
    /* Layout e Espaçamento */
    display: inline-block;
    /* Permite que o link tenha padding */
    padding: 14px 28px;
    /* Espaçamento interno */
    margin: 5px;
    /* Espaço entre os botões */

    /* Texto */
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;

    /* Aparência */
    border-radius: 12px;
    /* Deixa os cantos bem arredondados */
    cursor: pointer;
    transition: all 0.3s ease;
}

.botao-primario {
    background-color: var(--cor-principal);
    color: white;
    border: 2px solid var(--cor-principal);
}

.botao-secundario {
    background-color: white;
    color: var(--cor-principal);
    border: 2px solid var(--cor-principal);
}

.botao:hover {
    /*
     * 'transform' move o elemento.
     * 'translateY(-4px)' move-o 4 píxeis PARA CIMA.
    */
    transform: translateY(-4px);
}

/* --- B. O HOVER do Botão Primário (Sombra) --- */
.botao-primario:hover {
    /*
     * Cria uma sombra suave.
     * (0px = horizontal, 5px = vertical, 15px = blur/desfoque)
    */
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.4);
    /* Sombra azul */
}

/* --- C. O HOVER do Botão Secundário (Inversão) --- */
.botao-secundario:hover {
    /* Simplesmente invertemos as cores do estado normal */
    background-color: var(--cor-principal);
    /* Fundo fica azul */
    color: #ffffff;
    /* Texto fica branco */
}

.container-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 40px 0;
    gap: 4rem;
}

.container-botoes {
    display: flex;
    justify-content: center; /* Centra os botões */
    gap: 1rem; /* Espaço entre os botões (substitui a margin: 5px do .botao) */
    
    /* MUITO IMPORTANTE: Empurra a secção de stats (ícones) para longe */
    margin-bottom: 4rem; 
    flex-wrap: wrap; /* Para não quebrar em telemóveis muito pequenos */
}

.stat-item {
    text-align: center;

    /* Garante alinhamento vertical perfeito */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Limita a largura para o texto quebrar de forma bonita (como na imagem) */
    max-width: 150px;
}

.stat-number {
    /* Removemos o background-clip de texto, pois agora é um SVG */
    background: none;
    -webkit-text-fill-color: initial;

    margin-bottom: 12px;
    /* Mais espaço entre o ícone e o texto */

    /* Centraliza o SVG se ele for menor que o container */
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-label {
    color: var(--cor-secundaria);
    font-size: 0.95rem;
    /* Um pouco maior para leitura */
    line-height: 1.4;
    /* Melhor espaçamento entre linhas do texto */
    font-weight: 500;
}

.titulo-seccao {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: black;
    text-align: center;
}


.container-colunas-sobre {
    display: flex;
    flex-direction: row;
    /* Lado a lado (padrão) */
    justify-content: space-between;
    gap: 3rem;
    /* ex: 48px */
}

.coluna-texto-sobre {
    flex-basis: 47%;
}

.coluna-skills-sobre {
    flex-basis: 40%;
}

.coluna-texto-sobre p {
    font-size: 1.1rem;
    color: #6b7280;
    /* Cinza escuro */
    line-height: 1.7;
    /* Bom espaçamento entre linhas */
    margin-bottom: 1.5rem;
    /* Espaço entre parágrafos */
}

.coluna-skills-sobre h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.container-habilidades-sobre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.badge-habilidade {
    background-color: #ffffff;
    /* Fundo cinza bem claro */
    padding: 10px 15px;
    /* Espaçamento interno */
    border-radius: 12px;
    /* Cantos arredondados */
    font-size: .875rem;
    font-weight: 600;
    color: #333;
    border: 1px solid #eee;
    /* Borda subtil */
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 1s ease;
}

.badge-habilidade:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.15);
    border-color: var(--cor-principal);
    color: var(--cor-principal);

}

.container-titulo-subtitulo {
    text-align: center;
    margin-bottom: 2rem;
}

.subtitulo {
    font-size: 1.1rem;
    color: #6b7280;
    /* Cinza escuro */
    line-height: 1.7;
    /* Bom espaçamento entre linhas */
    /* Espaço entre parágrafos */
    max-width: 65ch;
    margin: 0 auto;
}

.container-cards-grid-projetos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.card-projetos {
    background-color: #ffffff;
    /* Fundo cinza bem claro */
    padding: 2rem;
    /* Espaçamento interno */
    border-radius: 16px;
    /* Cantos arredondados */
    font-size: .875rem;
    font-weight: 600;
    color: #333;
    border: 1px solid #e0e0e0;
    /* Borda subtil */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.card-projetos:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 86, 179, 0.15);
    border-color: var(--cor-principal);
    color: var(--cor-principal);

}

.icon-card {
    font-size: 2rem;
    color: var(--cor-principal);
}

.title-card {
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
    margin-top: 1rem;
}

.subtitle-card {
    font-size: 1rem;
    color: var(--cor-secundaria);
    /* Cinza do seu :root */
    margin-top: 0.5rem;
    line-height: 1.6;
    flex-grow: 1;
}

.techs-card {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.badge-card {
    background-color: #e2e2e2;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #4a4a4a;
    font-weight: normal;
}

.link-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cor-principal);
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
}

.link-card a svg {
    transition: transform 0.3s ease;
}

.link-card a:hover svg {
    transform: translateX(4px);
}

.contact-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 5rem;
}

.contact-link {
    background-color: #ffffff;
    /* Fundo cinza bem claro */
    padding: 1.5rem 2rem;
    /* Espaçamento interno */
    border-radius: 16px;
    /* Cantos arredondados */
    font-size: .875rem;
    font-weight: 600;
    color: #333;
    border: 1px solid #e0e0e0;
    /* Borda subtil */
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    transition: all 0.3s ease;
    text-decoration: none;
    align-items: center;
    gap: 1rem;
}

.contact-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 86, 179, 0.15);
    border-color: var(--cor-principal);
    color: var(--cor-principal);
}

.contact-link a,
.contact-link a:visited,
.contact-link a:hover,
.contact-link a:focus {
    text-decoration: none;
}

footer {
    background-color: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--cor-secundaria);
}


.hamburger-menu {
    display: none;
    /* 1. Escondido por defeito (em desktop) */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
    /* Garante que fica acima do menu overlay */

    /* Dimensões do ícone */
    width: 28px;
    height: 22px;

    /* Flexbox para organizar as 3 linhas */
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-menu .linha {
    display: block;
    width: 100%;
    height: 3px;
    /* Espessura da linha */
    background-color: #333;
    /* Cor da linha (preto/cinza escuro) */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}


/* ============================================== */
/* --- 6. RESPONSIVIDADE (O Ponto de Viragem) --- */
/* ============================================== */

/* Quando a tela for 768px ou menor... */
@media (max-width: 768px) {

    /* --- 6.1. Ajustes Gerais --- */

    /* Reduz o padding das secções */
    .seccao {
        padding: 40px 10px;
    }

    /* Reduz a "margem padrão" em telemóveis */
    .container-principal {
        width: 90%;
    }


    /* --- 6.2. Cabeçalho e Navbar --- */

    /* Mostra o ícone hambúrguer */
    .hamburger-menu {
        display: flex;
    }

    /* Esconde o menu de links do desktop */
    .navbar .nav-links {
        display: none;
    }

    /* Faz o logo "empurrar" o ícone para a direita */
    .navbar .logo {
        flex-grow: 1;
    }


    /* --- 6.3. O Menu Mobile (Overlay) --- */

    .nav-links {
        /* Layout de Ecrã Inteiro */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* 100% da largura da tela */
        height: 100vh;
        /* 100% da altura da tela */

        /* Cor e Alinhamento */
        background-color: var(--cor-fundo);
        /* Fundo branco */
        display: flex;
        flex-direction: column;
        /* Links empilhados */
        justify-content: center;
        align-items: center;

        /* Animação: Esconde o menu fora do ecrã */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;

        margin: 0;
        z-index: 1000;
        /* Fica por cima de tudo */
    }

    /* ESTADO ATIVO (Classe que o JS vai adicionar) */
    .nav-links.nav-ativo {
        transform: translateX(0);
        /* Desliza para dentro */
        display: flex;
        /* Garante que está visível */
    }

    /* Estilo dos links no menu mobile */
    .nav-links li {
        margin: 1.5rem 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        /* Letra maior */
        padding: 14px 0;
        /* Melhor alvo tátil */
        color: #333;
    }

    .nav-links a.link-ativo {
        border-bottom-color: var(--cor-principal);
    }


    /* --- 6.4. Animação do 'X' --- */

    /* Gira a primeira linha */
    .hamburger-menu.ativo .linha:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    /* Esconde a linha do meio */
    .hamburger-menu.ativo .linha:nth-child(2) {
        opacity: 0;
    }

    /* Gira a terceira linha */
    .hamburger-menu.ativo .linha:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* --- 6.5. Ajustes de Layout das Secções --- */

    /* Hero: Reduzir a fonte do título */
    .title {
        font-size: 2.5rem;
        /* Antes era 4rem */
    }

    .desc-hero {
        font-size: 1.1rem;
        /* Antes era 1.3rem */
        max-width: 100%;
        /* Deixa o texto ocupar a largura */
    }

    /* Stats: Centralizar quando quebrar a linha */
    .container-stats {
        justify-content: center;
        gap: 2rem;
    }

    .container-colunas-sobre {
        flex-direction: column;
    }

    .coluna-texto-sobre,
    .coluna-skills-sobre {
        flex-basis: 100%;
    }

    /* Contato (Corrigir o grid de 3 colunas) */
    .contact-links {
        /* Muda de 3 colunas para 1 coluna */
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Breakpoint adicional para tablets/laptops (entre 769px e 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-principal {
        width: min(1100px, 92%);
    }

    .nav-links {
        gap: 0.8rem;
    }

    .nav-links a {
        font-size: 0.95rem;
        margin: 0 1rem;
    }

    .title {
        font-size: 3.2rem;
    }
}

/* Pequenos ajustes em ecrãs muito pequenos */
@media (max-width: 420px) {
    .title {
        font-size: 2rem;
    }

    .container-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .botao {
        padding: 12px 20px;
    }


    /* Garantir que o menu mobile overlay fica acima do header */
    .nav-links {
        z-index: 2000;
    }

    /* Pequeno ajuste visual no botão de hambúrguer para centralizar as linhas */
    .hamburger-menu {
        align-items: center;
    }
}