.browser-compatibility {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}

.browser-icons, .mobile-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

.browser-icons i, .mobile-icons i {
    font-size: 40px;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Chrome: multicolor icónico sin violar marca */
.fa-chrome {
    background: conic-gradient(from 90deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Firefox: degradado cálido y azul */
.fa-firefox {
    background: radial-gradient(circle at center, #FF7139 30%, #E6601E 60%, #00539F 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Safari: tonos tierra sutiles */
.fa-safari {
    background: linear-gradient(135deg, #C3B091, #A67B5B, #B5A27E, #78866B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Edge y Opera: colores sólidos */
.fa-edge { color: #0078D7; }
.fa-opera { color: #FF1B2D; }

/* Android: verde Android, azul Google, azul marino */
.fa-android {
    background: linear-gradient(135deg, #3DDC84, #4285F4, #001F3F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Apple: blanco, negro, plata/gris y azul */
.fa-apple {
    background: linear-gradient(to right, #ffffff, #000000, #A2AAAD, #0A84FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hover universal: sutil y elegante */
.fa-chrome:hover,
.fa-firefox:hover,
.fa-safari:hover,
.fa-edge:hover,
.fa-opera:hover,
.fa-android:hover,
.fa-apple:hover {
    transform: scale(1.2);
    opacity: 0.9;
}

/* 🍃 Ícono ecológico con hoja */
.eco-icon {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.eco-icon i {
    font-size: 40px;
    background: linear-gradient(135deg, #6BBE44, #A1DD70, #C2F09E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.eco-icon i:hover {
    transform: scale(1.2);
    opacity: 0.9;
}