:root {
    --celeste: #94BAC4;
    /* Azul/Teal de la imagen */
    --naranja: #E57D37;
    /* Naranja Principal de la imagen */
    --naranja-claro: #EAAD62;
    /* Amarillo cálido de la imagen */
    --naranja-oscuro: #b35a20;
    /* Sombra/Contraste derivado */
    --azul-mar: #94BAC4;
    /* Sincronizado con el celeste */
    --oro: #EAAD62;
    /* Amarillo/Oro de la imagen */
    --verde: #10b981;
    --rojo: #ef233c;
    --texto: #2b2d42;
    --violeta: #9d4edd;
    --gris: #ECDFCB;
    /* Beige de la imagen */
    --gris-medio: #b8ac94;
    --gris-oscuro: #696047;
    --blanco-trans: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(148, 186, 196, 0.3);
    /* Border basado en el celeste */
    --premium-font: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--gris);
    color: var(--texto);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Animations */
@keyframes moverNubes {
    from {
        transform: translateX(-250px);
    }

    to {
        transform: translateX(110vw);
    }
}

@keyframes pulseReady {
    0% {
        transform: scale(1.1);
        box-shadow: 0 8px 0 #e2e8f0, 0 0 10px rgba(255, 255, 255, 0.4);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 8px 0 #e2e8f0, 0 0 25px rgba(255, 255, 255, 0.8);
    }

    100% {
        transform: scale(1.1);
        box-shadow: 0 8px 0 #e2e8f0, 0 0 10px rgba(255, 255, 255, 0.4);
    }
}

@keyframes pulseReadyCloud {
    0% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 8px 0 #e2e8f0, 0 0 30px rgba(255, 255, 255, 1);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes modalIn {
    to {
        transform: translateY(0);
    }
}

@keyframes fadeInHint {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shakeLightning {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}