/* Reseteo general para eliminar márgenes predeterminados */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuramos el body para que ocupe toda la pantalla y centre su contenido mediante Flexbox */
body,
html {
    width: 100%;
    height: 100vh;
    /* Ocupa el 100% del alto visible */
    background-color: #f7f7f7;
    /* Un color claro para que la imagen (que tiene bordes blancos/grises) luzca natural */
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    font-family: sans-serif;
}

/* Contenedor que agrupa la imagen */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    /* Un poco de margen en móviles para que no toque los bordes */
}

/* Estilos de la imagen para que sea responsiva y no se deforme */
.center-image {
    max-width: 50%;
    max-height: 40vh;
    /* No sobrepasará el 90% del alto total de la ventana */
    object-fit: contain;
    /* Ajusta la imagen manteniendo sus proporciones */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    /* Agregamos un leve borde sombreado para darle aspecto premium y que resalte sutilmente */
    border-radius: 50%;
    /* Como la imagen es un logo circular, aplicamos borde redondo para suavizar las esquinas */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Transición suave en hover */
    cursor: pointer;
}

/* Animación sutil de "respiración" o zoom in al hacer hover en la imagen (Toque premium) */
.center-image:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}