/* CSS para o seu Portfólio */

/* Estilos básicos para o corpo da página */
body {
    margin: 0; /* Remove margens padrão do navegador */
    font-family: Arial, sans-serif; /* Fonte padrão */
    line-height: 1.6;
    color: #333;
}
body.imagem-fundo {
    background-image: url('../imagens/imagem-de-fundo-tudo.jpg'); /* AJUSTE O CAMINHO E NOME DO FICHEIRO */
    background-size: cover; /* Faz a imagem cobrir toda a área */
    background-position: center center; /* Centra a imagem */
    background-attachment: fixed; /* Fixa a imagem de fundo, não rola com o conteúdo */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    background-color: #e0e9f0; /* Cor de fundo de fallback se a imagem não carregar ou para preencher áreas não cobertas */
}

/* Opcional: Adicionar um overlay escuro ao fundo das páginas internas para melhorar a legibilidade */
body.imagem-fundo::before {
    content: '';
    position: fixed; /* Deve ser fixed se o body.internal-page for fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Preto com 20% de opacidade */
    z-index: -1; /* Garante que fique por baixo de todo o conteúdo */
}


/* Estilos do cabeçalho principal (onde está o menu) */
.cab-principal {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente */
    padding: 10px 0;
    position: fixed; /* Fixa o cabeçalho no topo da viewport */
    width: 100%; /* Ocupa a largura total */
    top: 0; /* Alinha no topo */
    left: 0; /* Alinha à esquerda */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para dar profundidade */
}

/* Estilos do menu de navegação */
.nav-principal ul {
    list-style: none; /* Remove os marcadores da lista */
    margin: 0;
    padding: 0;
    display: flex; /* Usa flexbox para alinhar os itens horizontalmente */
    justify-content: center; /* Centra os links no menu */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha em telas pequenas */
}

.nav-principal ul li {
    margin: 0 15px; /* Espaçamento entre os itens do menu */
}

.nav-principal ul li a {
    color: white; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
    padding: 8px 0;
    display: block; /* Faz com que toda a área do link seja clicável */
    transition: color 0.3s ease; /* Transição suave na cor ao passar o mouse */
}

.nav-principal ul li a:hover {
    color: #0077cc; /* Cor ao passar o mouse */
}

.nav-principal ul li a.active-link {
    color: #699260; /* Uma cor bem visível, como dourado. Escolha a sua! */
    font-weight: bold; /* Torna o texto mais "pesado" */
}

.nav-principal ul li a.active-link:hover {
    color: #FFD700; /* Mantém a cor dourada (ou a que escolheu) */
    cursor: default; /* Muda o cursor para indicar que não é um link "clicável" novamente */
}
main {
    /* Padding padrão para desktop. Ajuste para um valor seguro se o seu header for mais alto. */
    /* Se o cabeçalho tiver 10px de padding superior + 10px de padding inferior + ~50px de altura dos links,
       totaliza ~70px. Podemos dar um pouco mais para "respiro". */
    padding-top: 80px; /* VALOR ATUALIZADO PARA DESKTOP */
}

/* Estilos da secção "Capa" (Hero Section) */
.hero-section {
    background-image: url('../imagens/imagem-de-fundo-02.jpg');
    background-size: cover; /* Ajusta a imagem para cobrir toda a área */
    background-position: center; /* Centra a imagem */
    height: 100vh; /* Ocupa 100% da altura da viewport */
    display: flex; /* Usa flexbox */
    align-items: center; /* Centra itens verticalmente */
    justify-content: center; /* Centra itens horizontalmente */
    flex-direction: column; /* Organiza os itens em coluna */
    color: white;
    text-align: center; /* Centra o texto dentro da secção */
    position: relative; /* Necessário para posicionar o overlay */
    /* padding-top para que o conteúdo não fique por baixo do menu fixo */
    padding-top: 60px; /* Ajuste este valor se o seu header tiver altura diferente */
    box-sizing: border-box; /* Inclui o padding na altura total */
}

/* Overlay semi-transparente para melhorar a legibilidade do texto na capa */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto 40% opaco */
    z-index: 1; /* Garante que o overlay fique por baixo do texto */
}

/* Garante que o texto e o botão fiquem acima do overlay */
.hero-section h1,
.hero-section p,
.hero-section .cta-button {
    z-index: 2;
    position: relative; /* Necessário para z-index funcionar */
}

.hero-section h1 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 5px rgba(17, 16, 16, 0.7); /* Sombra mais suave para o texto */
}

.hero-section p {
    font-size: 1.5em;
    max-width: 800px; /* Limita a largura do parágrafo para melhor leitura */
    padding: 0 20px;
    text-shadow: 1px 1px 5px rgba(17, 16, 16, 0.7);
}

/* Estilos para o botão de Chamada para Ação (CTA) */
.cta-button {
    margin-top: 30px;
    padding: 12px 25px; /* Tamanho do padding do botão */
    background-color: #0077cc; /* Cor de fundo do botão */
    color: white;
    text-decoration: none;
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
}

.cta-button:hover {
    background-color: #005bb5; /* Cor mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de "levantar" */
}

/* Media Queries para Responsividade (ajustes para telas menores) */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2em;
    }
    .hero-section p {
        font-size: 1.2em;
    }
    .nav-principal ul li {
        margin: 5px 10px; /* Ajusta o espaçamento do menu */
    }
}

@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 1.5em;
    }
    .hero-section p {
        font-size: 1em;
    }
}

/* ---------------------------------------------------- */
/* PÁGINAS DE CONTEÚDO (Quem eu sou?) */
/* ---------------------------------------------------- */

.area-principal {
    position: relative; /* ESSENCIAL: Define o contexto de posicionamento para o logotipo */
    max-width: 700px;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding: 30px; /* Padding interno base para o conteúdo da secção */
    padding-top: 80px;   /* Aprox. altura do logo (60px) + margem superior (20px) */
    padding-left: 150px; /* Aprox. largura do logo (auto) + margem esquerda (20px) */
    text-align: center; /* Centraliza o texto e elementos block-level */
}

.area-principal h2 {
    margin-top: 0; /* Remove a margem superior padrão do h2, que seria sobreposta pelo logo */
    color: #0077cc;  
}

.area-principal p {
    margin-bottom: 25px;
}

.logo-seccao {
    position: absolute; /* Posição absoluta em relação ao seu pai (.area-principal) */
    top: 10px;         /* Distância do topo da secção */
    left: 10px;        /* Distância da esquerda da secção */
    z-index: 10;       /* Garante que o logo fique acima de outros elementos */
}

.logo-imagem-seccao {
    height: 150px; /* Ajuste a altura do seu logotipo conforme desejar */
    width: auto;  /* Mantém a proporção da imagem */
    display: block; /* Remove espaçamento indesejado que pode ocorrer com imagens inline */
}


/* Estilos para a imagem de perfil */
.imagem-perfil {
    max-width: 250px; /* Garante que a imagem não excede 250px */
    width: 100%; /* Torna a imagem responsiva, ocupa 100% da largura do seu contêiner até o max-width */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 50%; /* Faz a imagem parecer um círculo */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra mais proeminente */
    margin: 30px auto; /* Centra a imagem e dá margem */
    display: block; /* Garante que as margens 'auto' funcionem */
    border: 5px solid #0077cc; /* Borda colorida à volta da imagem */
}

/* Estilos para o link "Voltar à Página Principal" */
.back-link {
    display: inline-block; /* Comporta-se como bloco mas permite elementos ao lado */
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #555; /* Cor cinza escura para diferenciar do botão principal */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.back-link:hover {
    background-color: #333;
    transform: translateY(-2px);
}

/* ---------------------------------------------------- */
/* NOVOS ESTILOS ESPECÍFICOS PARA A PÁGINA DE HOBBIES */
/* ---------------------------------------------------- */

.hobbies-list {
    list-style: disc inside; /* Bolinhas dentro do item de lista */
    text-align: left; /* Alinha os itens da lista à esquerda */
    max-width: 500px; /* Limita a largura da lista para melhor leitura */
    margin: 20px auto 30px auto; /* Centra a lista e adiciona margens */
    padding-left: 0; /* Padding para o marcador da lista */
}

.hobbies-list li {
    margin-bottom: 12px; /* Espaço entre cada item da lista */
    font-size: 1.1em;
    color: #555; /* Cor um pouco mais escura para o texto */
}

.hobbies-list li strong {
    color: #333; /* Cor mais escura para o texto em negrito */
}

.hobbies-list a {
    color: #0077cc; /* Cor dos links */
    text-decoration: none; /* Remove sublinhado */
    transition: color 0.3s ease; /* Transição suave ao passar o mouse */
}

.hobbies-list a:hover {
    color: #005bb5; /* Cor mais escura ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}


/* ---------------------------------------------------- */
/* ESTILOS ESPECÍFICOS PARA A GALERIA (Instagram-style) */
/* ---------------------------------------------------- */

.gallery-grid {
    display: grid; /* Ativa o Grid Layout */
    /* Cria colunas responsivas: pelo menos 280px de largura, o máximo que couber */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Espaço entre os itens da grelha */
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 15px; /* Pequeno padding para as bordas da grelha */
    justify-content: center; /* Centra os itens se não preencherem todas as colunas */
}

.gallery-item {
    position: relative; /* Essencial para posicionar a legenda */
    overflow: hidden; /* Garante que nada transborde da caixa */
    border-radius: 10px; /* Bordas arredondadas para cada item */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra para profundidade */
    cursor: pointer; /* Indica que o item é interativo */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves para efeitos */
    background-color: #f8f8f8; /* Fundo claro para o item */
    display: flex; /* Para centralizar imagem se ela não preencher 100% (embora object-fit já ajude) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Pode adicionar 'aspect-ratio: 1 / 1;' aqui se quiser que cada item seja perfeitamente quadrado */
}

.gallery-item:hover {
    transform: translateY(-8px); /* Levanta o item ligeiramente ao passar o mouse */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* Sombra mais intensa */
}

.gallery-item img {
    width: 100%; /* A imagem ocupa toda a largura do seu contêiner */
    height: 100%; /* A imagem ocupa toda a altura do seu contêiner */
    object-fit: cover; /* Recorta a imagem para preencher o contêiner sem distorcer */
    display: block; /* Remove o espaço extra abaixo da imagem */
    border-radius: 10px; /* Bordas arredondadas também na imagem */
}

.gallery-caption {
    position: absolute; /* Posiciona a legenda sobre a imagem */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para a legenda */
    color: white;
    padding: 15px;
    text-align: center;
    transform: translateY(100%); /* Esconde a legenda inicialmente, movendo-a para baixo */
    transition: transform 0.3s ease; /* Transição suave ao mostrar/esconder */
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0); /* Mostra a legenda ao passar o mouse sobre o item */
}

.gallery-caption h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.3em;
    color: #0077cc; /* Cor do título na legenda */
}

.gallery-caption p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: #f0f0f0;
}


/* ---------------------------------------------------- */
/* ESTILOS ESPECÍFICOS PARA A PÁGINA DE CONTACTO */
/* ---------------------------------------------------- */

.contact-info {
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 25px;
    background-color: #f2f7fc; /* Fundo suave para a área de info */
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); /* Sombra interna sutil */
    text-align: center;
}

.contact-info h3 {
    color: #0077cc;
    font-size: 1.8em;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #444;
    text-align: center; /* Centraliza o texto dos parágrafos de info */
}

.contact-info a {
    color: #0077cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #005bb5;
    text-decoration: underline;
}

.contact-form {
    margin-top: 40px;
    text-align: left; /* Alinha o texto do formulário à esquerda */
    max-width: 600px; /* Limita a largura do formulário */
    margin-left: auto; /* Centra o formulário */
    margin-right: auto; /* Centra o formulário */
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.contact-form h3 {
    color: #0077cc;
    font-size: 1.8em;
    margin-bottom: 25px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block; /* Cada label em uma nova linha */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%; /* Ocupa 100% da largura do contêiner do formulário */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Inclui padding e border na largura total */
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #0077cc; /* Borda azul ao focar */
    outline: none; /* Remove o contorno padrão do navegador */
}

.form-group textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.submit-button {
    display: block; /* Ocupa a largura total e fica em uma nova linha */
    width: 100%;
    padding: 15px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-button:hover {
    background-color: #005bb5;
    transform: translateY(-2px);
}


/* ---------------------------------------------------- */
/* ESTILOS ESPECÍFICOS PARA A PÁGINA DO CURSO */
/* ---------------------------------------------------- */

.course-main-title {
    font-size: 2.8em; /* Título principal maior */
    color: #0077cc;
    margin-bottom: 30px;
    line-height: 1.3; /* Espaçamento entre linhas para o <br> */
    text-align: center;
}

.course-intro-text { 
    margin-bottom: 40px; /* Espaço entre o texto e a tabela */
    text-align: justify; /* Justifica o texto para um bloco mais coeso */
    padding: 0 15px; /* Pequeno padding nas laterais */
}

.course-intro-text p {
    font-size: 1.1em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px; /* Espaço entre parágrafos */
}    

.course-logo-display {
    width: 180px;
    height: auto;
    display: block; /* Essencial para que margin: auto funcione */
    margin: 0px auto 40px auto; /* Centra o logo e adiciona margem inferior */
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.study-plan-container {
    margin-top: 50px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center; /* Centra o texto geral do container */
}

.study-plan-container h3 {
    font-size: 2em;
    color: #0077cc;
    margin-bottom: 15px;
}

.study-plan-container .course-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 25px;
    color: #555;
}

.study-plan-wrapper {
    overflow-x: auto; /* Permite scroll horizontal se a tabela for muito larga */
    -webkit-overflow-scrolling: touch; /* Melhora o scroll em iOS */
    margin-bottom: 30px; /* Adiciona algum espaço abaixo da tabela */
}

.study-plan-table {
    width: 100%; /* Tabela ocupa toda a largura do seu contentor */
    min-width: 600px; /* Garante que a tabela não fique *demasiado* pequena e tenha espaço para scroll */
    border-collapse: collapse; /* Remove espaçamento entre bordas das células */
    margin-top: 20px;
    font-size: 1.05em;
}

.study-plan-table th,
.study-plan-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

.study-plan-table th {
    background-color: #0077cc;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.study-plan-table tbody tr:nth-child(even) { /* Estilo para linhas pares */
    background-color: #f9f9f9;
}

.study-plan-table tbody tr:hover {
    background-color: #f0f8ff; /* Efeito de hover nas linhas */
}

.study-plan-table .component-header {
    background-color: #e6f2fa; /* Fundo para os títulos das componentes */
    font-weight: bold;
    text-align: center; /* Centraliza o texto do cabeçalho da componente */
    color: #005bb5;
    font-size: 1.1em;
    padding: 15px;
}

.study-plan-table .total-row {
    background-color: #0077cc; /* Fundo para a linha do total */
    color: white;
    font-weight: bold;
    font-size: 1.2em;
}

.study-plan-table .total-row td {
    border-top: 2px solid white; /* Borda superior para separar o total */
    padding: 15px;
}

/* Ajusta o alinhamento da coluna de horas para a direita */
.study-plan-table th:last-child,
.study-plan-table td:last-child {
    text-align: right;
}


/* ---------------------------------------------------- */
/* Media Queries (ajustes para responsividade) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    main {
        /* Aumenta o padding para acomodar um menu que pode quebrar em 2 linhas */
        padding-top: 110px; /* AUMENTE ESTE VALOR CONFORME NECESSÁRIO */
    }
    .area-principal {
        padding: 70px 15px 30px;
        margin: 20px auto;
    }
    /* Reduz o tamanho do logo da secção em tablets */
    .logo-imagem-seccao {
        height: 90px; /* Tamanho do logo ajustado para tablet */
    }
    /* Otimiza a posição do logo da secção para o novo padding */
    .logo-seccao {
        top: 15px; /* Ajusta a posição do logo da secção */
        left: 15px;
    }
    .area-principal h2 {
        font-size: 2em;
    }
    .area-principal p {
        font-size: 1em;
    }
    .nav-principal ul li {
        margin: 5px 8px; /* Ajusta espaçamento do menu em telas pequenas */
    }
    .hobbies-list {
        padding-left: 15px; /* Ajusta padding da lista em telas menores */
    }
    .hobbies-list li {
        font-size: 1em;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 2 colunas em tablets */
        gap: 15px;
    }
    .gallery-caption {
        padding: 10px;
    }
    .gallery-caption h3 {
        font-size: 1.1em;
    }
    .gallery-caption p {
        font-size: 0.8em;
    }
    .contact-form {
        padding: 20px;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 10px;
    }
    .submit-button {
        padding: 12px;
        font-size: 1em;
    }
    .course-main-title {
        font-size: 2.2em;
    }
    
    .course-intro-text p {
        text-align: center; /* Centraliza o texto em telas menores */
    }
    .course-logo-display {
        width: 120px;
    }
    .study-plan-table th,
    .study-plan-table td {
        padding: 10px;
        font-size: 0.9em;
    }
    .study-plan-table .component-header {
        font-size: 1em;
        padding: 10px;
    }
    .study-plan-table .total-row {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    main {
        /* Aumenta ainda mais o padding para acomodar um menu que pode quebrar em 2 ou 3 linhas */
        padding-top: 130px; /* AUMENTE ESTE VALOR CONFORME NECESSÁRIO */
    }

    .area-principal {
        padding: 60px 10px 20px;
        margin: 15px auto;
    }
    /* Reduz o tamanho do logo da secção em telemóveis */
    .logo-imagem-seccao {
        height: 60px; /* Tamanho do logo ajustado para telemóvel */
    }

    /* Otimiza a posição do logo da secção para o novo padding */
    .logo-seccao {
        top: 10px; /* Ajusta a posição do logo da secção */
        left: 10px;
    }
    .imagem-perfil {
        max-width: 180px; /* Reduz o tamanho da imagem em telas muito pequenas */
    }
    .hobbies-list {
        max-width: 100%; /* Permite que a lista ocupe toda a largura em telas muito pequenas */
        padding-left: 10px;
    }
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 coluna em telemóveis */
        gap: 10px;
    }
    .gallery-caption {
        transform: translateY(0); /* Legendas sempre visíveis em telas muito pequenas para melhor usabilidade */
        position: static; /* Volta a ser estático para não sobrepor */
        background-color: rgba(0, 0, 0, 0.85); /* Fundo mais opaco */
        border-radius: 0 0 10px 10px; /* Bordas arredondadas apenas na parte inferior */
    }
    .gallery-item {
        box-shadow: 0 3px 10px rgba(0,0,0,0.15); /* Sombra mais suave */
        transform: none; /* Remove efeito de hover em touch screens */
    }
    .gallery-item:hover { /* Remove o efeito de hover em touch screens */
        transform: none;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    }
    .contact-info {
        padding: 15px;
    }
    .contact-info h3 {
        font-size: 1.5em;
    }
    .contact-info p {
        font-size: 0.9em;
    }
    .contact-form {
        padding: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .course-main-title {
        font-size: 1.8em;
    }
    
    .course-intro-text p {
        font-size: 1em;
    }
    .study-plan-table {
        font-size: 0.85em; /* Reduz ainda mais o tamanho da fonte da tabela */
        min-width: unset; /* Remove o min-width para telas muito pequenas, deixará o overflow-x cuidar */
    }
    .study-plan-table th,
    .study-plan-table td {
        padding: 8px;
    }
    .study-plan-table .component-header {
        font-size: 0.9em;
    }
    .study-plan-table .total-row {
        font-size: 1em;
    }
}