Aquesta secció se centra en la presentació visual del logo i els títols de la pàgina.

🖼️ Estils del logo i títols

1. Contenidor del logo (.logo-container)

.logo-container { /* Contenidor per a la imatge del logo */
            display: flex; /* Utilitza Flexbox per al layout */
            align-items: center; /* Centra verticalment la imatge */
        }

Utilitza Flexbox per organitzar els elements dins del contenidor.

• align-items: center assegura que el logo es centri verticalment dins del seu espai.

2. Imatge del logo (.logo)

.logo { /* Estils per a la imatge del logo */
            width: 260px; /* Amplada de la imatge */
            height: 260px; /* Alçada de la imatge */
            border-radius: 12px; /* Cantonades arrodonides */
            object-fit: cover; /* Manté la proporció de la imatge */
            /* Si la imatge és més gran que el contenidor, s'ajusta */
            border: 3px solid white; /* Vora blanca */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Ombra per a la imatge */
        }

Defineix una mida fixa per a la imatge: 260x260 píxels.

• Les cantonades arrodonides amb border-radius donen un aspecte més suau.
• object-fit: cover fa que la imatge mantingui la proporció i s’ajusti al contenidor sense deformar-se.
• La vora blanca amb border destaca la imatge sobre el fons.
• L’ombra suau amb box-shadow afegeix profunditat i elegància.

3. Contenidor del títol (.titol-container)

 .titol-container { /* Contenidor per al títol i subtítol */
            text-align: center; /* Centra el text del títol */
        }

Centra tot el contingut textual (títol i subtítol) dins del contenidor.

4. Títol principal (h1)

   /* TÍTOL PRINCIPAL */
        h1 { /* Estils per al títol principal */
            font-size: 2.5rem; /* Mida de font gran */
            margin-bottom: 10px; /* Margen inferior */
        }

Mida de font gran per destacar el títol principal.

• margin-bottom afegeix espai entre el títol i el subtítol, millorant la jerarquia visual.

5. Subtítol (.subtitle)

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

Mida de font moderada, complementa el títol principal.

• opacity: 0.9 dona una lleugera transparència, fent-lo més subtil i elegant.