/* Estils Generals */
body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 🖼️ Estils per a la Imatge Principal */
.main-img {
    display: block; /* Important per poder centrar-la amb margin */
    width: 90%; /* Ocupa el 90% de l'ample */
    max-width: 512px; /* L'ample màxim de la imatge */
    height: auto;
    margin: 16px auto; /* Centra horitzontalment (margin: 20px superior/inferior, auto esquerra/dreta) */
    /* border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.ropits-title {
    display: block; /* Important per poder centrar-la amb margin */
    width: 100%; /* Ocupa el 90% de l'ample */
    color: #181818;
    font-size: 3em;
    text-align: center;
}



/* 📦 Estils per al Contenidor dels Divs (Flexbox) */
.section-box-container {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permet que els elements saltin de línia */
    justify-content: center; /* **Centra** les files d'elements horitzontalment */
    align-items: flex-start;
    max-width: 1200px; /* Ample màxim del contenidor central */
    margin: 0 auto; /* Centra el contenidor a la pàgina */
    padding: 10px;
}

/* 🧩 Estils per a cadascun dels Divs (Caixes) */
.section-box {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 12px;
    margin: 8px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 📱 Estils per Pantalles Petites (Mòbil) */
/* Un a sobre de l'altre i Centrats */
.section-box {
    width: 90%; /* Ocupa gairebé tot l'ample del section-box-container (un per fila) */
    max-width: 300px; /* Mida màxima per evitar que sigui massa ample en vertical */
}


.section-img-box {
    width: 80px;
    max-width: 40%;
    position: relative;
    float: left;
}

.section-img {
    width: 100%; 
    height: auto;
}

.section-text {
    position: relative;
    float: left;
    width: calc(100% - 90px);
    height: 80px;
    text-align: left;
    padding-left: 10px;
    overflow: hidden;       /* amaga el contingut que desborda */
    font-size: 0.7em;
}

.section-title {
    color: #181818;
    font-size: 1.4em;
    overflow: hidden;       /* amaga el contingut que desborda */
    white-space: nowrap;    /* evita que el text salti de línia */
}

.section-link {
    text-decoration: none; 
    color: inherit;
}

/* 🖥️ Estils per Pantalles Grans (Tablet/Desktop) */
/* Media Query que s'aplica quan l'ample és MÉS GRAN de 600px */
@media (min-width: 600px) {
    
    /* Dos per Fila i Centrats */
    .section-box {
        /* Calcula l'ample per a 2 elements: menys de la meitat (50%) per deixar espai per al margin */
        /* width: calc(50% - 16px);  */
        width: calc(50% - 32px); 
        max-width: 400px; /* Assegura que no es facin massa grans */
    }

    .section-text {
        font-size: 1.0em;
    }

}


.links-container {
    width: 80%;
    text-align: center;
    display: block; /* Important per poder centrar-la amb margin */
    width: 90%; /* Ocupa el 90% de l'ample */
    max-width: 800px; /* L'ample màxim de la imatge */
    height: auto;
    margin: 20px auto; /* Centra horitzontalment (margin: 20px superior/inferior, auto esquerra/dreta) */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


}

.link-icon {
    width: 23px;
    height: auto;
}

.clear-both {
    clear: both;
}

a { 
    margin-right: 1%; 
}