/* Animacion de imagenes con menu lado izquierdo*/

/* .logo-column {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 40px;
    z-index: 999;
}


/* Animación de entrada aplicada al contenedor 
.logo-wrapper {
    animation: slideIn 1s ease forwards;
    opacity: 0;
}

.logo-wrapper:nth-child(1) { animation-delay: 0.2s; }
.logo-wrapper:nth-child(2) { animation-delay: 0.4s; }
.logo-wrapper:nth-child(3) { animation-delay: 0.6s; }
.logo-wrapper:nth-child(4) { animation-delay: 0.8s; }

@keyframes slideIn {
    from {
        transform: translateX(-60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}*/

/* Hover aplicado directamente a la imagen 
.logo-wrapper img {
    width: 150px;
    transition: transform 0.4s ease;
    transform-origin: left center;
    display: block;
}

.logo-wrapper img:hover {
    transform: scale(2) translateX(40px);
    z-index: 1000;
}*/

/*CSS horizontal hacia arriba*/

.logo-row {
    position: fixed;
    top: 20px;
    left: 20px;
    margin-left: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw; /* Espaciado relativo al ancho de la ventana */
    z-index: 999;
    flex-wrap: wrap; /* Permite que bajen si no caben */
}

.logo-row img {
    width: 12vw;         /* Escala con el ancho de la ventana */
    max-width: 200px;    /* No se agranda más allá de esto */
    height: auto;        /* Mantiene proporción */
    opacity: 0;
    transform: scale(1) translateY(0);
    animation: slideDown 1s ease forwards;
    transition: transform 0.4s ease;
    transform-origin: center center;
}

/* Animación escalonada */
.logo-row img:nth-child(1) { animation-delay: 0.2s; }
.logo-row img:nth-child(2) { animation-delay: 0.4s; }
.logo-row img:nth-child(3) { animation-delay: 0.6s; }
.logo-row img:nth-child(4) { animation-delay: 0.8s; }

.logo-row img:hover {
    transform: scale(1.8) translateY(30px);
    z-index: 1000;
}

/* Entrada desde arriba */
@keyframes slideDown {
    from {
        transform: scale(1) translateY(-60px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}