body { font-family: Arial,
sans-serif; 
max-width: 500px;
margin: 0 auto; 
padding: 20px; 
}

input { 
padding: 10px; 
width: 100%; 
margin-bottom: 
10px; 

}
button 
{ background: #4CAF50; 
color: white; 
border: none; 
padding: 10px 15px;
cursor: pointer; 
}

.logo-transparente {
    padding: 15px;
    background: linear-gradient(to right, #f366fa); /* Fondo opcional */
    border-radius: 8px;
    width: 500px;
    text-align: center;
    color: white;
    justify-content: center;
    align-items: center;
}

.logo-puro {
    height: 300px;
    width: 600px;
    /* Efecto sutil para resaltar */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
   max-width: 100%;
}

/* Efecto hover para interactividad */
.logo-puro:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.logo-img {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}