/* ===== RESET GLOBAL ===== */
* { /* aplica a todos os elementos */
    margin: 0; /* remove margens padrão do browser */
    padding: 0; /* remove padding padrão do browser */
    box-sizing: border-box; /* inclui padding e border no cálculo da largura total */
}

body { /* estilos do corpo da página */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* fonte do sistema operativo */
    line-height: 1.6; /* espaçamento entre linhas de texto */
    color: #333; /* cor do texto padrão */
    background: #fff; /* fundo branco */
}

/* ===== NAVEGAÇÃO ===== */
nav { /* barra de navegação no topo */
    background: #fff; /* fundo branco */
    padding: 1.2rem 0; /* espaçamento vertical */
    position: fixed; /* fica fixa no topo ao fazer scroll */
    width: 100%; /* ocupa toda a largura */
    top: 0; /* posicionada no topo */
    z-index: 1000; /* fica por cima de outros elementos */
    border-bottom: 1px solid #e5e7eb; /* linha cinzenta fina na base */
}

nav .container { /* contentor interno da navegação */
    max-width: 1280px; /* largura máxima */
    margin: 0 auto; /* centraliza horizontalmente */
    padding: 0 2rem; /* espaçamento lateral */
    display: flex; /* layout flexível */
    justify-content: space-between; /* espaço entre logo e menu */
    align-items: center; /* alinha verticalmente ao centro */
}

nav .logo { /* logotipo GesTeam */
    font-size: 1.6rem; /* tamanho grande */
    font-weight: 700; /* negrito */
    color: #1a1a1a; /* preto escuro */
    letter-spacing: -0.5px; /* letras ligeiramente mais juntas */
}

nav .logo img { /* imagem do logotipo */
    height: 60px; /* altura da imagem */
    width: auto; /* largura proporcional */
}

nav .logo span { /* palavra "Team" dentro do logo */
    color: #2563eb; /* azul */
}

nav ul { /* lista de links do menu */
    list-style: none; /* remove marcadores da lista */
    display: flex; /* itens em linha horizontal */
    gap: 2.5rem; /* espaço entre cada item */
    align-items: center; /* alinha verticalmente ao centro */
}

nav a { /* todos os links do menu */
    color: #4b5563; /* cinzento */
    text-decoration: none; /* remove sublinhado */
    transition: color 0.2s; /* transição suave na mudança de cor */
    font-size: 0.95rem; /* tamanho ligeiramente menor */
    font-weight: 500; /* peso médio */
}

nav a:hover { /* links quando o rato passa por cima */
    color: #2563eb; /* muda para azul */
}

.btn-login { /* botão "Entrar" no menu */
    background: #2563eb; /* fundo azul */
    color: white !important; /* texto branco (força a aplicação) */
    padding: 0.65rem 1.8rem; /* espaçamento interno */
    border-radius: 8px; /* cantos arredondados */
    transition: all 0.2s; /* transição suave em todas as propriedades */
}

.btn-login:hover { /* botão Entrar ao passar o rato */
    background: #1d4ed8; /* azul mais escuro */
    transform: translateY(-1px); /* sobe 1px criando efeito de elevação */
}

/* ===== SECÇÃO HERO (topo da página) ===== */
.hero { /* secção principal no topo com imagem de fundo */
    padding: 140px 2rem 100px; /* espaçamento: topo lateral base */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.55)), /* gradiente escuro sobreposto */
                url('https://www.shutterstock.com/image-photo/banten-indonesia-august-02-2022-600nw-2455954305.jpg') center/cover no-repeat; /* imagem de fundo de futsal */
    background-attachment: fixed; /* efeito parallax (imagem fixa ao fazer scroll) */
    color: white; /* texto branco */
}

.hero .container { /* contentor interno do hero */
    max-width: 1280px; /* largura máxima */
    margin: 0 auto; /* centraliza horizontalmente */
    display: flex; /* layout flexível */
    justify-content: center; /* centraliza conteúdo */
    align-items: center; /* alinha verticalmente ao centro */
    min-height: 500px; /* altura mínima */
}

.hero-content { /* conteúdo de texto do hero */
    text-align: center; /* texto centrado */
    max-width: 800px; /* largura máxima do texto */
}

.hero-content h1 { /* título principal */
    font-size: 3.5rem; /* tamanho muito grande */
    font-weight: 800; /* extra negrito */
    color: #ffffff; /* branco */
    line-height: 1.1; /* linhas compactas */
    margin-bottom: 1.5rem; /* espaço abaixo */
    letter-spacing: -1px; /* letras juntas para melhor legibilidade */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* sombra no texto para destacar */
}

.hero-content h1 .highlight { /* palavra destacada no título */
    color: #3b82f6; /* azul claro */
}

.hero-content p { /* parágrafo descritivo */
    font-size: 1.25rem; /* tamanho médio-grande */
    color: #e5e7eb; /* cinzento claro */
    margin-bottom: 2.5rem; /* espaço abaixo */
    line-height: 1.7; /* linhas espaçadas para melhor leitura */
    margin-left: auto; /* centraliza */
    margin-right: auto; /* centraliza */
}

.hero-buttons { /* contentor dos botões */
    display: flex; /* layout flexível */
    gap: 1rem; /* espaço entre botões */
    justify-content: center; /* centraliza botões */
}

.btn { /* estilo base para todos os botões */
    padding: 1rem 2rem; /* espaçamento interno */
    border: none; /* sem borda */
    border-radius: 8px; /* cantos arredondados */
    font-size: 1rem; /* tamanho do texto */
    font-weight: 600; /* semi-negrito */
    cursor: pointer; /* cursor de mão ao passar */
    text-decoration: none; /* sem sublinhado */
    display: inline-block; /* permite aplicar padding e margin */
    transition: all 0.2s; /* transição suave */
}

.btn-primary { /* botão azul principal */
    background: #2563eb; /* fundo azul */
    color: white; /* texto branco */
    border: 2px solid #2563eb; /* borda azul */
}

.btn-primary:hover { /* botão azul ao passar o rato */
    background: #1d4ed8; /* azul mais escuro */
    border-color: #1d4ed8; /* borda mais escura */
    transform: translateY(-2px); /* sobe 2px */
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3); /* sombra azul */
}

.btn-secondary { /* botão transparente secundário */
    background: transparent; /* fundo transparente */
    color: white; /* texto branco */
    border: 2px solid white; /* borda branca */
}

.btn-secondary:hover { /* botão secundário ao passar o rato */
    background: white; /* fundo fica branco */
    color: #1a1a1a; /* texto fica preto */
}

.hero-image { /* elemento de imagem (não usado) */
    display: none; /* escondido */
}

/* ===== SECÇÃO FUNCIONALIDADES ===== */
.features { /* secção de funcionalidades */
    padding: 5rem 2rem; /* espaçamento generoso */
    background: linear-gradient(to bottom, #fff 0%, #f9fafb 100%); /* gradiente suave branco para cinzento */
    position: relative; /* permite posicionar elementos dentro */
}

.features::before { /* pseudo-elemento para marca d'água */
    content: ''; /* necessário para aparecer */
    position: absolute; /* posição absoluta dentro do .features */
    top: 0; /* topo */
    left: 0; /* esquerda */
    right: 0; /* direita */
    bottom: 0; /* fundo */
    background: url('https://us.123rf.com/450wm/udabuyung/udabuyung1906/udabuyung190600031/125505172-soccer-of-futsal-player-silhouettes-in-various-action-poses-easy-editable-layered-vector.jpg') center/contain no-repeat; /* silhuetas de jogadores */
    opacity: 0.03; /* quase transparente (marca d'água) */
    pointer-events: none; /* não interfere com cliques */
}

.container { /* contentor genérico usado em várias secções */
    max-width: 1280px; /* largura máxima */
    margin: 0 auto; /* centraliza */
    position: relative; /* permite z-index */
    z-index: 1; /* fica por cima da marca d'água */
}

.section-header { /* cabeçalho de cada secção */
    text-align: center; /* centralizado */
    margin-bottom: 4rem; /* espaço grande abaixo */
}

.section-header .label { /* etiqueta acima do título */
    display: inline-block; /* permite padding */
    background: #dbeafe; /* fundo azul claro */
    color: #1d4ed8; /* texto azul escuro */
    padding: 0.5rem 1rem; /* espaçamento interno */
    border-radius: 20px; /* muito arredondado (forma de pílula) */
    font-size: 0.85rem; /* pequeno */
    font-weight: 600; /* semi-negrito */
    margin-bottom: 1rem; /* espaço abaixo */
    text-transform: uppercase; /* letras maiúsculas */
    letter-spacing: 0.5px; /* espaçamento entre letras */
}

.section-header h2 { /* título da secção */
    font-size: 2.5rem; /* grande */
    font-weight: 800; /* extra negrito */
    color: #1a1a1a; /* preto */
    margin-bottom: 1rem; /* espaço abaixo */
    letter-spacing: -0.5px; /* letras próximas */
}

.section-header p { /* descrição da secção */
    font-size: 1.1rem; /* médio */
    color: #6b7280; /* cinzento */
    max-width: 600px; /* largura controlada */
    margin: 0 auto; /* centralizado */
}

.features-grid { /* grelha de cards de funcionalidades */
    display: grid; /* layout em grelha */
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 2rem; /* espaço entre cards */
}

.feature-card { /* cada card individual de funcionalidade */
    background: #fff; /* fundo branco */
    padding: 2rem; /* espaçamento interno */
    border-radius: 12px; /* cantos arredondados */
    border: 1px solid #e5e7eb; /* borda cinzenta fina */
    transition: all 0.3s; /* transição suave */
}

.feature-card:hover { /* card ao passar o rato */
    border-color: #2563eb; /* borda fica azul */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* sombra pronunciada */
    transform: translateY(-5px); /* sobe 5px */
}

.feature-icon { /* ícone numérico de cada funcionalidade */
    width: 50px; /* largura fixa */
    height: 50px; /* altura fixa (quadrado) */
    background: #dbeafe; /* fundo azul claro */
    border-radius: 10px; /* cantos arredondados */
    display: flex; /* layout flexível */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    font-size: 1.5rem; /* tamanho do número */
    margin-bottom: 1.5rem; /* espaço abaixo */
    color: #1d4ed8; /* azul escuro */
    font-weight: 600; /* semi-negrito */
}

.feature-card h3 { /* título de cada funcionalidade */
    color: #1a1a1a; /* preto */
    margin-bottom: 0.8rem; /* espaço abaixo */
    font-size: 1.25rem; /* médio-grande */
    font-weight: 700; /* negrito */
}

.feature-card p { /* descrição da funcionalidade */
    color: #6b7280; /* cinzento */
    line-height: 1.7; /* espaçamento entre linhas */
    font-size: 0.95rem; /* ligeiramente menor */
}

/* ===== SECÇÃO SOBRE ===== */
.about { /* secção "Sobre nós" */
    padding: 5rem 2rem; /* espaçamento generoso */
    background: #e5e7eb; /* fundo cinzento claro */
    position: relative; /* permite posicionar elementos */
}

.about::before { /* pseudo-elemento com imagem de fundo */
    content: ''; /* necessário para aparecer */
    position: absolute; /* posição absoluta */
    top: 0; /* topo */
    left: 0; /* esquerda */
    right: 0; /* direita */
    height: 400px; /* altura limitada */
    background: linear-gradient(rgba(15, 23, 42, 0.4), rgba(229, 231, 235, 1)), /* gradiente de transparente para cinzento */
                url('https://radioportalegre.pt/wp-content/uploads/2024/05/futsal_02-1024x576-1.jpg') center/cover no-repeat; /* imagem de futsal */
    z-index: 0; /* fica atrás do conteúdo */
}

.about .container { /* contentor interno */
    position: relative; /* permite z-index */
    z-index: 1; /* fica por cima da imagem */
}

.about-content { /* caixa branca com o conteúdo */
    max-width: 900px; /* largura controlada */
    margin: 0 auto; /* centralizada */
    background: white; /* fundo branco */
    padding: 3rem; /* espaçamento interno generoso */
    border-radius: 16px; /* cantos bem arredondados */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); /* sombra suave e grande */
    margin-top: 2rem; /* espaço acima */
}

.about-text { /* texto da secção */
    text-align: left; /* alinhado à esquerda */
}

.about-intro { /* parágrafo introdutório destacado */
    font-size: 1.3rem; /* maior que o normal */
    color: #1a1a1a; /* preto */
    font-weight: 600; /* semi-negrito */
    margin-bottom: 1.5rem; /* espaço abaixo */
    line-height: 1.8; /* linhas espaçadas */
}

.about-text p { /* parágrafos normais */
    font-size: 1.1rem; /* ligeiramente maior */
    color: #4b5563; /* cinzento escuro */
    line-height: 1.9; /* linhas bem espaçadas */
    margin-bottom: 2.5rem; /* espaço abaixo */
}

.about-features { /* grelha com 3 cards de missão/inovação/compromisso */
    display: grid; /* layout em grelha */
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 2rem; /* espaço entre cards */
    margin-top: 3rem; /* espaço acima */
}

.about-feature-item { /* cada card individual */
    text-align: center; /* texto centrado */
    padding: 2rem 1.5rem; /* espaçamento interno */
    background: #f9fafb; /* fundo cinzento muito claro */
    border-radius: 12px; /* cantos arredondados */
    border: 2px solid #e5e7eb; /* borda cinzenta */
    transition: all 0.3s; /* transição suave */
}

.about-feature-item:hover { /* card ao passar o rato */
    border-color: #2563eb; /* borda fica azul */
    transform: translateY(-5px); /* sobe 5px */
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1); /* sombra azul */
}

.about-feature-icon { /* ícone numérico no card */
    width: 60px; /* largura */
    height: 60px; /* altura (quadrado) */
    background: #dbeafe; /* fundo azul claro */
    border-radius: 12px; /* cantos arredondados */
    display: flex; /* layout flexível */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    margin: 0 auto 1.5rem; /* centralizado com espaço abaixo */
    font-size: 1.5rem; /* tamanho do número */
    color: #1d4ed8; /* azul escuro */
    font-weight: 700; /* negrito */
}

.about-feature-item h4 { /* título do card */
    color: #1a1a1a; /* preto */
    font-size: 1.2rem; /* médio */
    font-weight: 700; /* negrito */
    margin-bottom: 0.8rem; /* espaço abaixo */
}

.about-feature-item p { /* texto descritivo */
    color: #6b7280; /* cinzento */
    font-size: 0.95rem; /* pequeno */
    line-height: 1.7; /* linhas espaçadas */
    margin: 0; /* sem margem */
}

/* ===== SECÇÃO CTA (Call To Action) ===== */
.cta { /* secção de chamada para ação */
    padding: 5rem 2rem; /* espaçamento generoso */
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%), /* gradiente escuro diagonal */
                url('https://www.shutterstock.com/image-photo/banten-indonesia-august-02-2022-600nw-2455954305.jpg') center/cover no-repeat; /* imagem de futsal */
    background-attachment: fixed; /* efeito parallax */
    color: white; /* texto branco */
}

.cta .container { /* contentor interno */
    max-width: 900px; /* largura controlada */
    text-align: center; /* texto centrado */
}

.cta h2 { /* título da CTA */
    font-size: 2.5rem; /* grande */
    font-weight: 800; /* extra negrito */
    margin-bottom: 1.5rem; /* espaço abaixo */
    letter-spacing: -0.5px; /* letras próximas */
}

.cta p { /* texto descritivo */
    font-size: 1.2rem; /* médio-grande */
    margin-bottom: 2.5rem; /* espaço abaixo */
    opacity: 0.95; /* ligeiramente transparente */
}

.cta .btn-primary { /* botão da CTA (invertido) */
    background: white; /* fundo branco */
    color: #1a1a1a; /* texto preto */
}

.cta .btn-primary:hover { /* botão ao passar o rato */
    background: #f9fafb; /* cinzento muito claro */
    transform: translateY(-2px); /* sobe 2px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* sombra escura */
}

/* ===== RODAPÉ ===== */
footer { /* rodapé da página */
    background: #1a1a1a; /* fundo preto */
    color: #9ca3af; /* texto cinzento */
    padding: 3rem 2rem 2rem; /* espaçamento */
}

footer .container { /* grelha do rodapé */
    max-width: 1280px; /* largura máxima */
    margin: 0 auto; /* centralizado */
    display: flex; /* layout flexível horizontal */
    justify-content: space-around; /* distribui espaço uniformemente */
    align-items: flex-start; /* alinha ao topo */
    text-align: left; /* texto alinhado à esquerda */
    margin-bottom: 2rem; /* espaço abaixo */
}

.footer-section { /* cada secção do rodapé */
    flex: 1; /* ocupa espaço igual */
    min-width: 250px; /* largura mínima */
}

.footer-section h3 { /* títulos das colunas */
    color: white; /* branco */
    font-size: 1rem; /* tamanho normal */
    font-weight: 700; /* negrito */
    margin-bottom: 1rem; /* espaço abaixo */
}

.footer-section p { /* parágrafos do rodapé */
    line-height: 1.8; /* linhas espaçadas */
    font-size: 0.9rem; /* pequeno */
}

.footer-section ul { /* listas de links */
    list-style: none; /* sem marcadores */
}

.footer-section ul li { /* cada item da lista */
    margin-bottom: 0.8rem; /* espaço entre itens */
}

.footer-section a { /* links do rodapé */
    color: #9ca3af; /* cinzento */
    text-decoration: none; /* sem sublinhado */
    transition: color 0.2s; /* transição suave */
    font-size: 0.9rem; /* pequeno */
}

.footer-section a:hover { /* links ao passar o rato */
    color: #2563eb; /* ficam azuis */
}

.footer-bottom { /* linha de copyright */
    border-top: 1px solid #374151; /* linha cinzenta no topo */
    padding-top: 2rem; /* espaço acima */
    text-align: center; /* centralizado */
    font-size: 0.9rem; /* pequeno */
}

/* ===== MENU MOBILE ===== */
.mobile-menu-btn { /* botão hamburguer (☰) */
    display: none; /* escondido por padrão (só aparece em mobile) */
    background: none; /* sem fundo */
    border: none; /* sem borda */
    color: #1a1a1a; /* preto */
    font-size: 1.5rem; /* grande */
    cursor: pointer; /* cursor de mão */
}

/* ===== RESPONSIVIDADE MOBILE ===== */
@media (max-width: 968px) { /* ecrãs menores que 968px */
    .hero { /* secção hero em mobile */
        padding: 120px 2rem 80px; /* menos padding */
    }

    .hero .container { /* contentor hero */
        grid-template-columns: 1fr; /* uma coluna apenas */
    }

    .hero-content h1 { /* título em mobile */
        font-size: 2.5rem; /* menor */
    }

    .hero-buttons { /* botões em mobile */
        flex-direction: column; /* empilhados verticalmente */
        align-items: center; /* centralizados */
    }

    .hero-buttons .btn { /* cada botão */
        width: 100%; /* largura total */
        max-width: 300px; /* mas limitada */
    }

    .hero-image { /* imagem hero (não usada) */
        display: none; /* escondida */
    }

    .stats .container { /* não usado neste código */
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: 2rem; /* espaço */
    }

    .features-grid { /* grelha de funcionalidades em mobile */
        grid-template-columns: 1fr; /* uma coluna apenas (empilhado) */
    }
    
    .about-features { /* cards da secção sobre em mobile */
        grid-template-columns: 1fr; /* uma coluna apenas (empilhado) */
    }

    footer .container { /* rodapé em mobile */
        grid-template-columns: 1fr; /* uma coluna apenas (empilhado) */
    }

    .mobile-menu-btn { /* botão hamburguer em mobile */
        display: block; /* torna visível */
    }

    nav ul { /* menu de navegação em mobile */
        display: none; /* escondido por padrão */
        position: absolute; /* posição absoluta */
        top: 100%; /* abaixo da navbar */
        left: 0; /* alinhado à esquerda */
        right: 0; /* alinhado à direita */
        background: white; /* fundo branco */
        flex-direction: column; /* itens empilhados verticalmente */
        padding: 1rem; /* espaçamento interno */
        gap: 0; /* sem espaço (cada item tem o seu) */
        border-bottom: 1px solid #e5e7eb; /* linha na base */
    }

    nav ul li { /* cada item do menu mobile */
        width: 100%; /* largura total */
        padding: 1rem 0; /* espaçamento vertical */
        border-bottom: 1px solid #f3f4f6; /* linha divisória */
    }

    nav ul.active { /* menu quando está aberto (classe adicionada por JavaScript) */
        display: flex; /* torna visível */
    }
}