/* Mejoras de visibilidad para logos */

/* Sombras y efectos sutiles para mejorar la visibilidad */
.nav-logo-icon,
.nav-favicon-large,
.footer-logo-icon {
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
}

.nav-logo-icon:hover,
.nav-favicon-large:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3));
}

/* Logo del hero con efecto de brillo sutil */
.hero-logo {
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.2));
}

.hero-logo:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 6px 20px rgba(16, 185, 129, 0.3));
}

/* Mejora de contraste en modo oscuro */
@media (prefers-color-scheme: dark) {
    .nav-logo-icon,
    .footer-logo-icon {
        filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(255, 255, 255, 0.1));
    }
    
    .nav-logo-icon:hover {
        filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4));
    }
}

/* Mejora de contraste en modo claro */
@media (prefers-color-scheme: light) {
    .hero-logo {
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
    }
    
    .hero-logo:hover {
        filter: drop-shadow(0 6px 20px rgba(16, 185, 129, 0.2));
    }
}

/* Animación sutil de aparición */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-logo-icon,
.nav-favicon-large,
.hero-logo,
.footer-logo-icon {
    animation: logoFadeIn 0.6s ease-out;
}

/* Responsividad mejorada para logos */
@media (max-width: 768px) {
    .nav-logo-icon {
        width: calc(var(--logo-header-size) * 0.9);
        height: calc(var(--logo-header-size) * 0.9);
    }
    
    .nav-favicon-large {
        width: calc(var(--logo-favicon-large) * 0.9);
        height: calc(var(--logo-favicon-large) * 0.9);
    }
    
    .hero-logo {
        width: calc(var(--logo-hero-size) * 0.8);
        height: calc(var(--logo-hero-size) * 0.8);
    }
}

@media (max-width: 480px) {
    .nav-logo-icon {
        width: calc(var(--logo-header-size) * 0.8);
        height: calc(var(--logo-header-size) * 0.8);
    }
    
    .nav-favicon-large {
        width: calc(var(--logo-favicon-large) * 0.8);
        height: calc(var(--logo-favicon-large) * 0.8);
    }
    
    .hero-logo {
        width: calc(var(--logo-hero-size) * 0.7);
        height: calc(var(--logo-hero-size) * 0.7);
    }
}