:root {
    --bg-color: #f8f9fa;
    --text-dark: #1a202c;
    --text-light: #4a5568;
    --primary: #3870d8;
    --gold: #c5a065;
    --gold-hover: #b08d55;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    overflow-y: scroll; 
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.6;
}

/* NAVBAR (Padrão) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    
    /* ESTILO DE DESTAQUE */
    background-color: #ffffff;        
    border-bottom: 1px solid #e2e8f0; 
    
    /* Sombra um pouco mais forte para garantir que você veja */
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Sombra leve para dar profundidade */


    /* O SEGREDO DO DESTAQUE: */
    position: relative; /* Habilita o controle de camadas */
    z-index: 10;        /* Coloca a navbar 10 andares acima do resto */
}
.logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { text-decoration: none; color: var(--text-light); transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); font-weight: bold; }
.nav-icons a { margin-left: 10px; color: var(--text-dark); }

/* HERO SECTION */
.hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4rem 5% 6rem; gap: 50px; max-width: 1400px; margin: 0 auto;
}
.hero-content { flex: 1; max-width: 600px; }
.hero-content h1 { font-family: var(--font-heading); font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem; }
.hero-quote { font-family: var(--font-heading); font-style: italic; font-size: 1.2rem; color: var(--text-light); margin-bottom: 2.5rem; }

.btn-gold {
    display: inline-block; background-color: var(--gold); color: white;
    padding: 15px 35px; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background 0.3s;
}
.btn-gold:hover { background-color: var(--gold-hover); }

.hero-image-container { flex: 1; display: flex; justify-content: flex-end; }
.hero-img { width: 100%; max-width: 500px; border-radius: 10px; box-shadow: 20px 20px 0px rgba(0,0,0,0.05); }

/* CARDS SECTION */
.passions { background-color: white; padding: 5rem 5%; text-align: center; }
.section-title { font-family: var(--font-heading); font-size: 2.5rem; margin-bottom: 3rem; }

.cards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; max-width: 1400px; margin: 0 auto;
}

.card {
    background: white; border-radius: 8px; overflow: hidden; text-align: left;
    transition: transform 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.card-img { height: 180px; background-size: cover; background-position: center; }
.card-body { padding: 1.5rem; }
.card-body h3 { font-family: var(--font-heading); font-size: 1.4rem; margin-bottom: 0.8rem; }
.card-body p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1.5rem; }
.read-more { color: var(--gold); text-decoration: none; font-weight: bold; display: flex; align-items: center; gap: 8px; }

/* FOOTER */
footer { text-align: center; padding: 3rem 5%; background-color: white; border-top: 1px solid #eee; }
.footer-links { margin-bottom: 1.5rem; display: flex; justify-content: center; gap: 30px; }
.footer-links a { text-decoration: none; color: var(--text-light); }
.footer-icons { margin-bottom: 1.5rem; display: flex; justify-content: center; gap: 20px; color: var(--text-light); font-size: 1.2rem; }
.copyright { font-size: 0.8rem; color: #a0aec0; }

/* MOBILE */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 20px; }
    .hero { flex-direction: column-reverse; text-align: center; padding-top: 2rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-image-container { justify-content: center; }
}