/* CONTENEDORES */

        .section-box {
            background: white;
            padding: 40px;
            border-radius: 25px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            margin-bottom: 60px;
        }



        /* SIMULADOR ESCENARIO */

        .scratch-mockup {
            background: #f4f7ff;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .stage {
            background: white;
            height: 260px;
            border-radius: 15px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .stage::before {
            content: "ESCENARIO 🎭";
            position: absolute;
            top: 10px;
            left: 10px;
            background: #4c97ff;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
        }

        .sprite-demo {
            font-size: 60px;
            animation: float 2s infinite ease-in-out;
        }

        @keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .blocks-zone {
            background: #ffeaa7;
            padding: 15px;
            border-radius: 15px;
            margin-top: 15px;
            font-size: 14px;
        }

        .blocks-zone::before {
            content: "ZONA DE BLOQUES 🧱";
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
        }

        /* TARJETAS */

        .info-card {
            background: #ffffff;
            padding: 25px;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
            transition: all .3s ease;
            height: 100%;
        }

        .info-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }

        /* ACTIVIDAD */

        .respuesta {
            padding: 15px;
            border-radius: 15px;
            cursor: pointer;
            margin-bottom: 12px;
            border: 2px solid #ddd;
            transition: .3s;
            font-weight: 500;
        }

        .respuesta:hover {
            transform: scale(1.03);
        }

        .correcta {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
        }

        .incorrecta {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .gato-animado {
            position: absolute;
            bottom: 30px;
            left: 10%;
            font-size: 60px;
            animation: moverGato 6s linear infinite;
        }

        @keyframes moverGato {
            0% {
                left: 10%;
                transform: scaleX(1);
            }

            45% {
                left: 75%;
                transform: scaleX(1);
            }

            50% {
                transform: scaleX(-1);
            }

            95% {
                left: 10%;
                transform: scaleX(-1);
            }

            100% {
                left: 10%;
                transform: scaleX(1);
            }
        }

        .paso {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            cursor: grab;
            font-size: 18px;
            transition: 0.3s;
        }

        .paso:hover {
            transform: scale(1.03);
        }