/* Importando uma fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* CONFIGURAÇÕES GERAIS */
* {
    margin: 0; /* Remove margens de todos os elementos */
    padding: 0; /* Remove preenchimentos de todos os elementos */
    box-sizing: border-box;
}

/* Ajuste de cores */
:root {
    --cor-principal: #007bff;
    --cor-fundo: #dee8f7;
    --cor-card: #ffffff;
    --cor-texto: #000000;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cor-fundo); /* Cor do fundo do layout */
    color: var(--cor-texto); /* Cor do texto */
    padding-bottom: 50px; /* Espaço para não cobrir conteúdo com a nav inferior */
}

/* LAYOUT DO SITE */
.container {
    max-width: 680px; /* Largura máxima do layout */
    margin: 10px auto; /* Espaço acima e abaixo do layout */
    padding: 0 15px; /* Espaçamento lateral */
}

/* CABEÇALHO */
header {
    text-align: center; /* Centraliza o conteúdo do cabeçalho */
    margin-bottom: 20px; /* Espaço abaixo do cabeçalho */
}

.foto-perfil {
    width: 170px; /* Largura da imagem do perfil */
    height: 170px; /* Altura da imagem do perfil */
    margin: 0 auto; /* Centraliza a imagem do perfil */
    border-radius: 50%; /* Deixa a imagem do perfil redonda */
    border: 9px solid var(--cor-principal); /* Borda ao redor da imagem do perfil */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave ao redor da imagem */
    /* LINHAS PARA ATIVAR A ANIMAÇÃO */
    animation-name: animacaoEntrada; /* Nome da animação */
    animation-duration: 5s; /* Duração da animação */
    animation-timing-function: ease-out; /* Função de tempo da animação */
    animation-fill-mode: backwards; /* Previne que a animação comece antes do carregamento */
}

/* NOME DO TITULO */
header h1 {
    font-size: 2em; /* Tamanho do título */
    font-weight: 700; /* Negrito */
    margin-top: -5px; /* Espaço acima do título */
}

/* NOME DO SUBTITULO */
header h2 {
    font-size: 0.8em; /* Tamanho do subtítulo */
    font-weight: 400;
    color: var(--cor-principal); /* Cor do subtítulo */
}

/* TEXTO DE REPRESENTAÇÃO */
header p {
    margin-top: 5px; /* Espaço acima do texto de representação */
    font-size: 0.9em; /* Tamanho do texto de representação */
    line-height: 1.6; /* Espaçamento entre linhas */
    padding: 0 60px; /* Espaçamento lateral do texto */
}

/* SEÇÕES (Perfil) */
.secao-perfil {
    background-color: var(--cor-card); /* Cor de fundo da seção */
    padding: 10px;  /* Espaçamento interno da seção */  
    border-radius: 15px; /* Bordas arredondadas */
    margin-bottom: 15px; /* Distância entre as seções */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-bottom: 1px;  /* << AJUSTE AQUI para diminuir o espaço embaixo */
}

/* SEÇÕES (Redes Sociais, Galeria) */
.secao {
    background-color: var(--cor-card);  /* Cor de fundo da seção */
    padding: 20px;  /* Espaçamento interno da seção */
    border-radius: 15px; /* Bordas arredondadas */
    margin-bottom: 15px; /* Distância entre as seções */
    margin-top: -5px; /* Ajusta o espaço acima da seção */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-bottom: 10px; /* << AJUSTE AQUI para diminuir o espaço embaixo */
}

/* SEÇÕES (Titulo das seções) */
.secao h3 {
    font-size: 1.2em; /* Tamanho do título da seção */
    font-weight: 500; 
    margin-bottom: 1px; /* Espaço abaixo do título */
    margin-top: -15px; /* Ajusta o espaço acima do título */
    text-align: center; /* Centraliza o título da seção */
}

/* NOVOS ESTILOS PARA AS REDES SOCIAIS */
.redes-sociais {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaço entre os ícones */
    margin-top: 5px;
}

.card-social {
    display: block;
    width: 60px; /* Largura do círculo */
    height: 60px; /* Altura do círculo */
    border-radius: 50%; /* Deixa o card redondo */
    background-color: #eeecec; /* Fundo branco para o card */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* A sombra que você pediu */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Garante que a imagem fique contida no círculo */
}

.card-social:hover {
    transform: translateY(-5px) scale(1.05); /* Efeito de levantar e aumentar */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Sombra mais forte no hover */
}

.card-social img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo */
}

/* GALERIA DE FOTOS */
.galeria {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0px; /* Espaçamento entre as imagens */
  box-sizing: border-box;
}

.card {
  width: 100%;
  aspect-ratio: 1 / 1; /* card quadrado */
  background: #e2e2e2;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #6d6d6d; /* borda clara */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card img {
  max-width: 135%;
  max-height: 110%;
  object-fit: cover; /* mantém proporção sem cortar */
  transition: transform 0.3s ease;
}

.card img:hover {
  transform: scale(1.05);
}

/* --- ESTILOS PARA A NAVEGAÇÃO INFERIOR --- */
/* NAVEGAÇÃO INFERIOR */
.navegacao-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 10px 0; /* Altura da barra de navegação */
    z-index: 999; /* Coloca a navegação ACIMA do conteúdo da página */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #999999; /* Cor padrão dos ícones */
    font-size: 0.75em;
}

.nav-item i {
    font-size: 1.5em; /* Tamanho dos ícones */
    margin-bottom: 3px;
}

.nav-item.ativo {
    color: var(--cor-principal); /* Cor do item ativo */
}

/* PASSO 1: DEFININDO A ANIMAÇÃO DE "ENTRADA" FOTO DO PERFIL*/
@keyframes animacaoEntrada {
  from {
    opacity: 0;                   /* Começa totalmente transparente */
    transform: translateY(30px);  /* Começa 30 pixels para baixo da sua posição final */
  }
  to {
    opacity: 1;                   /* Termina totalmente visível */
    transform: translateY(0);     /* Termina na sua posição original */
  }
}

/* --- ESTILOS DO LIGHTBOX --- */
/* O fundo preto que cobre a tela inteira */
#lightbox-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); /* Preto com 85% de opacidade */
  display: none; /* COMEÇA ESCONDIDO */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Garante que fique na frente de tudo */
}

/* Classe que vamos usar com JavaScript para MOSTRAR o lightbox */
#lightbox-overlay.ativo {
  display: flex; /* Muda o display para flex, o que o torna visível */
}

/* A imagem grande dentro do lightbox */
#lightbox-image {
  max-width: 90%;  /* No máximo 90% da largura da tela */
  max-height: 80%; /* No máximo 80% da altura da tela */
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
  border: 2px solid white;
}

/* O botão 'X' para fechar */
#lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

#lightbox-close:hover {
  color: #ccc;
}

/* --- ESTILOS DAS SETAS DO LIGHTBOX --- */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5em; /* Tamanho do ícone da seta */
    color: rgba(255, 255, 255, 0.7); /* Branco com um pouco de transparência */
    cursor: pointer;
    padding: 20px;
    transition: color 0.2s ease;
    z-index: 1001; /* Garante que fiquem na frente da imagem */
}

.lightbox-nav:hover {
    color: rgba(255, 255, 255, 1); /* Branco sólido ao passar o mouse */
}

#lightbox-prev {
    left: 15px;
}

#lightbox-next {
    right: 15px;
}

/* --- NOVA SEÇÃO DE ENTRETENIMENTO --- */
/* O container que segura os cards */
.entretenimento {
    display: flex;
    justify-content: center; /* Centraliza os cards horizontalmente */
    gap: 15px; /* Espaço entre os ícones */
    margin-top: 5px;
}

/* O card clicável de cada ícone */
.card-entretenimento {
    flex: 0 0 auto;
    width: 75px;   /* Largura do card */
    height: 75px;  /* Altura do card */
    background-color: #f0f2f5; /* Cor de fundo do card */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
    scroll-snap-align: start;
}

.card-entretenimento:hover {
    transform: translateY(-4px) scale(1.05); /* Efeito de levantar e aumentar */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Sombra mais forte no hover */
}

/* O ícone dentro do card */
.card-entretenimento img {
    width: 55px;   /* Largura do ícone */
    height: 55px;  /* Altura do ícone */
    object-fit: contain;
}

/* --- AJUSTE PARA A SEÇÃO DE ENTRETENIMENTO NO MOBILE --- */
/* Em telas com 600px de largura ou menos */
@media (max-width: 600px) {
    .card-entretenimento {
        width: 55px;  /* Diminuindo o card no mobile */
        height: 55px;
        border-radius: 16px; /* Ajustando a borda para o novo tamanho */
    }

    .card-entretenimento img {
        width: 40px;  /* Diminuindo o ícone no mobile */
        height: 40px;
    }

    .entretenimento {
        gap: 10px; /* Diminui o espaço entre os ícones de 15px para 10px */
    }
}

/* Mobile: Rolagem horizontal da galeria */
@media (max-width: 480px) {
    .galeria {
        display: flex; /* Transforma o grid em um container flex */
        flex-direction: row; /* Alinha os itens em linha */
        overflow-x: auto; /* Adiciona a barra de rolagem horizontal quando necessário */
        gap: 10px; /* Mantém o espaçamento entre os cards */
        padding: 5px; /* Adiciona um pouco de padding para a rolagem não cortar o primeiro e último item */
        scroll-snap-type: x mandatory; /* Opcional: faz os itens "snap" ao rolar */
        -webkit-overflow-scrolling: touch; /* Opcional: para rolagem suave em iOS */
        grid-template-columns: none; /* Remove a definição de colunas do grid */
        margin-left: -15px; /* Compensar o padding do container */
        margin-right: -15px; /* Compensar o padding do container */
    }

    .galeria > .card {
        flex: 0 0 auto; /* Não permite que os cards encolham ou cresçam demais */
        width: calc(100% / 3 - 10px); /* Define a largura inicial dos cards (considerando o gap) */
        scroll-snap-align: start; /* Opcional: alinha o início do item ao "snap" */
    }

    /* Zera o espaçamento lateral do texto do cabeçalho no mobile */
    header p {
        padding: 0;
    }
}