:root {
    --brand-green: #8A9A8A;
    --bg-color: #F7F3EE;
    --text-dark: #1A1A1A;
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-dark); 
    font-family: 'Montserrat', sans-serif; 
    line-height: 1.6; 
    margin: 0; 
}

h1 { 
    font-family: 'Playfair Display', serif; 
    font-size: 2.5rem; 
    color: var(--text-dark); 
    margin: 0; 
}

h2 { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.8rem; 
    color: var(--brand-green); 
    margin-bottom: 2rem; 
    text-align: center; 
}

section {
    text-align: center;
    padding: 30px 10px;
}

/* Ajustos generals d'imatges */
img {
    max-width: 100%;
    height: auto;
}

/* Hero Refinat */
.hero { 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 60px 20px 40px 20px;
    text-align: center; 
}

.hero img { 
    max-width: 300px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 25px; 
}

.hero p { 
    font-size: 1rem; 
    color: #666; 
}

/* Grid Perfectament equilibrada */
.bento-grid { 
    display: grid; 
    grid-template-columns: 1fr; /* Una sola columna en mòbil */
    gap: 20px; 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px; 
}

.bento-card { 
    border-radius: 10px; 
    overflow: hidden; 
}

.bento-card img { 
    aspect-ratio: 3 / 4; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Galeria de detalls */
.masonry-gallery { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* 2 columnes per a mòbils */
    gap: 10px; 
    max-width: 1000px; 
    margin: 40px auto; 
    padding: 20px; 
}

.masonry-gallery img { 
    aspect-ratio: 3 / 4; 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    border-radius: 10px;
}

.btn-link { 
    background-color: var(--brand-green); 
    color: white; 
    padding: 12px 25px; 
    text-decoration: none; 
    border-radius: 2px; 
    font-size: 0.85rem; 
    display: inline-block;
}

/* Formulari */
.form-container {
    max-width: 90%; /* S'adapta millor a pantalles petites */
    margin: 30px auto; 
    display: flex;
    flex-direction: column;
}

.form-container input, 
.form-container button {
    width: 100%;
    margin-bottom: 10px;
    padding: 15px;
    box-sizing: border-box; 
}

footer {
    text-align: center; 
    padding: 40px 20px; 
    margin-top: 50px;   
    font-size: 0.85rem;
    color: #888;
    border-top: 1px solid #eee; 
}

/* Media Query per a pantalles més grans (tauletes i ordinadors) */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .masonry-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .form-container {
        max-width: 300px;
    }
}