Aquesta secció de CSS està pensada per mostrar característiques del projecte amb icones i text, d’una manera clara, flexible i visualment atractiva. 

🧩 Estils per a les característiques amb icones

1. Contenidor general (.features)

 /* Estils per a les icones */
        .features { /* Contenidor per a les característiques amb icones */
            display: flex; /* Utilitza Flexbox per al layout */
            flex-wrap: wrap; /* Permet que les característiques es moguin a la següent línia si cal */
            gap: 20px; /* Espai entre les característiques */
            margin: 30px 0; /* Margen vertical */
        }

Utilitza Flexbox per col·locar les característiques en línia.

• flex-wrap: wrap permet que les targetes saltin de línia si no hi ha prou espai, ideal per a pantalles petites.
• gap: 20px crea espai entre les targetes, evitant que quedin enganxades.
• margin: 30px 0 afegeix espai vertical abans i després del bloc.

2. Cada característica (.feature)

.feature { /* Estils per a cada característica */
            flex: 1 1 250px; /* Flexibilitat per a adaptar-se a diferents mides */
            display: flex; /* Utilitza Flexbox per al layout intern */
            align-items: flex-start; /* Alinea els elements a l'inici */
            gap: 15px; /* Espai entre la icona i el text */
            padding: 20px; /* Espaiat intern */
            background: white; /* Fons blanc */
            border-radius: 8px; /* Cantonades arrodonides */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Ombra suau */
        }

flex: 1 1 250px fa que cada targeta tingui una amplada mínima de 250px, però pugui créixer o reduir-se segons l’espai disponible.

• Dins de cada targeta, s’utilitza Flexbox per col·locar la icona i el text en línia.
• align-items: flex-start fa que la icona i el text s’alineïn a la part superior.
• gap: 15px separa la icona del text.
• El fons blanc, les cantonades arrodonides i l’ombra suau donen un aspecte net i professional.

3. Icones (.feature i)

  .feature i { /* Estils per a les icones */
            font-size: 2rem; /* Mida gran per a les icones */
            color: #4a6580; /* Color blau */
            flex-shrink: 0; /* Evita que la icona es redueixi */
        }

Les icones tenen una mida gran per destacar visualment.

• El color blau #4a6580 manté la coherència cromàtica amb la resta del disseny.
• flex-shrink: 0 evita que la icona es redueixi si l’espai és limitat, mantenint la seva presència.

Aquest estil és ideal per mostrar punts forts del projecte, com ara compatibilitat amb dispositius, velocitat, accessibilitat, etc.