/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fondo blanco y centrado */
body {
    background: #ffffff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor del logo */
.logo-container {
    position: relative;
    display: inline-block;
    width: min(80px, 15vw); /* tamaño real del logo */
    aspect-ratio: 3 / 4;     /* ⭐ Proporción correcta del logo */
    text-align: center;
}

/* Tamaño del logo */
.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Ambas imágenes superpuestas */
.logo--gris,
.logo--color {
    position: absolute;
    top: 0;
    left: 0;
}

/* Por defecto solo se ve la gris */
.logo--color {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Hover: aparece la de color */
.logo-container:hover .logo--color {
    opacity: 1;
}

.logo-container:hover .logo--gris {
    opacity: 0;
}