/* Fondo elegante con degradado suave */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
    font-family: "Poppins", sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor principal */
.container {
    text-align: center;
}

/* LOGO GRANDE */
.logo {
    width: 80%;                /* Ocupa casi toda la pantalla */
    max-width: 600px;          /* Máximo recomendable para que no pierda calidad */
    animation: fadeDown 1.1s ease both;
    margin-bottom: 25px;
    border-radius: 10px;
}

/* Título con el color oficial */
.title {
    font-size: 3.4rem;
    font-weight: 800;
    color: #376F04;
    margin-bottom: 25px;
    letter-spacing: 1px;
    animation: fadeDown 1.2s ease both;
}

/* Imagen de construcción centrada */
.image-wrapper {
    display: flex;
    justify-content: center;
}

/* Imagen animada */
.construction-img {
    width: 100px;
    animation: bounceGlow 3s ease-in-out infinite;
}

/* Subtítulo */
.subtitle {
    font-size: 1.6rem;
    font-weight: 600;
    color: #376F04;
    margin-top: 20px;
    animation: fadeUp 1.5s ease both;
}

/* ANIMACIONES */
@keyframes fadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bounceGlow {
    0% {
        transform: translateY(0);
        filter: drop-shadow(0 0 0px rgba(55,111,4,0.4));
    }
    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 4px 12px rgba(55,111,4,0.35));
    }
    100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 0px rgba(55,111,4,0.4));
    }
}