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

/* Animación del degradado */
@keyframes gradient-animation {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Cuerpo con degradado rojo animado */
body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: linear-gradient(120deg,
        #ffc686 0%,
        #ff9046 20%,
        #ff3a20 30%,
        #e40000 50%,
        #a10000 70%,
        #830000 100%);
    background-size: 200% 200%;
    animation: gradient-animation 20s ease-in-out alternate infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Contenedor del logo */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Logo con efectos */
.logo {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}

/* Efecto zoom en hover */
.logo:hover {
    transform: scale(1.1);
}

/* Responsive para diferentes tamaños */
@media (max-width: 768px) {
    .logo {
        max-width: 80vw;
        max-height: 80vh;
    }
}

@media (max-width: 480px) {
    .logo {
        max-width: 70vw;
        max-height: 70vh;
    }
    
    .logo:hover {
        transform: scale(1.05);
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 320px) {
    .logo {
        max-width: 60vw;
        max-height: 60vh;
    }
}