/* == Importação de fontes == */
/* Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

/* Great Vibes */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* == /Importação de fontes == */

/* == Reset de estilos == */ 
* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    text-decoration: none; 
    border: none;
    scroll-behavior: smooth; 
}

:root {
    --branco-color: #FAEBD7; /*Fundo principal claro / texto escuro*/
    --bg-color: #E2C48C; /* Cor de fundo principal */
    --primaria: #48000C; /*Cor primária para títulos e destaques*/
    --complementar: #0A2E1E; /*Complementar/acentos e fundos escuros*/
    --secundaria: #280B09; /*Fundos e elementos de profundidade*/
    --claro: #e2e8f0; /* Cor clara para textos e destaques */
    --vidro: rgba(255, 255, 255, 0.1); /* Efeito “vidro” translúcido */ 
    --marrom-logo: #3F0E00; /* Marrom escuro do logo */
    --main-color: #6EF700; /* Verde vibrante */
    --creme: #E2BE8B: /* Coral Creme */
    --maisEscuro: #0a0f1c;
    --JetBlack: #030303 
}

/* == Elementos gerais == */
html {}

body {
    background-color: #E2C48C;
}

/* == Efeito de partículas == */ /* Camada de partículas fixa em background */
.particulas {
    position: fixed; /* Fixa em toda a tela */
    top: 0; /* Inicia no topo */
    left: 0; /* Inicia na esquerda */
    width: 100%; /* Ocupa largura total */
    height: 100%; /* Ocupa altura total */
    z-index: -1; /* Fica atrás de todo o conteúdo */
    opacity: 0.5; /* 50% de opacidade */
    background: radial-gradient(circle at 10% 20%, var(--primaria) 0%, transparent 20%), /* Primeira partícula */
                radial-gradient(circle at 90% 80%, var(--secundaria) 0%, transparent 20%), /* Segunda partícula */
                var(--maisEscuro); /* Cor de fundo base */
}

.imagem-principal {
    max-width: 300px;
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68); /* Sombra forte atrás */
    border-radius: 10%; /* Torna circular */
    border: 4.2px solid var(--vidro); /* Borda translúcida */
    border-color: #48000C;
    overflow: hidden; /* Esconde partes que extravasam */
    margin: 1rem 3rem 2rem 0rem; /* Margens: topo, direita, baixo e dentro?? */
    margin-left: 3rem;
    float: right; /* Alinha à direita */
}

.header-container {
    background-color: var(--primaria);
    padding: 1.5rem 0;
}

.logo-image {
    margin-bottom: 2rem;
}

/* == Navbar fixa no topo == */ /* Estilos para a barra de navegação fixa */
.navbar {
    background-color: var(--color-00);  /*Fundo semi-transparente */
    position: fixed; /* Fixa no topo durante o scroll */
    top: 0; /* Posiciona no topo da viewport */
    left: 0; /* Posiciona à esquerda da viewport */
    width: 100%; /* Largura total da viewport */
    z-index: 100; /* Fica acima de outros elementos */
    padding: 1rem 8%; /* Espaçamento interno vertical e horizontal */
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza itens horizontalmente */
    align-items: center; /* Centraliza itens verticalmente */
}

.menu {
    display: flex; /* Mostra itens em linha */
    list-style: none; /* Remove marcadores de lista */
    gap: 1.5rem; /* Espaçamento de 2rem entre itens */
}

.menu-link {
    font-weight: 600; /* Peso médio da fonte */
    color: var(--claro); /* Cor clara para links */
    position: relative; /* Permite pseudo-elementos posicionados */
}

.menu-link::after {
    content: ''; /* Cria pseudo-elemento vazio */
    position: absolute; /* Posiciona em relação ao link */
    width: 0; /* Largura inicial zero para efeito hover */
    height: 2px; /* Altura da linha de destaque */
    bottom: 0; /* Alinha na base do elemento */
    left: 0; /* Inicia no canto esquerdo */
    background: var(--main-color); /* Graduê entre primária e secundária */
    transition: width 0.3s ease; /* Animação suave na largura */
}

.menu-link:hover::after {
    width: 100%; /* Expande a linha sob o link ao hover */
}

h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 2rem;
    color: var(--primaria); /* opcional, para usar sua cor primária */
    margin-bottom: 0.5rem;
    margin-left: 1rem;
}

.titulo-secundario {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    font-size: 2rem;
    color: var(--primaria); /* opcional, para usar sua cor primária */
    margin-bottom: 0.5rem;
    margin-left: 0.5rem; 
}

h3 {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-style: italic;
    color: var(--primaria); /* opcional, para usar sua cor primária */
    margin-bottom: 0.2rem;
    margin-left: 1rem;
}

p {
    font-family: 'Great Vibes', cursive;
    font-weight: 400; /* Regular */
    font-style: normal; /* ou italic, se quiser */
    font-size: 1.7rem;
    color: var(--primaria);
    margin-top: 4rem;
    margin-bottom: 5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    line-height: 1.6;
}

/* Primeiro container */
.sobre-container {
    display: flex;
    align-items: flex-start; /* alinha pelo topo */
    gap: 2rem; /* espaço entre imagem e texto */
    flex-wrap: wrap; /* permite que quebre para baixo em telas menores */
    margin: 2rem;
}

.imagem-principal {
    max-width: 300px;
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68);
    border-radius: 10%;
    border: 4.2px solid #48000C;
}

.sobre-container p {
    flex: 1; /* texto ocupa o espaço restante */
    min-width: 250px; /* evita que o texto fique muito espremido */
}
/* ================ */

.imagem-segunda {
    max-width: 300px;
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68); /* Sombra forte atrás */
    border-radius: 10%; /* Torna circular */
    border: 4.2px solid var(--vidro); /* Borda translúcida */
    border-color: #48000C;
    overflow: hidden; /* Esconde partes que extravasam */
    margin: 0rem 3rem 3rem 0rem; /* Margens: topo, direita, baixo e dentro?? */
    margin-left: 3rem;
    float: left; /* Alinha à esquerda */
}

.imagem-terceira {
    max-width: 300px;
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68); /* Sombra forte atrás */
    border-radius: 10%; /* Torna circular */
    border: 4.2px solid var(--vidro); /* Borda translúcida */
    border-color: #48000C;
    overflow: hidden; /* Esconde partes que extravasam */
    margin: 3rem 3rem 2rem 0rem; /* Margens: topo, direita, baixo e dentro?? */
    margin-left: 3rem;
    float: right; /* Alinha à direita */
}

.imagem-quarta {
    max-width: 300px;
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68); /* Sombra forte atrás */
    border-radius: 10%; /* Torna circular */
    border: 4.2px solid var(--vidro); /* Borda translúcida */
    border-color: #48000C;
    overflow: hidden; /* Esconde partes que extravasam */
    margin: 3rem 3rem 2rem 0rem; /* Margens: topo, direita, baixo e dentro?? */
    margin-left: 3rem;
    float: left; /* Alinha à esquerda */
}

/* Estilização dos links das mídias sociais */
.social-mediafooter a {
    display: inline-flex; /* Flex container inline para centralizar ícones */
    justify-content: center; /* Centraliza horizontal */
    align-items: center; /* Centraliza vertical */
    width: 1.8rem; /* Largura fixa */
    height: 1.8rem; /* Altura fixa */
    border: solid 0.15rem var(--primaria); /* Borda circular colorida */
    border-radius: 50%; /* Torna circular */
    font-size: 1.3rem; /* Tamanho do ícone */
    color: var(--primaria); /* Cor da borda e do ícone */
    margin: 0.3rem 1rem 0.8rem 0; /* Margens ao redor */
    transition: 0.5s ease; /* Transição suave ao hover */
    margin-top: 5rem; /* Espaço superior */
}

.social-mediafooter a:hover {
    background: var(--main-color); /* Fundo primário ao passar */
    color: var(--bg-color-02); /* Cor de ícone contrastante */
    box-shadow: 0 0 0.3rem var(--main-color); /* Sombra leve */
}

footer p { /* seleciona todos os <p> dentro de <footer> */
    font-family: Poppins, sans-serif; /* fonte Poppins */
    font-weight: 400; /* Regular */
    font-style: normal; /* ou italic, se quiser */
    font-size: 1.7rem;
    font-size: 1rem; /* tamanho da fonte 1.1rem */
    margin: 0.5rem 0 1rem; /* margem: 0.5rem topo, 0 laterais, 1rem base */
    color: var(--JetBlack); /* cor do texto clara */
    text-align: center; /* alinha texto ao centro */
    margin-top: 0.5rem; /* margem superior 1rem */
    margin-bottom: 1.2rem; /* margem inferior 1.2rem */
} /* fecha a regra footer p */