/* ==========================================================================
   Configurações Globais e Reset
   ========================================================================== */
/* Este bloco define estilos base para todo o site, garantindo consistência. */
/* Define o estilo base para todo o documento */
body {
    /* Define uma pilha de fontes modernas e seguras para o sistema */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0; /* Remove a margem padrão do navegador */
    padding: 0; /* Remove o preenchimento padrão do navegador */
    background-color: #fee8ca; /* Cor de fundo principal: Bege Claro */;
    color: #333; /* Cor de texto principal para melhor legibilidade */
    display: flex; /* Ativa o layout flexbox para o corpo da página */
    flex-direction: column; /* Organiza os itens em uma coluna (header, main, footer) */
    min-height: 100vh; /* Garante que o corpo tenha no mínimo a altura da tela */
    overflow-x: hidden; /* Impede a barra de rolagem horizontal que pode ser causada pela escala */
}

/* ==========================================================================
   Cabeçalho (Header)
   ========================================================================== */
/* Estilos para o cabeçalho, que contém a logo e o menu de navegação. */
/* Estiliza o container do cabeçalho que ocupa toda a largura */
header {
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 80px; /* Define uma altura fixa para o cabeçalho */
    background-color: #fee8ca; /* Fundo bege claro*/
    padding: 0 5%; /* Espaçamento interno de 5% nas laterais */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil abaixo do cabeçalho */
    display: flex; /* Ativa o layout flexbox */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    justify-content: space-between; /* Coloca a logo na esquerda e o menu na direita */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
}

/* Estiliza o link da logo */
.logo img {
    height: 60px; /* Define a altura da imagem da logo para caber no cabeçalho */
    width: auto; /* A largura se ajusta automaticamente para manter a proporção */
    vertical-align: middle; /* Ajuda a garantir o alinhamento vertical */
}
/* Estilos para o menu de navegação principal. */
/* Estiliza a lista do menu de navegação */
.menu ul {
    margin: 0; /* Remove margens */
    padding: 0; /* Remove preenchimento */
    list-style: none; /* Remove os pontos da lista */
    display: flex; /* Coloca os itens do menu lado a lado */
}

/* Estiliza os links dentro do menu */
.menu a {
    display: block; /* Faz o link ocupar todo o espaço do seu contêiner */
    padding: 30px 20px; /* Aumenta a área de clique (vertical e horizontal) */
    text-decoration: none; /* Remove o sublinhado */
    color: #0F4C81; /* Cor dos botões principais: Azul profundo */
    font-weight: bold; /* Texto em negrito */
    transition: all 0.3s ease; /* Efeito de transição suave para cor e fundo */
}

/* Efeito ao passar o mouse ou focar no link do menu */
.menu a:hover,
.menu a:focus {
    background-color: #D4A76A; /* Fundo do botão principal: beje escuro*/
    color: #fff; /* Muda a cor do texto para branco */
}

/* ==========================================================================
   Seção do Banner
   ========================================================================== */
/* Estilo para a grande imagem de destaque no topo da página inicial. */
.banner {
    width: 100%; /* Ocupa 100% da largura */
    height: 900px; /* Altura do banner aumentada */
    background-image: url('imagens/banners/imagem que fica embaixo do menu.png'); /* Imagem de exemplo. TROQUE PELA SUA! */
    background-size: cover; /* Faz a imagem cobrir toda a área, sem distorcer */
    background-position: center; /* Centraliza a imagem */
    position: relative; /* Necessário para posicionar o texto sobre o banner */
    display: flex; /* Ativa o flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto dentro do container */
}

/* Estilo para o container do texto no banner */
.banner-text {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo preto semitransparente para legibilidade */
    padding: 30px 40px;
    border-radius: 8px;
    color: #fff; /* Cor do texto: branco */
}

/* Estilo para o título dentro do banner */
.banner-text h1 {
    color: #fff; /* Garante que o h1 seja branco */
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto para destacar */
}

/* ==========================================================================
   Conteúdo Principal (Main)
   ========================================================================== */
/* Define a área principal de conteúdo de cada página. */
main {
    text-align: center;
    padding: 20px;
    max-width: 960px; /* Limita a largura do conteúdo principal */
    margin: 20px auto; /* Centraliza o conteúdo principal e adiciona margem vertical */
    flex-grow: 1; /* Faz com que o conteúdo principal cresça para ocupar o espaço disponível */
}

/* Remove a largura máxima para a página de currículos, permitindo que ela ocupe a tela inteira */
main.cv-download-page {
    max-width: none;
    padding: 0; /* Remove o padding para que as colunas controlem seu próprio espaçamento */
}

/* Estilo padrão para os títulos principais (h1) das páginas. */
h1 {
    color: #0F4C81; /* Cor dos títulos: Azul profundo */
}

/* ==========================================================================
   Seção de Serviços (Página Inicial)
   ========================================================================== */
/* Estilos específicos para a seção que exibe os cards de serviços na home. */
.servicos-home {
    padding: 40px 0; /* Espaçamento interno vertical */
    border-top: 1px solid #D4A76A; /* Linha sutil de separação */
    margin-top: 40px; /* Espaço acima da seção */
}

.servicos-home h2 {
    color: #0F4C81; /* Cor do título da seção: Azul profundo */
    margin-bottom: 30px; /* Espaço abaixo do título */
}

.servicos-container {
    display: flex; /* Coloca os itens lado a lado */
    justify-content: center; /* Centraliza os itens quando há espaço sobrando */
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo em telas menores */
    gap: 30px; /* Aumenta o espaço entre os itens */
}

.servico-item {
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    padding: 20px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Sombra sutil */
    text-align: center; /* Centraliza o conteúdo do item */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Adiciona transição suave para o movimento e a sombra */
    display: flex; /* Ativa o flexbox para alinhar o conteúdo interno */
    flex-direction: column; /* Organiza o conteúdo do card em coluna */
    align-items: center; /* Centraliza os itens (ícone e texto) horizontalmente */
    height: 100%; /* Garante que o card ocupe toda a altura do seu contêiner (o link) */
    width: 280px; /* Define uma largura fixa para todos os cards de serviço */
    box-sizing: border-box; /* Garante que o padding não afete a altura/largura total */
}

/* Estilo para as imagens de ícone dentro dos cards */
.servico-item .icone-img {
    height: 80px; /* Define uma altura fixa para o ícone */
    width: 80px; /* Define uma largura fixa para o ícone */
    margin-bottom: 10px; /* Adiciona um espaço entre o ícone e o título */
    object-fit: contain; /* Garante que a imagem caiba no espaço sem distorcer */
}

/* Container para múltiplos ícones dentro de um card */
.card-icon-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-bottom: 15px; /* Espaço abaixo dos ícones */
}

/* Estilo para os links dos cards de serviço */
.servico-link {
    text-decoration: none; /* Remove o sublinhado do link */
    color: inherit; /* Faz o link herdar a cor do texto do elemento pai */
    display: flex; /* Garante que o link se comporte como um bloco flexível */
}

/* Efeito de hover nos cards de serviço */
.servico-link:hover .servico-item {
    transform: translateY(-8px); /* Move o card 8px para cima */
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* Aumenta a sombra para dar um efeito de "flutuação" */
}

/* Estilos para a área de detalhes dentro do card de serviço */
.servico-detalhes {
    text-align: left; /* Alinha o texto da lista/parágrafo à esquerda */
    margin-top: 15px; /* Espaço acima da lista */
    flex-grow: 1; /* Faz esta área crescer para empurrar o conteúdo para baixo */
}

/* ==========================================================================
   Estilos Específicos para Cards da Página de Serviços
   ========================================================================== */
/* Esta regra se aplica APENAS aos cards dentro da seção com id="servicos" */
#servicos .servico-item {
    width: auto; /* Remove a largura fixa */
    max-width: 420px; /* Define uma largura máxima para não ficarem largos demais */
    flex-grow: 1; /* Permite que os cards cresçam para ocupar o espaço */
    text-align: left; /* Alinha o texto à esquerda para melhor leitura da lista */
}

/* ==========================================================================
   Rodapé (Footer)
   ========================================================================== */
/* Estilos para o rodapé, que aparece no final de todas as páginas. */
footer {
    background-color: #D4A76A; /* Cor de fundo: Bege Claro */
    color: black; /* Cor do texto: preto*/
    font-weight: bold; /* Deixa o texto em negrito */
    text-align: center; /* Centraliza o texto */
    padding: 25px 0; /* Espaçamento interno vertical */    
    margin-top: 50px; /* Espaço acima do rodapé para separá-lo do conteúdo */
    width: 100%;
}

footer p {
    margin: 0; /* Remove a margem padrão do parágrafo */
    font-size: 0.9em; /* Tamanho de fonte um pouco menor */
}

/* ==========================================================================
   Formulário de Contato
   ========================================================================== */
/* Estilos para a seção de contato, incluindo o formulário e os cards sociais. */
.contact-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px; /* Espaço entre os botões e o formulário */
    margin-top: 40px;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas menores */
}

/* Estilos para o formulário de e-mail. */
.contact-form {
    flex-grow: 1; /* Permite que o formulário cresça */
    max-width: 500px; /* Largura máxima do formulário */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Alinha o texto dos labels à esquerda */
}

/* Estilos para os grupos de campos do formulário (label + input). */
.form-group {
    margin-bottom: 20px; /* Espaço entre os campos do formulário */
}

/* Estilos para as etiquetas (labels) dos campos. */
.form-group label {
    display: block; /* Faz o label ocupar uma linha inteira */
    margin-bottom: 8px;
    color: #0F4C81; /* Azul profundo, para combinar com os títulos */
    font-weight: bold;
    font-size: 0.95em;
}

/* Estilos para os campos de texto (input) e área de texto (textarea). */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
    font-family: inherit; /* Usa a mesma fonte do site */
    font-size: 1em;
    color: #333; /* Cor do texto digitado */
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efeito de destaque quando um campo do formulário está em foco (selecionado). */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D4A76A; /* Cor de destaque ao focar */
    box-shadow: 0 0 8px rgba(212, 167, 106, 0.4); /* Sombra suave ao focar */
}

/* Estilo do botão de envio do formulário. */
.submit-btn {
    display: inline-block;
    background-color: #D4A76A; /* Cor de fundo do botão: dourado fosco, para consistência */
    color: #fff; /* Cor do texto do botão: branco */
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Transição suave para cor e clique */
}

/* Efeito de hover para o botão de envio. */
.submit-btn:hover {
    background-color: #0F4C81; /* Cor azul no hover, para consistência */
}

/* Efeito de clique no botão de envio */
.submit-btn:active {
    transform: scale(0.98); /* Diminui levemente o botão para simular um clique */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* Adiciona uma sombra interna */
}

/* Estilos para os cards de contato social */
.social-card-container {
    display: flex;
    flex-direction: column; /* Coloca os botões um abaixo do outro */
    gap: 15px; /* Espaço entre os botões */
    width: 240px; /* Largura aumentada para melhor alinhamento com o formulário */
}

/* Remove a decoração padrão dos links que envolvem os cards. */
.social-card-link {
    text-decoration: none;
    color: inherit;
}

/* Estilo base para os cards de contato (WhatsApp, LinkedIn). */
.social-card {
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    
    /* Novas regras para garantir tamanho e alinhamento consistentes */
    width: 100%; /* Garante que o card ocupe a largura total do seu link pai */
    min-height: 100px; /* Define uma altura mínima fixa para todos os cards sociais */
    display: flex;
    flex-direction: row; /* Alinha os itens lado a lado */
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    gap: 15px; /* Espaço entre o ícone e o texto */
}

/* Efeito de "flutuação" ao passar o mouse sobre o card. */
.social-card-link:hover .social-card {
    transform: translateY(-8px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Estilo para os ícones dentro dos cards sociais. */
.social-card .social-icon {
    height: 70px;
    width: 70px;
    object-fit: contain;
    flex-shrink: 0; /* Impede que o ícone encolha */
}

/* Container para o texto dentro do card social */
.social-card-text {
    text-align: left; /* Alinha o texto à esquerda */
}

/* Estilo para o título (h3) dentro do card social. */
.social-card h3 {
    margin: 10px 0 5px;
    color: #0F4C81;
}

/* Estilo para o parágrafo de texto dentro do card social. */
.social-card p {
    font-size: 0.9em;
    margin: 0;
}

/* Media Query para Responsividade: Ajustes para telas com largura máxima de 850px. */
@media (max-width: 850px) {
    .social-card-container {
        flex-direction: row; /* Botões lado a lado em telas menores */
        width: 100%;
        justify-content: center;
    }
}

/* Estilos para as mensagens de status do formulário */
#form-status {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

#form-status.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#form-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ==========================================================================
   Galeria de Vídeos (Página Edição de Vídeos)
   ========================================================================== */
.videos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Alinha os itens à esquerda */
    gap: 8px; /* Espaço reduzido entre os cards de vídeo */

    /* Estilo de "vitrine" com rolagem, igual ao da galeria de imagens */
    max-height: 600px; /* Altura máxima para a vitrine */
    overflow-y: auto;  /* Adiciona a barra de rolagem vertical quando necessário */
    padding: 15px;     /* Espaçamento interno */
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    border-radius: 8px;
    /* Estilização da barra de rolagem (copiada da galeria de imagens) */
    scrollbar-width: none; /* Para Firefox */
}

/* Deixa a barra de rolagem da galeria de vídeos transparente (WebKit) */
.videos-container::-webkit-scrollbar {
    width: 0px;
}
.videos-container::-webkit-scrollbar-track {
    background: transparent;
}
.videos-container::-webkit-scrollbar-thumb {
    background: transparent;
}

.video-item {
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 215px; /* Largura ajustada para caber 4 cards */
    overflow: hidden; /* Garante que o vídeo não ultrapasse as bordas arredondadas */
    cursor: pointer;
    position: relative; /* Necessário para posicionar o ícone de play */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.video-item h3 {
    padding: 2px 15px; /* Padding vertical ainda mais reduzido */
    margin: 0;
    font-size: 1.1em;
    color: #0F4C81;
    background-color:  #D4A76A; /* Cor de hover dourada, para combinar com o menu */
;
}

.video-item video {
    display: block; /* Remove qualquer espaço extra abaixo do vídeo */
    width: 100%;
}

/* Ícone de Play sobre o vídeo */
.play-icon {
    /* Posicionamento no centro do card */
    position: absolute;
    top: 55%; /* Ajustado para centralizar melhor com o título acima */
    left: 50%;
    transform: translate(-50%, -50%);

    /* Estilo do círculo */
    width: 50px;
    height: 50px;
    background-color: rgba(212, 167, 106, 0.9); /* Cor dourada com transparência */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Impede que o ícone intercepte o clique do card */
    pointer-events: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Triângulo de play (usando pseudo-elemento) */
.play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px; /* Ajuste para centralizar o triângulo no círculo */
}

/* ==========================================================================
   Galeria de Imagens (Página Edição de Imagens)
   ========================================================================== */
.portfolio-category {
    margin-bottom: 50px; /* Espaço entre as categorias */
    padding-bottom: 30px;
    border-bottom: 1px solid #e0c49c; /* Linha separadora sutil */
}

.portfolio-category:last-of-type {
    border-bottom: none; /* Remove a linha da última categoria */
    margin-bottom: 0;
}

.portfolio-category h2 {
    color: #0F4C81;
    text-align: left;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #D4A76A;
    display: inline-block; /* Faz a borda ficar apenas no tamanho do texto */
    font-size: 1.8em;
}

.imagens-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Alinha os itens à esquerda dentro do container */
    gap: 8px; /* Espaço entre os cards de imagem */
    
    /* Novas regras para criar a "tela" com rolagem */
    max-height: 500px; /* Altura da vitrine aumentada */
    overflow-y: auto;  /* Adiciona a barra de rolagem vertical QUANDO necessário */
    padding: 15px;     /* Espaçamento interno */
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    border-radius: 8px;
}

/* Estilização da barra de rolagem da pagina de imagens (funciona em navegadores baseados em WebKit/Blink) */
.imagens-container::-webkit-scrollbar {
    width: 0px;
}

.imagens-container::-webkit-scrollbar-track {
    background: transparent;
}
 
.imagens-container::-webkit-scrollbar-thumb {
    background: transparent;
} 

.imagem-item {
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 160px; /* Largura reduzida novamente */
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.imagem-item h3 {
    padding: 4px 8px; /* Preenchimento ainda mais reduzido */
    margin: 0;
    font-size: 0.85em;  /* Fonte um pouco menor */
    color: #0F4C81;
    background-color: #D4A76A;
}

.imagem-item img {
    display: block;
    width: 100%;
    height: 110px; /* Altura reduzida novamente */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}

/* ==========================================================================
   Estilos para o Modal (Lightbox) de Imagens e Vídeos
   ========================================================================== */
/* Fundo escurecido que cobre a tela inteira */
.modal-overlay {
    position: fixed; /* Fica fixo na tela, mesmo com rolagem */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fundo preto com 85% de opacidade */
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que fique acima de todo o resto */
}

/* Quando o modal está ativo, ele se torna visível */
.modal-overlay.active {
    display: flex; /* Usa flexbox para centralizar o conteúdo */
}

/* Conteúdo do modal (a imagem e o título) */
.modal-content {
    position: relative; /* Necessário para o botão de fechar */
}
/* Botão de fechar (X) para os modais */
.modal-close {
    position: absolute; /* Posiciona o botão em relação ao .modal-content */
    top: -15px; /* Um pouco acima do conteúdo */
    right: -10px; /* Um pouco à direita do conteúdo */
    color: #fff;
    background-color: #D4A76A; /* Cor dourada para combinar com o site */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%; /* Deixa o botão redondo */
    width: 40px;
    height: 40px;
    line-height: 40px; /* Centraliza o "X" verticalmente */
    text-align: center; /* Centraliza o "X" horizontalmente */
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 1002; /* Garante que fique acima da imagem */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Controles de Zoom no Modal */
.modal-zoom-controls {
    position: absolute;
    top: -15px; /* Alinha com o botão de fechar */
    right: 60px; /* Espaço à esquerda do botão de fechar */
    display: flex;
    gap: 10px; /* Espaço entre os botões de zoom */
    z-index: 1002; /* Garante que fiquem acima da imagem */
}

.modal-zoom-controls button {
    background-color: #D4A76A;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    transition: background-color 0.3s ease;
}

#modal-image-title {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px 20px;
    border-radius: 5px;
    margin: 0 0 15px 0; /* Espaço abaixo do título */
    font-size: 1.1em; /* Tamanho da fonte reduzido */
    text-align: center;
}

#modal-image-viewer {
    max-width: 100%;
    max-height: 90vh; /* Garante que a imagem não seja mais alta que a tela */
}

/* Estilo para as setas de navegação do modal */
.modal-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 50px;
    font-weight: bold;
    padding: 10px 20px;
    user-select: none; /* Impede a seleção de texto */
    transition: color 0.3s ease;
    z-index: 1001; /* Garante que fiquem acima do fundo */
}

.modal-arrow:hover {
    color: #fff;
}

#prev-image {
    left: 2%;
}

#next-image {
    right: 2%;
}


.sobre-mim-secao {
    max-width: 900px; /* Limita a largura para melhor leitura */
    margin: 40px auto; /* Centraliza na página */
    padding: 20px;
    line-height: 1.7; /* Melhora a legibilidade */
    color: #333;
}

.titulo-secao {
    font-size: 2.5em; /* Tamanho do título principal */
    color: #000;
    text-align: center;
    margin-bottom: 40px;
}

.subtitulo-secao {
    font-size: 1.8em; /* Tamanho dos subtítulos */
    color: #555;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* Linha sutil para separar */
    padding-bottom: 5px;
}

.sobre-mim-secao p {
    margin-bottom: 1em;
}

.sobre-mim-secao ul {
    list-style: disc inside; /* Bolinhas para listas */
    margin-left: 20px;
    margin-bottom: 1em;
}

.sobre-mim-secao small {
    color: #777;
    font-size: 0.9em;
}

/* Altera a cor do texto em negrito na seção "Sobre" para combinar com os subtítulos */
main strong {
    color: #555; /* Mesma cor dos subtítulos (.subtitulo-secao) */
    font-weight: 600; /* Garante que o texto continue com um peso de negrito */
}

/* Estilos para a seção de perfil na página "Sobre" */
.perfil-container {
    display: flex;
    align-items: flex-start; /* Alinha os itens no topo */
    gap: 40px; /* Espaço entre a foto e o texto */
    margin-bottom: 40px; /* Espaço abaixo da seção de introdução */
    text-align: left; /* Alinha o texto da introdução à esquerda */
}

.perfil-foto {
    flex-basis: 400px; /* Aumenta o tamanho inicial do container da foto */
    flex-shrink: 0; /* Impede que o container da foto encolha */
}

.perfil-foto img {
    width: 100%;
    border-radius: 8px; /* Cantos arredondados para a foto */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.perfil-texto {
    flex-grow: 1; /* Permite que o container do texto cresça */
}

/* Ajuste para telas menores (responsividade) */
@media (max-width: 768px) {
    .perfil-container {
        flex-direction: column; /* Coloca a foto acima do texto */
        align-items: center; /* Centraliza a foto */
        text-align: center; /* Centraliza o texto de introdução */
    }
}
/* --- Estilos para a Página de Portfólios Criativos --- */

.portfolio-showcase {
    padding: 2rem 0;
}

.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Espaçamento entre os cards */
    justify-content: center; /* Centraliza os cards se houver espaço sobrando */
}

/* Estilos para a barra de rolagem da seção de portfólios */
.portfolio-container::-webkit-scrollbar {
    width: 0px; /* Largura da barra de rolagem */
}

.portfolio-container::-webkit-scrollbar-track {
    background: transparent; /* Fundo transparente para a área de trilha */
}

.portfolio-container::-webkit-scrollbar-thumb {
    background: transparent; /* Cor do "polegar" da barra de rolagem */
}




.portfolio-item {
    /* Estilo unificado com os cards de serviço */
    background-color: #fee8ca; /* Fundo bege claro, igual ao do site */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 280px; /* Largura igual aos outros cards */
    box-sizing: border-box;
    height: 250px; /* Altura fixa para padronizar o tamanho */
    cursor: pointer;
    overflow: hidden; /* Garante que a imagem não ultrapasse as bordas */
    position: relative; /* Necessário para posicionar o título sobre a imagem */
}

.portfolio-item:hover {
    /* Efeito de hover unificado */
    transform: translateY(-8px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.portfolio-item .portfolio-thumbnail {
    display: block;
    width: 100%;
    height: 100%; /* Faz a imagem ocupar toda a altura do card */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
}

.portfolio-item h3 {
    /* Estilo do título sobreposto, como nos outros cards */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2px 15px; /* Padding vertical ainda mais reduzido */
    margin: 0;
    color: #0F4C81; /* Cor do título unificada com os outros cards */
    background-color: rgba(212, 167, 106, 0.9); /* Fundo dourado com transparência */
    box-sizing: border-box;
}

/* --- Estilos para o Modal do Portfólio --- */
#portfolio-modal .modal-content {
    max-width: 90%;
    max-height: 90vh;
    width: 800px; /* Largura do conteúdo do portfólio */
    overflow-x: hidden; /* Esconde a barra de rolagem horizontal */
    background-color: #fee8ca; /* Fundo bege claro para a janela */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 1rem; /* Espaçamento interno */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: block; /* Garante que o elemento se comporte como um bloco para a rolagem */
    position: relative; /* Necessário para posicionar o botão "voltar ao topo" interno */
}
/* Estilos para a barra de rolagem do modal de portfólio */
#portfolio-modal .modal-content::-webkit-scrollbar {
    width: 0px; /* Largura da barra de rolagem */
}

#portfolio-modal .modal-content::-webkit-scrollbar-track {
    background: transparent; /* Fundo transparente para a área de trilha */
}

#portfolio-modal .modal-content::-webkit-scrollbar-thumb {
    background: transparent; /* Cor do "polegar" da barra de rolagem */
}

#modal-portfolio-content {
    color: #000; /* Cor da fonte preta para o conteúdo */
    padding: 1rem 0; /* Espaçamento vertical */
}

/* Ajuste específico para o botão de fechar do modal de portfólio */
#portfolio-modal .modal-close {
    /* Posiciona fixo dentro da janela, no canto superior direito */
    position: fixed;
    top: 15px;
    right: 15px; /* Restaura o estilo padrão dos outros botões */
    background-color: #D4A76A;
    color: #fff;
}

/* Estilos para o conteúdo dentro do modal de portfólio */
.portfolio-modal-section {
    margin-bottom: 2.5rem; /* Espaço entre as seções (Página Inicial, Sobre, etc.) */
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee; /* Linha separadora sutil */
    text-align: left; /* Alinha o texto à esquerda */
}

.portfolio-modal-section:last-of-type {
    border-bottom: none; /* Remove a linha da última seção */
    margin-bottom: 0;
}

.portfolio-modal-section img {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do modal */
    height: auto;
    border-radius: 8px;
    margin: 1rem 0; /* Espaço acima e abaixo da imagem */
}

/* Botão "Voltar ao Topo" para o Modal */
#modal-back-to-top-btn {
    position: absolute; /* Posicionado em relação ao .modal-content */
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: #D4A76A;
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 22px;
    cursor: pointer;
    z-index: 10; /* Garante que fique acima do conteúdo de texto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#modal-back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

#modal-back-to-top-btn:hover {
    background-color: #0F4C81;
}

/* ==========================================================================
   Botão Flutuante "Voltar ao Topo"
   ========================================================================== */
#back-to-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px; /* Posicionado no canto inferior direito */
    width: 50px;
    height: 50px;
    background-color: #D4A76A; /* Cor dourada do site */
    color: #fff;
    border: none;
    border-radius: 50%; /* Botão circular */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    cursor: pointer;
    z-index: 999; /* Garante que fique acima da maioria dos conteúdos */
    
    /* Escondido por padrão com uma transição suave */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

#back-to-top-btn:hover {
    background-color: #0F4C81; /* Cor azul do site no hover */
}