/* Estilos para destacar el logo */
.logo {
    padding: 0px;
    transition: all 0.3s ease;
    position: relative;
}

.logo img {
    max-width: 220px; /* Aumentar tamaño del logo */
    height: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}

.logo::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

.logo:hover::after {
    width: 80%;
}

/* Destacar logo en versión móvil */
@media (max-width: 768px) {
    .logo {
        padding: 10px 0;
    }
    
    .logo img {
        max-width: 180px; /* Aumentar tamaño del logo en móvil */
    }
}

/* Animación sutil para el logo */
@keyframes logoGlow {
    0% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); }
    50% { filter: drop-shadow(0 6px 12px rgba(76, 175, 80, 0.3)); }
    100% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); }
}

.logo img {
    animation: logoGlow 5s infinite ease-in-out;
}